120
Responsive websites with Joomla 3 & Bootstrap Joomla!Day Bosnia & Herzegovina - May 3, 2013 Sander Potjer - @sanderpotjer

Responsive websites with Joomla 3 & Bootstrap #jd13ba

Embed Size (px)

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

Page 1: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013

Sander Potjer - @sanderpotjer

Page 2: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013

Sander Potjer - @sanderpotjer

Page 3: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013

Sander Potjer - @sanderpotjer

Page 4: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013

Sander Potjer - @sanderpotjer

Page 5: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013

Sander Potjer - @sanderpotjer

Page 6: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013

Sander Potjer - @sanderpotjer

Page 7: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013

Sander Potjer - @sanderpotjer

Page 8: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013

Sander Potjer - @sanderpotjer

Page 9: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013

Sander Potjer - @sanderpotjer

Page 10: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013

Sander Potjer - @sanderpotjer

Page 11: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013

Sander Potjer - @sanderpotjer

Page 12: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013

Sander Potjer - @sanderpotjer

Page 13: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013

Sander Potjer - @sanderpotjer

Page 14: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013

Sander Potjer - @sanderpotjer

Page 15: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013

Sander Potjer - @sanderpotjer

Page 16: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013

Sander Potjer - @sanderpotjer

Page 17: Responsive websites with Joomla 3 & Bootstrap #jd13ba

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

Page 19: Responsive websites with Joomla 3 & Bootstrap #jd13ba

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

Page 20: Responsive websites with Joomla 3 & Bootstrap #jd13ba
Page 21: Responsive websites with Joomla 3 & Bootstrap #jd13ba
Page 22: Responsive websites with Joomla 3 & Bootstrap #jd13ba
Page 23: Responsive websites with Joomla 3 & Bootstrap #jd13ba
Page 24: Responsive websites with Joomla 3 & Bootstrap #jd13ba
Page 25: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Basic template installation

Page 26: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Basic template installation

Page 27: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Basic template installation

Page 28: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Basic template installation

Page 29: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Basic template installation

Page 30: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Bootstrap & Joomla JUI

Page 31: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Bootstrap & Joomla JUI

Page 32: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Bootstrap & Joomla JUI

Joomla User Interface (JUI) Library

Page 33: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Bootstrap & Joomla JUI | index.php

Page 34: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Bootstrap & Joomla JUI | index.php

Page 35: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Bootstrap & Joomla JUI | index.php

Page 36: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Bootstrap & Joomla JUI | index.php

Page 37: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Modulepositions

Page 38: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Modulepositions | index.php

Page 39: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Modulepositions | index.php

Page 40: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Modulepositions

Page 41: Responsive websites with Joomla 3 & Bootstrap #jd13ba
Page 42: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Bootstrap-size & Icons

Page 43: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Bootstrap-size & Icons | index.php

Page 44: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Bootstrap-size & Icons

Page 45: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Bootstrap-size & Icons

Page 46: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Bootstrap-size & Icons | index.php

Page 47: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Bootstrap-size & Icons

Page 48: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Bootstrap-size & Icons

Page 49: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Bootstrap-size & Icons

Page 50: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Bootstrap-size & Icons

jui.kyleledbetter.com

Page 51: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Module override

Page 52: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Module override

Page 53: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Module-override | html/modules.php

Page 54: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Module-override | html/modules.php

Page 55: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Module-override | html/modules.php

<div class=”span4”>

Page 56: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Module-override | html/modules.php

Page 57: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Module-override | html/modules.php

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

Page 58: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Module-override | index.php

Page 59: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Module-override | index.php

Page 60: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Module-override | index.php

Page 61: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Module-override

Page 62: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Header-module

Page 63: Responsive websites with Joomla 3 & Bootstrap #jd13ba
Page 64: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Header-module

Page 65: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Header-module

Page 66: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Header-module

Page 67: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Header-module

Page 68: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Contact-module

Page 69: Responsive websites with Joomla 3 & Bootstrap #jd13ba
Page 70: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Contact-module | custom output

Page 71: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Contact-module

Page 72: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Contact-module | custom output

span3

Page 73: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Contact-module | custom output

span3 span3

Page 74: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Contact-module | custom output

span3 span3 span6

Page 75: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Contact-module | custom output

span3 span3 span6

Page 76: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Contact-module | custom output

span4 span4 span4

Page 77: Responsive websites with Joomla 3 & Bootstrap #jd13ba
Page 78: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Contact-module

Page 79: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Contact-module | custom output

Page 80: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Contact-module

Page 81: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Portfolio

Page 82: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Portfolio

Page 83: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Portfolio

Page 84: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Portfolio

Page 85: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Portfolio

Page 86: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Portfolio

Page 87: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Portfolio

Page 88: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Portfolio

Page 89: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Portfolio | html/com_weblinks/category/default.php

Page 90: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Portfolio | html/com_weblinks/category/default.php

Page 91: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Portfolio | html/com_weblinks/category/default.php

Page 92: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Menu

Page 93: Responsive websites with Joomla 3 & Bootstrap #jd13ba
Page 94: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Menu

Page 95: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Menu

Page 96: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Menu

Page 97: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Menu

Page 98: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Menu | index.php

Page 99: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Menu | index.php

Page 100: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Menu | index.php

Page 101: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Menu | index.php

Page 102: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Menu | index.php

Page 103: Responsive websites with Joomla 3 & Bootstrap #jd13ba

ScrollSpy

Page 104: Responsive websites with Joomla 3 & Bootstrap #jd13ba

ScrollSpy

Page 105: Responsive websites with Joomla 3 & Bootstrap #jd13ba

ScrollSpy

Page 106: Responsive websites with Joomla 3 & Bootstrap #jd13ba

ScrollSpy | index.php

Page 107: Responsive websites with Joomla 3 & Bootstrap #jd13ba

ScrollSpy | index.php

Page 108: Responsive websites with Joomla 3 & Bootstrap #jd13ba

ScrollSpy | index.php

Page 109: Responsive websites with Joomla 3 & Bootstrap #jd13ba

ScrollSpy

Page 110: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Finishing touch

Page 111: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Finishing touch | css/template.css

Page 112: Responsive websites with Joomla 3 & Bootstrap #jd13ba

And here we are...

Page 113: Responsive websites with Joomla 3 & Bootstrap #jd13ba
Page 114: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Responsive?

Page 115: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Responsive!

Page 116: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Responsive!

Page 117: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Responsive!

Page 118: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Responsive!

Page 119: Responsive websites with Joomla 3 & Bootstrap #jd13ba

Live demo:http://jbr.sanderpotjer.nl