1. Responsive websites met Joomla 3 & Bootstrap
Joomla!Dagen Nederland, 21 april 2013
Sander Potjer - @sanderpotjer

2. Responsive websites met Joomla 3 & Bootstrap
Joomla!Dagen Nederland, 21 april 2013
Sander Potjer - @sanderpotjer

3. Responsive websites met Joomla 3 & Bootstrap
Joomla!Dagen Nederland, 21 april 2013
Sander Potjer - @sanderpotjer

4. Responsive websites met Joomla 3 & Bootstrap
Joomla!Dagen Nederland, 21 april 2013
Sander Potjer - @sanderpotjer

5. Responsive websites met Joomla 3 & Bootstrap
Joomla!Dagen Nederland, 21 april 2013
Sander Potjer - @sanderpotjer

6. Responsive websites met Joomla 3 & Bootstrap
Joomla!Dagen Nederland, 21 april 2013
Sander Potjer - @sanderpotjer

7. Responsive websites met Joomla 3 & Bootstrap
Joomla!Dagen Nederland, 21 april 2013
Sander Potjer - @sanderpotjer

8. Responsive websites met Joomla 3 & Bootstrap
Joomla!Dagen Nederland, 21 april 2013
Sander Potjer - @sanderpotjer

9. Responsive websites met Joomla 3 & Bootstrap
Joomla!Dagen Nederland, 21 april 2013
Sander Potjer - @sanderpotjer

10. Responsive websites met Joomla 3 & Bootstrap
Joomla!Dagen Nederland, 21 april 2013
Sander Potjer - @sanderpotjer

11. Responsive websites met Joomla 3 & Bootstrap
Joomla!Dagen Nederland, 21 april 2013
Sander Potjer - @sanderpotjer

12. Responsive websites met Joomla 3 & Bootstrap
Joomla!Dagen Nederland, 21 april 2013
Sander Potjer - @sanderpotjer

13. Responsive websites met Joomla 3 & Bootstrap
Joomla!Dagen Nederland, 21 april 2013
Sander Potjer - @sanderpotjer

14. Responsive websites met Joomla 3 & Bootstrap
Joomla!Dagen Nederland, 21 april 2013
Sander Potjer - @sanderpotjer

15. Responsive websites met Joomla 3 & Bootstrap
Joomla!Dagen Nederland, 21 april 2013
Sander Potjer - @sanderpotjer

16. Responsive websites met Joomla 3 & Bootstrap
Joomla!Dagen Nederland, 21 april 2013
Sander Potjer - @sanderpotjer

17. Responsive websites met Joomla 3 & Bootstrap
Joomla!Dagen Nederland, 21 april 2013
Sander Potjer - @sanderpotjer
ACL Manager
JoomlaCommunity.eu
Sander Potjer Webdevelopment
Joomla!Dagen Nederland
Joomla Community Leadership member
Joomla gebruikersgroepen
Stichting Sympathy

18. http://www.slideshare.net/sanderpotjer/

19. Webdesigner Joomla-special 2013, p27-p31
Code: http://sanderpotjer.github.io/jbr/

21. Basis template installeren

22. Basis template installeren

23. Basis template installeren

24. Basis template installeren

25. Basis template installeren

26. Bootstrap en Joomla JUI

27. Bootstrap en Joomla JUI

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

29. Bootstrap en Joomla JUI | index.php

30. Bootstrap en Joomla JUI | index.php

31. Bootstrap en Joomla JUI | index.php

32. Bootstrap en Joomla JUI | index.php

33. Moduleposities

34. Moduleposities | index.php

35. Moduleposities | index.php

36. Moduleposities

37. Bootstrap-grootte en iconen

38. Moduleposities

39. Bootstrap-grootte en iconen | index.php

40. Bootstrap-grootte en iconen

41. Bootstrap-grootte en iconen | index.php

42. Bootstrap-grootte en iconen

43. Bootstrap-grootte en iconen

44. Module-override maken

45. Module-override maken | html/modules.php

46. Module-override maken | html/modules.php

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

48. Module-override maken | html/modules.php

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

50. Module-override maken | index.php

51. Module-override maken | index.php

52. Module-override maken

53. Header-module

54. Header-module

55. Header-module

56. Header-module | aangepaste uitvoer

57. Header-module

58. Contact-module

59. Contact-module | aangepaste uitvoer

60. Contact-module

61. Contact-module | aangepaste uitvoer
span3

62. Contact-module | aangepaste uitvoer
span3 span3

63. Contact-module | aangepaste uitvoer
span3 span3 span6

64. Contact-module | aangepaste uitvoer
span3 span3 span6

65. Contact-module | aangepaste uitvoer
span4 span4 span4

66. Contact-module | aangepaste uitvoer

67. Contact-module

68. Contact-module

69. Portfolio

70. Portfolio

71. Portfolio

72. Portfolio

73. Portfolio

74. Portfolio

75. Portfolio

76. Portfolio

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

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

79. Navigatie

80. Navigatie

81. Navigatie

82. Navigatie

83. Navigatie

84. Navigatie | index.php

85. Navigatie | index.php

86. Navigatie | index.php

87. Navigatie | index.php

88. ScrollSpy

89. ScrollSpy

90. ScrollSpy

91. ScrollSpy | index.php

92. ScrollSpy | index.php

93. ScrollSpy

94. Puntjes op de i

95. Puntjes op de i | css/template.css

96. Tadaaa...

98. Responsive?

99. Responsive!

100. Responsive!

101. Responsive!

102. Responsive!

103. Meer informatie
Bootstrap:
http://www.getbootstrap.com
Joomla JUI & Icons:
http://jui.kyleledbetter.com
Workshop code:
http://sanderpotjer.github.io/jbr/
Boek(je)-tip:
http://www.packtpub.com/twitter-bootstrap-web-development/book
Bootstrap styles voor JCE editor:
http://www.deweso.com/home/137-blog-international/154-making-better-use-
of-bootstrap-with-the-jce-editor-css-download.html