0
Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer
Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer
ACL Manager
...
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 JUI
Joomla 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 & Icons
jui.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 output
span3
Contact-module | custom output
span3 span3
Contact-module | custom output
span3 span3 span6
Contact-module | custom output
span3 span3 span6
Contact-module | custom output
span4 span4 span4
Contact-module
Contact-module | custom output
Contact-module
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 information
Bootstrap:
http://www.getbootstrap.com/2.3.2/
Joomla JUI & Icons:
http://jui.kyleledbetter.com
Workshop c...
Bonus
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
Responsive websites with Joomla 3 & Bootstrap - Joomla!Day UK 2013
Responsive websites with Joomla 3 & Bootstrap - Joomla!Day UK 2013
Responsive websites with Joomla 3 & Bootstrap - Joomla!Day UK 2013
Responsive websites with Joomla 3 & Bootstrap - Joomla!Day UK 2013
Responsive websites with Joomla 3 & Bootstrap - Joomla!Day UK 2013
Responsive websites with Joomla 3 & Bootstrap - Joomla!Day UK 2013
Responsive websites with Joomla 3 & Bootstrap - Joomla!Day UK 2013
Upcoming SlideShare
Loading in...5
×

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

2,206

Published on

Create your own responsive website with Joomla 3 & Bootstrap.

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,206
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
107
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

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

  1. 1. Responsive websites with Joomla 3 & Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer
  2. 2. Responsive websites with Joomla 3 & Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer
  3. 3. Responsive websites with Joomla 3 & Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer
  4. 4. Responsive websites with Joomla 3 & Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer
  5. 5. Responsive websites with Joomla 3 & Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer
  6. 6. Responsive websites with Joomla 3 & Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer
  7. 7. Responsive websites with Joomla 3 & Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer
  8. 8. Responsive websites with Joomla 3 & Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer
  9. 9. Responsive websites with Joomla 3 & Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer
  10. 10. Responsive websites with Joomla 3 & Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer
  11. 11. Responsive websites with Joomla 3 & Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer
  12. 12. Responsive websites with Joomla 3 & Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer
  13. 13. Responsive websites with Joomla 3 & Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer
  14. 14. Responsive websites with Joomla 3 & Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer
  15. 15. Responsive websites with Joomla 3 & Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer
  16. 16. Responsive websites with Joomla 3 & Bootstrap Joomla!Day UK - October 6th, 2013 Sander Potjer - @sanderpotjer
  17. 17. Responsive websites with Joomla 3 & 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 JUG’s Stichting 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 JUI Joomla 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 & Icons jui.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 output span3
  65. 65. Contact-module | custom output span3 span3
  66. 66. Contact-module | custom output span3 span3 span6
  67. 67. Contact-module | custom output span3 span3 span6
  68. 68. Contact-module | custom output span4 span4 span4
  69. 69. Contact-module
  70. 70. Contact-module | custom output
  71. 71. Contact-module
  72. 72. Menu
  73. 73. Menu
  74. 74. Menu
  75. 75. Menu
  76. 76. Menu
  77. 77. Menu | index.php
  78. 78. Menu | index.php
  79. 79. Menu | index.php
  80. 80. Menu | index.php
  81. 81. Menu | index.php
  82. 82. ScrollSpy
  83. 83. ScrollSpy
  84. 84. ScrollSpy
  85. 85. ScrollSpy | index.php
  86. 86. ScrollSpy | index.php
  87. 87. ScrollSpy | index.php
  88. 88. ScrollSpy
  89. 89. Finishing touch
  90. 90. Finishing touch | css/template.css
  91. 91. And here we are...
  92. 92. Responsive?
  93. 93. Responsive!
  94. 94. Responsive!
  95. 95. Responsive!
  96. 96. Responsive!
  97. 97. Live demo: http://jbr.sanderpotjer.nl
  98. 98. More information Bootstrap: http://www.getbootstrap.com/2.3.2/ Joomla JUI & 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. 99. Bonus
  100. 100. Portfolio
  101. 101. Portfolio
  102. 102. Portfolio
  103. 103. Portfolio
  104. 104. Portfolio
  105. 105. Portfolio
  106. 106. Portfolio
  107. 107. Portfolio
  108. 108. Portfolio | html/com_weblinks/category/default.php
  109. 109. Portfolio | html/com_weblinks/category/default.php
  110. 110. Portfolio | html/com_weblinks/category/default.php
  1. A particular slide catching your eye?

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

×