Responsive websites with Joomla 3 & Bootstrap #jd13ba
Upcoming SlideShare
Loading in...5
×
 

Responsive websites with Joomla 3 & Bootstrap #jd13ba

on

  • 2,874 views

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!

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!

Statistics

Views

Total Views
2,874
Views on SlideShare
2,742
Embed Views
132

Actions

Likes
4
Downloads
85
Comments
0

3 Embeds 132

http://www.joomla.ba 97
http://elearning.tadelformacion.com 29
http://joomla.ba 6

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive websites with Joomla 3 & Bootstrap #jd13ba Responsive websites with Joomla 3 & Bootstrap #jd13ba Presentation Transcript

  • Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer
  • Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer
  • Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer View slide
  • Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer View slide
  • Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer
  • Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer
  • Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer
  • Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer
  • Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer
  • Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer
  • Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer
  • Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer
  • Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer
  • Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer
  • Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer
  • Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer
  • Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjerACL ManagerJoomlaCommunity.euSander Potjer WebdevelopmentJoomla!Days The NetherlandsJoomla Community Leadership memberDutch JUG’sStichting 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 JUIJoomla 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 & Iconsjui.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 outputspan3
  • Contact-module | custom outputspan3 span3
  • Contact-module | custom outputspan3 span3 span6
  • Contact-module | custom outputspan3 span3 span6
  • Contact-module | custom outputspan4 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!
  • Live demo:http://jbr.sanderpotjer.nl
  • More informationBootstrap:http://www.getbootstrap.comJoomla JUI & Icons:http://jui.kyleledbetter.comWorkshop code:http://sanderpotjer.github.io/jbr/(small) Book suggestion:http://www.packtpub.com/twitter-bootstrap-web-development/bookBootstrap 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