Responsive websites with Joomla 3 & Bootstrap #jd13ba

  • Published on
    01-Dec-2014

  • View
    2.998

  • Download
    0

Embed Size (px)

DESCRIPTION

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!

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 JUGsStichting 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
  • 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 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....