JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014
Joomla! & Bootstrap 3
Building a Joomla! Template
with Bootst...
JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014
● Board Member, Open Source Matters (OSM)
● Joomla! Events Te...
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 Agenda
1. Useful Tools
2. Files & Directories
3. Boot...
JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014
Useful Tools
• Bootstrap V3 - http://getbootstrap.com/
• Mamp...
JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014
Responsive Design
• Uses CSS Media Queries
• Supported by all...
JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014
Why to use Bootstrap?
• It works on grid system (Extra Small ...
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 ...
JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014
Bootstrap Break Points
/* Extra small devices (phones, less t...
JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014
Responsive Grid Table
• Total Grid is 12 Columns Wide
• Fluid...
JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014
Grid Structure
<div class="container">
<div class="row">
<div...
JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014
Helper Classes
• Bootstrap includes number of CSS classes ava...
JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014
Responsive Images
• Images in Background
• Load appropriate s...
JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014
Visual Components
• Font Icons
• Buttons
• Navbar
• Progress ...
JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014
Step-by-step process of

building a Joomla! Template
JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014September 28th, 2013Joomla!Day™ Spain 2013
• Create templatede...
JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014
• Create index.php file
• The basic file that provides the lo...
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
S...
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-
b...
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: @saurabhshah

E...
Upcoming SlideShare
Loading in …5
×

JoomlaDay Brazil 2014 Joomla! Template With Bootstrap 3

1,627 views

Published on

Published in: Technology, Travel
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,627
On SlideShare
0
From Embeds
0
Number of Embeds
119
Actions
Shares
0
Downloads
34
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

JoomlaDay Brazil 2014 Joomla! Template With Bootstrap 3

  1. 1. JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014 Joomla! & Bootstrap 3 Building a Joomla! Template with Bootstrap Version 3
  2. 2. 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
  3. 3. JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014 Who has built a custom 
 Joomla! template before?
  4. 4. JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014 Today’s Agenda 1. Useful Tools 2. Files & Directories 3. Bootstrap 4. Step-by-step coding with a demo site
  5. 5. 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
  6. 6. 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
  7. 7. 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.
  8. 8. JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014 Bootstrap V3
  9. 9. 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)
  10. 10. 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) { ... }
  11. 11. 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
  12. 12. 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>
  13. 13. 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
  14. 14. 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.
  15. 15. JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014 Visual Components • Font Icons • Buttons • Navbar • Progress bar • Breadcrumbs • Pagination • Label • Badges • Jumbotron • …. And many more
  16. 16. JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014 Step-by-step process of
 building a Joomla! Template
  17. 17. 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
  18. 18. 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
  19. 19. JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014 • Thumbnail images, component.php file, favicon Step 3
  20. 20. JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014 • Create folder images, css, fonts, and js Step 4
  21. 21. JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014 • Language folder with description and files .ini, .sys.ini Step 5
  22. 22. JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014 • Zip the file and it is ready to install. Step 6
  23. 23. JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014 You’re ready to go !
  24. 24. 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
  25. 25. JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014 Are you a ninja now?
  26. 26. JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014 Obrigado! Thank you
 
 Saurabh Shah
 Twitter: @saurabhshah
 Email: saurabh@cloudaccess.net 
 saurabh.ds16@gmail.com

×