Joomla! Template with Bootstrap 3 - Joomla!Day Spain 2013

September 28th, 2013 Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013 Joomla!Day™ Spain 2013

Joomla! & Bootstrap 3 Building a Joomla! Template

with Bootstrap Version 3

September 28th, 2013 Joomla!Day™ Spain 2013 Twitter: @saurabhshah

●  Joomlaholic ●  Joomla! Events Team Member ●  Joomla! Social Team Member ●  Joomla! User Group Member ●  Joomla! Day India Organizer

I’m Saurabh

●  Front-End Developer @ CloudAccess.net ●  Marketing, Social Media, Sales, Professional Services

●  Mozilla Representative (ReMo)

●  From Pune, India ●  Love Travel & Technology


A Comprehensive, Ready-to-go Joomla! Hosting Platform.

Point, Click, Go!

September 28th, 2013 Joomla!Day™ Spain 2013 Twitter: @saurabhshah Hospitals

Nonprofits

Governments

Small & Medium Businesses

Enterprises

Banks

Schools

Over 8,500 Active Paying Clients


Hosting Backups

Network

Compliance

Domains

Training

3rd Party Apps

Joomla!

CloudMail


Who has built a custom Joomla! template before?


Today’s Agenda 1.  Useful Tools 2.  Files & Directories 3.  Bootstrap 4.  Step-by-step coding with a demo site


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


Bootstrap V3


Step-by-step process of building a Joomla! Template


●  Create templatedetails.xml file – specifies information about the template, including where the system can find all the resources needed for the template.

Step 1


•  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


•  Thumbnail images, component.php file, favicon

Step 3


•  Create folder images, css, fonts, LESS and JS

Step 4


•  Language folder with description and files .ini, .sys.ini

Step 5


•  Zip the file and it is ready to install.

Step 6


You’re ready to go !


•  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

Other useful sites


Are you a ninja now?


Gracias ध"यवाद

Thank you

Saurabh Shah Twitter: @saurabhshah

Email: [email protected] [email protected]