Responsive websites with Joomla 3 & Bootstrap #jd13ba

  • 2,456 views
Uploaded on

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!

More 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,456
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
89
Comments
0
Likes
4

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