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!

1. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer

2. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer

3. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer

4. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer

5. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer

6. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer

7. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer

8. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer

9. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer

10. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer

11. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer

12. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer

13. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer

14. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer

15. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer

16. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer

17. Responsive websites with Joomla 3 & Bootstrap
Joomla!Day Bosnia & Herzegovina - May 3, 2013
Sander Potjer - @sanderpotjer
ACL Manager
JoomlaCommunity.eu
Sander Potjer Webdevelopment
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/

25. Basic template installation

26. Basic template installation

27. Basic template installation

28. Basic template installation

29. Basic template installation

30. Bootstrap & Joomla JUI

31. Bootstrap & Joomla JUI

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

33. Bootstrap & Joomla JUI | index.php

34. Bootstrap & Joomla JUI | index.php

35. Bootstrap & Joomla JUI | index.php

36. Bootstrap & Joomla JUI | index.php

37. Modulepositions

38. Modulepositions | index.php

39. Modulepositions | index.php

40. Modulepositions

42. Bootstrap-size & Icons

43. Bootstrap-size & Icons | index.php

44. Bootstrap-size & Icons

45. Bootstrap-size & Icons

46. Bootstrap-size & Icons | index.php

47. Bootstrap-size & Icons

48. Bootstrap-size & Icons

49. Bootstrap-size & Icons

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

51. Module override

52. Module override

53. Module-override | html/modules.php

54. Module-override | html/modules.php

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

56. Module-override | html/modules.php

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

58. Module-override | index.php

59. Module-override | index.php

60. Module-override | index.php

61. Module-override

62. Header-module

64. Header-module

65. Header-module

66. Header-module

67. Header-module

68. Contact-module

70. Contact-module | custom output

71. Contact-module

72. Contact-module | custom output
span3

73. Contact-module | custom output
span3 span3

74. Contact-module | custom output
span3 span3 span6

75. Contact-module | custom output
span3 span3 span6

76. Contact-module | custom output
span4 span4 span4

78. Contact-module

79. Contact-module | custom output

80. Contact-module

81. Portfolio

82. Portfolio

83. Portfolio

84. Portfolio

85. Portfolio

86. Portfolio

87. Portfolio

88. Portfolio

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

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

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

92. Menu

94. Menu

95. Menu

96. Menu

97. Menu

98. Menu | index.php

99. Menu | index.php

100. Menu | index.php

101. Menu | index.php

102. Menu | index.php

103. ScrollSpy

104. ScrollSpy

105. ScrollSpy

106. ScrollSpy | index.php

107. ScrollSpy | index.php

108. ScrollSpy | index.php

109. ScrollSpy

110. Finishing touch

111. Finishing touch | css/template.css

112. And here we are...

114. Responsive?

115. Responsive!

116. Responsive!

117. Responsive!

118. Responsive!

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

120. More information
Bootstrap:
http://www.getbootstrap.com
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