Create your own responsive website with Joomla 3 & Bootstrap.

1. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer

2. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer

3. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer

4. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer

5. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer

6. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer

7. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer

8. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer

9. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer

10. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer

11. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer

12. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer

13. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer

14. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer

15. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer

16. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day UK - October 6th, 2013
Sander Potjer - @sanderpotjer

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. http://www.slideshare.net/sanderpotjer/

19. Code: http://sanderpotjer.github.io/jbr/

21. Basic template installation

22. Basic template installation

23. Basic template installation

24. Basic template installation

25. Basic template installation

26. Bootstrap & Joomla JUI

27. Bootstrap & Joomla JUI

28. Bootstrap & Joomla JUI
Joomla User Interface (JUI) Library

29. Bootstrap & Joomla JUI | index.php

30. Bootstrap & Joomla JUI | index.php

31. Bootstrap & Joomla JUI | index.php

32. Bootstrap & Joomla JUI | index.php

33. Modulepositions

34. Modulepositions | index.php

35. Modulepositions | index.php

36. Modulepositions

38. Bootstrap-size & Icons

39. Bootstrap-size & Icons | index.php

40. Bootstrap-size & Icons

41. Bootstrap-size & Icons

42. Bootstrap-size & Icons | index.php

43. Bootstrap-size & Icons

44. Bootstrap-size & Icons

45. Bootstrap-size & Icons

46. Bootstrap-size & Icons
jui.kyleledbetter.com

47. Module override

48. Module-override

49. Module-override | html/modules.php

50. Module-override | html/modules.php

51. Module-override | html/modules.php
<div class=”span4”>

52. Module-override | html/modules.php

53. Module-override | html/modules.php
<h3><span class=”icon-cube”></span>...</h3>

54. Module-override | index.php

55. Module-override | index.php

56. Module-override | index.php

57. Module-override

58. Header-module

60. Header-module

61. Header-module

62. Header-module

63. Header-module

64. Contact-module

66. Contact-module | custom output

67. Contact-module

68. Contact-module | custom output
span3

69. Contact-module | custom output
span3 span3

70. Contact-module | custom output
span3 span3 span6

71. Contact-module | custom output
span3 span3 span6

72. Contact-module | custom output
span4 span4 span4

74. Contact-module

75. Contact-module | custom output

76. Contact-module

77. Menu

79. Menu

80. Menu

81. Menu

82. Menu

83. Menu | index.php

84. Menu | index.php

85. Menu | index.php

86. Menu | index.php

87. Menu | index.php

88. ScrollSpy

89. ScrollSpy

90. ScrollSpy

91. ScrollSpy | index.php

92. ScrollSpy | index.php

93. ScrollSpy | index.php

94. ScrollSpy

95. Finishing touch

96. Finishing touch | css/template.css

97. And here we are...

99. Responsive?

100. Responsive!

101. Responsive!

102. Responsive!

103. Responsive!

104. Live demo:
http://jbr.sanderpotjer.nl

105. 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

106. Bonus

107. Portfolio

108. Portfolio

109. Portfolio

110. Portfolio

111. Portfolio

112. Portfolio

113. Portfolio

114. Portfolio

115. Portfolio | html/com_weblinks/category/default.php

116. Portfolio | html/com_weblinks/category/default.php

117. Portfolio | html/com_weblinks/category/default.php