Download pdf - Responsive websites with Joomla 3 & Bootstrap #jd13nl

Responsive websites met Joomla 3 & BootstrapJoomla!Dagen Nederland, 21 april 2013

Sander Potjer - @sanderpotjer

































ACL Manager

JoomlaCommunity.eu

Sander Potjer Webdevelopment

Joomla!Dagen Nederland

Joomla Community Leadership member

Joomla gebruikersgroepen

Stichting Sympathy

http://www.slideshare.net/sanderpotjer/



Webdesigner Joomla-special 2013, p27-p31

Code: http://sanderpotjer.github.io/jbr/

http://sanderpotjer.github.io/jbr/


Basis template installeren





Bootstrap en Joomla JUI



Joomla User Interface (JUI) Library

Bootstrap en Joomla JUI | index.php




Moduleposities

Moduleposities | index.php

Moduleposities | index.php

Moduleposities

Bootstrap-grootte en iconen

Moduleposities

Bootstrap-grootte en iconen | index.php


Bootstrap-grootte en iconen | index.php



Module-override maken

Module-override maken | html/modules.php



<div class=”span4”>



<h3><span class=”icon-cube”></span>...</h3>

Module-override maken | index.php

Module-override maken | index.php

Module-override maken

Header-module

Header-module

Header-module

Header-module | aangepaste uitvoer

Header-module

Contact-module

Contact-module | aangepaste uitvoer

Contact-module


span3


span3 span3


span3 span3 span6


span3 span3 span6


span4 span4 span4


Contact-module

Contact-module

Portfolio

Portfolio

Portfolio

Portfolio

Portfolio

Portfolio

Portfolio

Portfolio

Portfolio | html/com_weblinks/category/default.php

Portfolio | html/com_weblinks/category/default.php

Navigatie

Navigatie

Navigatie

Navigatie

Navigatie

Navigatie | index.php




ScrollSpy

ScrollSpy

ScrollSpy

ScrollSpy | index.php

ScrollSpy | index.php

ScrollSpy

Puntjes op de i

Puntjes op de i | css/template.css

Tadaaa...

Responsive?

Responsive!

Responsive!

Responsive!

Responsive!

Meer informatie

Bootstrap: http://www.getbootstrap.com

Joomla JUI & Icons: http://jui.kyleledbetter.com

Workshop code: http://sanderpotjer.github.io/jbr/

Boek(je)-tip: http://www.packtpub.com/twitter-bootstrap-web-development/book

Bootstrap styles voor JCE editor: http://www.deweso.com/home/137-blog-international/154-making-better-use-of-bootstrap-with-the-jce-editor-css-download.html

http://getbootstrap.com

http://getbootstrap.com

http://jui.kyleledbetter.com

http://jui.kyleledbetter.com



http://www.packtpub.com/twitter-bootstrap-web-development/book

http://www.packtpub.com/twitter-bootstrap-web-development/book

http://www.deweso.com/home/137-blog-international/154-making-better-use-of-bootstrap-with-the-jce-editor-css-download.html


