joomladay brazil 2014 joomla! template with bootstrap 3
TRANSCRIPT
JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014
Joomla! & Bootstrap 3 Building a Joomla! Template
with Bootstrap Version 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
JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014
Who has built a custom Joomla! template before?
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
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
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
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.
JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014
Bootstrap V3
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)
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) { ... }
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
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>
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
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.
JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014
Visual Components• Font Icons • Buttons • Navbar • Progress bar • Breadcrumbs • Pagination • Label • Badges • Jumbotron • …. And many more
JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014
Step-by-step process ofbuilding a Joomla! Template
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
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
JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014
• Thumbnail images, component.php file, favicon
Step 3
JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014
• Create folder images, css, fonts, and js
Step 4
JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014
• Language folder with description and files .ini, .sys.ini
Step 5
JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014
• Zip the file and it is ready to install.
Step 6
JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014
You’re ready to go !
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
JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014
Are you a ninja now?
JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014
Obrigado! Thank you
Saurabh Shah
Twitter: @saurabhshahEmail: [email protected] [email protected]