Your SlideShare is downloading. ×
  • Like
Responsive websites with Joomla 3 & Bootstrap #jd13ba
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Responsive websites with Joomla 3 & Bootstrap #jd13ba

  • 2,531 views
Published

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!

Published in Technology , Travel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,531
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
91
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer
  • 2. Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer
  • 3. Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer
  • 4. Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer
  • 5. Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer
  • 6. Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer
  • 7. Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer
  • 8. Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer
  • 9. Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer
  • 10. Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer
  • 11. Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer
  • 12. Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer
  • 13. Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer
  • 14. Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer
  • 15. Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer
  • 16. Responsive websites with Joomla 3 & BootstrapJoomla!Day Bosnia & Herzegovina - May 3, 2013Sander Potjer - @sanderpotjer
  • 17. 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
  • 18. http://www.slideshare.net/sanderpotjer/
  • 19. Code: http://sanderpotjer.github.io/jbr/
  • 20. Basic template installation
  • 21. Basic template installation
  • 22. Basic template installation
  • 23. Basic template installation
  • 24. Basic template installation
  • 25. Bootstrap & Joomla JUI
  • 26. Bootstrap & Joomla JUI
  • 27. Bootstrap & Joomla JUIJoomla User Interface (JUI) Library
  • 28. Bootstrap & Joomla JUI | index.php
  • 29. Bootstrap & Joomla JUI | index.php
  • 30. Bootstrap & Joomla JUI | index.php
  • 31. Bootstrap & Joomla JUI | index.php
  • 32. Modulepositions
  • 33. Modulepositions | index.php
  • 34. Modulepositions | index.php
  • 35. Modulepositions
  • 36. Bootstrap-size & Icons
  • 37. Bootstrap-size & Icons | index.php
  • 38. Bootstrap-size & Icons
  • 39. Bootstrap-size & Icons
  • 40. Bootstrap-size & Icons | index.php
  • 41. Bootstrap-size & Icons
  • 42. Bootstrap-size & Icons
  • 43. Bootstrap-size & Icons
  • 44. Bootstrap-size & Iconsjui.kyleledbetter.com
  • 45. Module override
  • 46. Module override
  • 47. Module-override | html/modules.php
  • 48. Module-override | html/modules.php
  • 49. Module-override | html/modules.php<div class=”span4”>
  • 50. Module-override | html/modules.php
  • 51. Module-override | html/modules.php<h3><span class=”icon-cube”></span>...</h3>
  • 52. Module-override | index.php
  • 53. Module-override | index.php
  • 54. Module-override | index.php
  • 55. Module-override
  • 56. Header-module
  • 57. Header-module
  • 58. Header-module
  • 59. Header-module
  • 60. Header-module
  • 61. Contact-module
  • 62. Contact-module | custom output
  • 63. Contact-module
  • 64. Contact-module | custom outputspan3
  • 65. Contact-module | custom outputspan3 span3
  • 66. Contact-module | custom outputspan3 span3 span6
  • 67. Contact-module | custom outputspan3 span3 span6
  • 68. Contact-module | custom outputspan4 span4 span4
  • 69. Contact-module
  • 70. Contact-module | custom output
  • 71. Contact-module
  • 72. Portfolio
  • 73. Portfolio
  • 74. Portfolio
  • 75. Portfolio
  • 76. Portfolio
  • 77. Portfolio
  • 78. Portfolio
  • 79. Portfolio
  • 80. Portfolio | html/com_weblinks/category/default.php
  • 81. Portfolio | html/com_weblinks/category/default.php
  • 82. Portfolio | html/com_weblinks/category/default.php
  • 83. Menu
  • 84. Menu
  • 85. Menu
  • 86. Menu
  • 87. Menu
  • 88. Menu | index.php
  • 89. Menu | index.php
  • 90. Menu | index.php
  • 91. Menu | index.php
  • 92. Menu | index.php
  • 93. ScrollSpy
  • 94. ScrollSpy
  • 95. ScrollSpy
  • 96. ScrollSpy | index.php
  • 97. ScrollSpy | index.php
  • 98. ScrollSpy | index.php
  • 99. ScrollSpy
  • 100. Finishing touch
  • 101. Finishing touch | css/template.css
  • 102. And here we are...
  • 103. Responsive?
  • 104. Responsive!
  • 105. Responsive!
  • 106. Responsive!
  • 107. Responsive!
  • 108. Live demo:http://jbr.sanderpotjer.nl
  • 109. 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