Responsive websites with Joomla 3 & Bootstrap #jd13ba

  • Published on
    01-Dec-2014

  • View
    2.998

  • Download
    0

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!

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 JUGsStichting 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 50. Module-override | html/modules.php 51. Module-override | html/modules.php... 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