joomladay brazil 2014 joomla! template with bootstrap 3

26
JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014 Joomla! & Bootstrap 3 Building a Joomla! Template with Bootstrap Version 3

Upload: saurabh-shah

Post on 08-May-2015

1.050 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: JoomlaDay Brazil 2014   Joomla! Template With Bootstrap 3

JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014

Joomla! & Bootstrap 3 Building a Joomla! Template

with Bootstrap Version 3

Page 2: JoomlaDay Brazil 2014   Joomla! Template With Bootstrap 3

JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014

● Board Member, Open Source Matters (OSM) ● Joomla! Events Team Member ● Joomla! Social Team Member ● Joomla! User Group Member ● JoomlaDay India Organizer

I’m Saurabh

● Front-End Developer @ CloudAccess.net ● Marketing, Social Media, Sales, Professional Services

● From Pune, India ● Love Travel & Technology

Page 3: JoomlaDay Brazil 2014   Joomla! Template With Bootstrap 3

JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014

Who has built a custom Joomla! template before?

Page 4: JoomlaDay Brazil 2014   Joomla! Template With Bootstrap 3

JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014

Today’s Agenda1. Useful Tools 2. Files & Directories 3. Bootstrap 4. Step-by-step coding with a demo site

Page 5: JoomlaDay Brazil 2014   Joomla! Template With Bootstrap 3

JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014

Useful Tools• Bootstrap V3 - http://getbootstrap.com/ • Mamp / Xamp / Wamp for local development • Editor – Coda / Notepad++ / Sublime Text

Page 6: JoomlaDay Brazil 2014   Joomla! Template With Bootstrap 3

JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014

Responsive Design• Uses CSS Media Queries

• Supported by all latest browsers • IE8 : Requires resond.js & html5shiv.js

!• It uses more than just fluid design

• Padding, Margin, Sizes , it all can be adjusted • Any element can be hidden or move around • Columns can be stacked at smaller width

Page 7: JoomlaDay Brazil 2014   Joomla! Template With Bootstrap 3

JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014

Why to use Bootstrap?• It works on grid system (Extra Small , Small, Medium, Large ) • Common Elements & components like Buttons, Progress

bar etc. • Default typography • out of the box many jQuery plugins available like Slider,

Accordions , tabs etc.

Page 8: JoomlaDay Brazil 2014   Joomla! Template With Bootstrap 3

JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014

Bootstrap V3

Page 9: JoomlaDay Brazil 2014   Joomla! Template With Bootstrap 3

JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014

Bootstrap V3• Framework created by Twitter and published as an open

source project • Basically consists of CSS file , Javascript file and Icon Fonts • CSS is compiled from LESS/SAAS source file. • It requires jQuery • Mobile-First-Strategy , which means Content is most

important • Layout - Smaller width first • Base CSS is default for phones, Use media queries for

tablet (Medium) and desktop(Large)

Page 10: JoomlaDay Brazil 2014   Joomla! Template With Bootstrap 3

JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014

Bootstrap Break Points/* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ !/* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { ... } !/* Medium devices (desktops, 992px and up) */ @media (min-width: 992) { ... } !/* Large devices (large desktops, 1200px and up) */ @media (min-width: 1200) { ... }

Page 11: JoomlaDay Brazil 2014   Joomla! Template With Bootstrap 3

JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014

Responsive Grid Table• Total Grid is 12 Columns Wide • Fluid by default(Extra small) and rest are with fixed width

Page 12: JoomlaDay Brazil 2014   Joomla! Template With Bootstrap 3

JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014

Grid Structure<div class="container">

<div class="row"> <div class=“col-*-*”>…</div> <div class=“col-*-*”>….</div> </div> </div> !Example: <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div>

Page 13: JoomlaDay Brazil 2014   Joomla! Template With Bootstrap 3

JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014

Helper Classes• Bootstrap includes number of CSS classes available to

avoid inline styling and help mark up looks more semantic. • clearfix • text-left, center-block, text-right • pull-left, pull-right • visible-xs, hidden-xs , visible-md, hidden-md, …. and

so on

Page 14: JoomlaDay Brazil 2014   Joomla! Template With Bootstrap 3

JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014

Responsive Images• Images in Background

• Load appropriate size of the image based on media query for different devices

!• Using Images in HTML code (<img src=“file.jpg”>)

• Uses .img-responsive class to sets max-wdth to 100% • Browser scales images to fit container but does not get

distorted or pixelated.

Page 15: JoomlaDay Brazil 2014   Joomla! Template With Bootstrap 3

JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014

Visual Components• Font Icons • Buttons • Navbar • Progress bar • Breadcrumbs • Pagination • Label • Badges • Jumbotron • …. And many more

Page 16: JoomlaDay Brazil 2014   Joomla! Template With Bootstrap 3

JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014

Step-by-step process ofbuilding a Joomla! Template

Page 17: JoomlaDay Brazil 2014   Joomla! Template With Bootstrap 3

JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014September 28th, 2013Joomla!Day™ Spain 2013

• Create templatedetails.xml file – specifies information about the template, including where the system can find all the resources needed for the template.

Step 1

Page 18: JoomlaDay Brazil 2014   Joomla! Template With Bootstrap 3

JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014

• Create index.php file • The basic file that provides the logic and positioning for

the layout of the components and modules; your fundamental template file.

Step 2

Page 19: JoomlaDay Brazil 2014   Joomla! Template With Bootstrap 3

JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014

• Thumbnail images, component.php file, favicon

Step 3

Page 20: JoomlaDay Brazil 2014   Joomla! Template With Bootstrap 3

JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014

• Create folder images, css, fonts, and js

Step 4

Page 21: JoomlaDay Brazil 2014   Joomla! Template With Bootstrap 3

JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014

• Language folder with description and files .ini, .sys.ini

Step 5

Page 22: JoomlaDay Brazil 2014   Joomla! Template With Bootstrap 3

JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014

• Zip the file and it is ready to install.

Step 6

Page 23: JoomlaDay Brazil 2014   Joomla! Template With Bootstrap 3

JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014

You’re ready to go !

Page 24: JoomlaDay Brazil 2014   Joomla! Template With Bootstrap 3

JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014

• Tool to convert 2.x > 3.x Bootstrap code: http://upgrade-bootstrap.bootply.com/

!• Bootstrap Upgrader: http://code.divshot.com/

bootstrap3_upgrader/ !

• PlaceHolder – For creating Images as a placeholder: http://placehold.it/960x300

!• Convert css automatically to less : http://css2less.cc/

Other useful sites

Page 25: JoomlaDay Brazil 2014   Joomla! Template With Bootstrap 3

JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014

Are you a ninja now?

Page 26: JoomlaDay Brazil 2014   Joomla! Template With Bootstrap 3

JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014

Obrigado! Thank you

Saurabh Shah

Twitter: @saurabhshahEmail: [email protected] [email protected]