Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
×

7

Share

Download to read offline

Responsive websites with Joomla 3 & Bootstrap #jd13ba

Download to read offline

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!

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
  • naser_therock

    Dec. 28, 2016
  • yuhrenhuang

    Feb. 13, 2015
  • jacquesdsilva

    Jan. 24, 2015
  • fugadigital

    Nov. 13, 2013
  • frclasso

    May. 17, 2013
  • sergeymo

    May. 7, 2013
  • viocassel

    May. 7, 2013

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!

Views

Total views

4,396

On Slideshare

0

From embeds

0

Number of embeds

331

Actions

Downloads

176

Shares

0

Comments

0

Likes

7

×