JoomlaDay Brazil 2014 Joomla! Template With Bootstrap 3

  • Published on
    08-May-2015

  • View
    1.040

  • Download
    0

Embed Size (px)

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 Im 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 Todays 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

.

! Example:

.col-xs-6
.col-xs-6

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 () 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 Youre 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