Responsive websites with Joomla 3 & Bootstrap - Joomla!Day UK 2013

  • Published on
    27-Jan-2015

  • View
    102

  • Download
    0

Embed Size (px)

DESCRIPTION

Create your own responsive website with Joomla 3 & Bootstrap.

Transcript

<ul><li> 1. Responsive websites with Joomla 3 &amp; Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer </li></ul> <p> 2. Responsive websites with Joomla 3 &amp; Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer 3. Responsive websites with Joomla 3 &amp; Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer 4. Responsive websites with Joomla 3 &amp; Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer 5. Responsive websites with Joomla 3 &amp; Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer 6. Responsive websites with Joomla 3 &amp; Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer 7. Responsive websites with Joomla 3 &amp; Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer 8. Responsive websites with Joomla 3 &amp; Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer 9. Responsive websites with Joomla 3 &amp; Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer 10. Responsive websites with Joomla 3 &amp; Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer 11. Responsive websites with Joomla 3 &amp; Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer 12. Responsive websites with Joomla 3 &amp; Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer 13. Responsive websites with Joomla 3 &amp; Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer 14. Responsive websites with Joomla 3 &amp; Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer 15. Responsive websites with Joomla 3 &amp; Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer 16. Responsive websites with Joomla 3 &amp; Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer 17. Responsive websites with Joomla 3 &amp; Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer ACL Manager JoomlaCommunity.eu Perfect Web Team Joomla!Days The Netherlands Joomla Community Leadership member Dutch JUGs Stichting 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 &amp; Joomla JUI 26. Bootstrap &amp; Joomla JUI 27. Bootstrap &amp; Joomla JUI Joomla User Interface (JUI) Library 28. Bootstrap &amp; Joomla JUI | index.php 29. Bootstrap &amp; Joomla JUI | index.php 30. Bootstrap &amp; Joomla JUI | index.php 31. Bootstrap &amp; Joomla JUI | index.php 32. Modulepositions 33. Modulepositions | index.php 34. Modulepositions | index.php 35. Modulepositions 36. Bootstrap-size &amp; Icons 37. Bootstrap-size &amp; Icons | index.php 38. Bootstrap-size &amp; Icons 39. Bootstrap-size &amp; Icons 40. Bootstrap-size &amp; Icons | index.php 41. Bootstrap-size &amp; Icons 42. Bootstrap-size &amp; Icons 43. Bootstrap-size &amp; Icons 44. Bootstrap-size &amp; Icons jui.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 </p> <div> 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 output span3 65. Contact-module | custom output span3 span3 66. Contact-module | custom output span3 span3 span6 67. Contact-module | custom output span3 span3 span6 68. Contact-module | custom output span4 span4 span4 69. Contact-module 70. Contact-module | custom output 71. Contact-module 72. Menu 73. Menu 74. Menu 75. Menu 76. Menu 77. Menu | index.php 78. Menu | index.php 79. Menu | index.php 80. Menu | index.php 81. Menu | index.php 82. ScrollSpy 83. ScrollSpy 84. ScrollSpy 85. ScrollSpy | index.php 86. ScrollSpy | index.php 87. ScrollSpy | index.php 88. ScrollSpy 89. Finishing touch 90. Finishing touch | css/template.css 91. And here we are... 92. Responsive? 93. Responsive! 94. Responsive! 95. Responsive! 96. Responsive! 97. Live demo: http://jbr.sanderpotjer.nl 98. More information Bootstrap: http://www.getbootstrap.com/2.3.2/ Joomla JUI &amp; Icons: http://jui.kyleledbetter.com Workshop code: http://sanderpotjer.github.io/jbr/ (small) Book suggestion: http://www.packtpub.com/twitter-bootstrap-web-development/book Bootstrap 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 99. Bonus 100. Portfolio 101. Portfolio 102. Portfolio 103. Portfolio 104. Portfolio 105. Portfolio 106. Portfolio 107. Portfolio 108. Portfolio | html/com_weblinks/category/default.php 109. Portfolio | html/com_weblinks/category/default.php 110. Portfolio | html/com_weblinks/category/default.php </div>