View
3.018
Download
0
Category
Preview:
DESCRIPTION
Explaining how to create a simple one-page responsive Joomla 3 website by using the Bootstrap documentation examples and the Joomla JUI. Just a couple lines of CSS needed!
Citation preview
Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer
ACL Manager
JoomlaCommunity.eu
Sander Potjer Webdevelopment
Joomla!Days The Netherlands
Joomla Community Leadership member
Dutch JUG’s
Stichting Sympathy
http://www.slideshare.net/sanderpotjer/
Code: http://sanderpotjer.github.io/jbr/
Basic template installation
Basic template installation
Basic template installation
Basic template installation
Basic template installation
Bootstrap & Joomla JUI
Bootstrap & Joomla JUI
Bootstrap & Joomla JUI
Joomla User Interface (JUI) Library
Bootstrap & Joomla JUI | index.php
Bootstrap & Joomla JUI | index.php
Bootstrap & Joomla JUI | index.php
Bootstrap & Joomla JUI | index.php
Modulepositions
Modulepositions | index.php
Modulepositions | index.php
Modulepositions
Bootstrap-size & Icons
Bootstrap-size & Icons | index.php
Bootstrap-size & Icons
Bootstrap-size & Icons
Bootstrap-size & Icons | index.php
Bootstrap-size & Icons
Bootstrap-size & Icons
Bootstrap-size & Icons
Bootstrap-size & Icons
jui.kyleledbetter.com
Module override
Module override
Module-override | html/modules.php
Module-override | html/modules.php
Module-override | html/modules.php
<div class=”span4”>
Module-override | html/modules.php
Module-override | html/modules.php
<h3><span class=”icon-cube”></span>...</h3>
Module-override | index.php
Module-override | index.php
Module-override | index.php
Module-override
Header-module
Header-module
Header-module
Header-module
Header-module
Contact-module
Contact-module | custom output
Contact-module
Contact-module | custom output
span3
Contact-module | custom output
span3 span3
Contact-module | custom output
span3 span3 span6
Contact-module | custom output
span3 span3 span6
Contact-module | custom output
span4 span4 span4
Contact-module
Contact-module | custom output
Contact-module
Portfolio
Portfolio
Portfolio
Portfolio
Portfolio
Portfolio
Portfolio
Portfolio
Portfolio | html/com_weblinks/category/default.php
Portfolio | html/com_weblinks/category/default.php
Portfolio | html/com_weblinks/category/default.php
Menu
Menu
Menu
Menu
Menu
Menu | index.php
Menu | index.php
Menu | index.php
Menu | index.php
Menu | index.php
ScrollSpy
ScrollSpy
ScrollSpy
ScrollSpy | index.php
ScrollSpy | index.php
ScrollSpy | index.php
ScrollSpy
Finishing touch
Finishing touch | css/template.css
And here we are...
Responsive?
Responsive!
Responsive!
Responsive!
Responsive!
More information
Bootstrap: http://www.getbootstrap.com
Joomla JUI & Icons: http://jui.kyleledbetter.com
Workshop code: http://sanderpotjer.github.io/jbr/
(small) Book suggestion: http://www.packtpub.com/twitter-bootstrap-web-development/book
Bootstrap styles for JCE editor: http://www.deweso.com/home/137-blog-international/154-making-better-use-of-bootstrap-with-the-jce-editor-css-download.html
Recommended