Workshop on Joomla! Template with Bootstrap version 3 and showing off pros and cons with current Joomla! version 3.1 compatibility.

1. Joomla! & Bootstrap 3
Building a Joomla! Template
with Bootstrap Version 3
Joomla!Day™ Spain 2013
Twitter: @saurabhshah
September 28th, 2013

2. I’m Saurabh
●
●
●
●
From Pune, India
Love Travel & Technology
Front-End Developer @ CloudAccess.net
Marketing, Social Media, Sales, Professional Services
●
Joomlaholic
Joomla! Events Team Member
Joomla! Social Team Member
Joomla! User Group Member
Joomla! Day India Organizer
●
Mozilla Representative (ReMo)
●
●
●
●
Joomla!Day™ Spain 2013
Twitter: @saurabhshah
September 28th, 2013

3. A Comprehensive, Ready-to-go
Joomla! Hosting Platform.
Point, Click, Go!
Joomla!Day™ Spain 2013
Twitter: @saurabhshah
September 28th, 2013

4. Over 8,500 Active Paying Clients
Schools
Small & Medium
Businesses
Enterprises
Nonprofits
Governments
Joomla!Day™ Spain 2013
Banks
Twitter: @saurabhshah
Hospitals
September 28th, 2013

5. Network
Joomla!
Backups
Hosting
Compliance
CloudMail
Joomla!Day™ Spain 2013
Training
Domains
3rd Party
Apps
Twitter: @saurabhshah
September 28th, 2013

6. Who has built a custom
Joomla! template before?
Joomla!Day™ Spain 2013
Twitter: @saurabhshah
September 28th, 2013

7. Today’s Agenda
1.
2.
3.
4.
Useful Tools
Files & Directories
Bootstrap
Step-by-step coding with a demo site
Joomla!Day™ Spain 2013
Twitter: @saurabhshah
September 28th, 2013

8. Useful Tools
•
•
•
•
Bootstrap V3 - http://getbootstrap.com/
Bootstrap V2.3.2 - http://getbootstrap.com/2.3.2/
Crunch - http://crunchapp.net/
Editor – Coda / Notepad++ / Sublime Text
Joomla!Day™ Spain 2013
Twitter: @saurabhshah
September 28th, 2013

9. Bootstrap V3
Joomla!Day™ Spain 2013
Twitter: @saurabhshah
September 28th, 2013

10. Step-by-step process of
building a Joomla! Template
Joomla!Day™ Spain 2013
Twitter: @saurabhshah
September 28th, 2013

11. Step 1
● Create templatedetails.xml file – specifies information
about the template, including where the system can
find all the resources needed for the template.
Joomla!Day™ Spain 2013
Twitter: @saurabhshah
September 28th, 2013

12. Step 2
• 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.
Joomla!Day™ Spain 2013
Twitter: @saurabhshah
September 28th, 2013

13. Step 3
• Thumbnail images, component.php file, favicon
Joomla!Day™ Spain 2013
Twitter: @saurabhshah
September 28th, 2013

14. Step 4
• Create folder images, css, fonts, LESS and JS
Joomla!Day™ Spain 2013
Twitter: @saurabhshah
September 28th, 2013

15. Step 5
• Language folder with description and files .ini, .sys.ini
Joomla!Day™ Spain 2013
Twitter: @saurabhshah
September 28th, 2013

16. Step 6
• Zip the file and it is ready to install.
Joomla!Day™ Spain 2013
Twitter: @saurabhshah
September 28th, 2013

17. You’re ready to go !
Joomla!Day™ Spain 2013
Twitter: @saurabhshah
September 28th, 2013

18. Other useful sites
• 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
Joomla!Day™ Spain 2013
Twitter: @saurabhshah
September 28th, 2013

19. Are you a ninja now?
Joomla!Day™ Spain 2013
Twitter: @saurabhshah
September 28th, 2013

20. Gracias
ध"यवाद
Thank you
Saurabh Shah
Twitter: @saurabhshah
Email: saurabh@cloudaccess.net
saurabh.ds16@gmail.com
Joomla!Day™ Spain 2013
Twitter: @saurabhshah
September 28th, 2013