Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
JoomlaDay Brazil 2014 Joomla! Template With Bootstrap 3
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.
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
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
26. JoomlaDay™ Brazil 2014 Twitter: @saurabhshah | May 2nd, 2014
Obrigado!
Thank you
Saurabh Shah
Twitter: @saurabhshah
Email: saurabh@cloudaccess.net
saurabh.ds16@gmail.com
