Your SlideShare is downloading. ×
JoomlaDay Brazil 2014   Joomla! Template With Bootstrap 3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JoomlaDay Brazil 2014 Joomla! Template With Bootstrap 3

1,029
views

Published on

Published in: Technology, Travel

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,029
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
26
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014 Joomla! & Bootstrap 3 Building a Joomla! Template with Bootstrap Version 3
  • 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. JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014 Who has built a custom 
 Joomla! template before?
  • 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. 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. 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. 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. JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014 Bootstrap V3
  • 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. 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. 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. 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. 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. 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. 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. JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014 Step-by-step process of
 building a Joomla! Template
  • 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. 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. JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014 • Thumbnail images, component.php file, favicon Step 3
  • 20. JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014 • Create folder images, css, fonts, and js Step 4
  • 21. JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014 • Language folder with description and files .ini, .sys.ini Step 5
  • 22. JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014 • Zip the file and it is ready to install. Step 6
  • 23. JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014 You’re ready to go !
  • 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. JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014 Are you a ninja now?
  • 26. JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014 Obrigado! Thank you
 
 Saurabh Shah
 Twitter: @saurabhshah
 Email: saurabh@cloudaccess.net 
 saurabh.ds16@gmail.com

×