0
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 - @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...
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://s...
Responsive websites with Joomla 3 & Bootstrap #jd13ba
Responsive websites with Joomla 3 & Bootstrap #jd13ba
Responsive websites with Joomla 3 & Bootstrap #jd13ba
Responsive websites with Joomla 3 & Bootstrap #jd13ba
Responsive websites with Joomla 3 & Bootstrap #jd13ba
Responsive websites with Joomla 3 & Bootstrap #jd13ba
Responsive websites with Joomla 3 & Bootstrap #jd13ba
Responsive websites with Joomla 3 & Bootstrap #jd13ba
Responsive websites with Joomla 3 & Bootstrap #jd13ba
Responsive websites with Joomla 3 & Bootstrap #jd13ba
Responsive websites with Joomla 3 & Bootstrap #jd13ba
Upcoming SlideShare
Loading in...5
×

Responsive websites with Joomla 3 & Bootstrap #jd13ba

3,081

Published 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!

Published in: Technology, Travel
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,081
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
113
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Transcript of "Responsive websites with Joomla 3 & Bootstrap #jd13ba"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×