Responsive websites with Joomla 3 & Bootstrap - Joomla!Day UK 2013

•

5 gostaram•3,115 visualizações

Sander Potjer

Create your own responsive website with Joomla 3 & Bootstrap.

Tecnologia

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

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

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

Bootstrap & Joomla JUI
Joomla User Interface (JUI) Library

Bootstrap-size & Icons
jui.kyleledbetter.com

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

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

Contact-module | custom output
span3 span3

Contact-module | custom output
span3 span3 span6

Contact-module | custom output
span4 span4 span4

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

Portfolio | html/com_weblinks/category/default.php

Mais conteúdo relacionado

Mais procurados

Social ao thun dong phuc KabutoÁo thun đồng phục Kabuto

Fest Event Brochure | Swaroopmm College Fest Event Brochure, 2017 Gopal Saw

Gạch Ốp TườngThGiiGchLtSn

Digital Marketing Training Bangalore. PPT - Digital Marketing from Start up's...Web Marketing Academy. Digital Marketing Training Bangalore

Digital Marketing Careers in Bangalore, How Suresh changed his Career from Ch...Web Marketing Academy. Digital Marketing Training Bangalore

Social List chillnen

Photo sharing sites- 1 Umar Ali

Top cheapest countries to study abroadStudyCountry

Blogger build by k.mookoyoThanakrid Teapatarapanya

Top Social Media BlogsAIRR Media

Week of September 2-6Vanessa M. Valle

Twitter: Sharing Knowledge EmpowersSandy Kendell

ふくいItフォーラム(2011.11.20：５分でわかるソーシャルメディア＆Facebook＆Twitter活用事例)Akihiro Nishimura

Untold Secrets to Develop Referrals Part 1Danny Foo

Never build a login again - The art of using social Auth using DjangoNikunj Thakkar

Social của Cà Phê Ông BiCà Phê Ông Bi

1.2 social media overviewifrcsm4resworkshop

Mais procurados (17)

Social ao thun dong phuc Kabuto

Fest Event Brochure | Swaroopmm College Fest Event Brochure, 2017

Gạch Ốp Tường

Digital Marketing Training Bangalore. PPT - Digital Marketing from Start up's...

Digital Marketing Careers in Bangalore, How Suresh changed his Career from Ch...

Social List

Photo sharing sites- 1

Top cheapest countries to study abroad

Blogger build by k.mookoyo

Top Social Media Blogs

Week of September 2-6

Twitter: Sharing Knowledge Empowers

ふくいItフォーラム(2011.11.20：５分でわかるソーシャルメディア＆Facebook＆Twitter活用事例)

Untold Secrets to Develop Referrals Part 1

Never build a login again - The art of using social Auth using Django

Social của Cà Phê Ông Bi

1.2 social media overview

Destaque

Bootstrap [part 2]Ghanshyam Patel

Responsive Design - Planning, Execution, Management with Bootstrap 3Eric Carlisle

BootstrapJadson Santos

Building a Moodle theme with bootstrapBas Brands

Desenvolvimento Front end (AngularJS e Bootstrap)Julian Cesar

Refreshing Your UI with HTML5, Bootstrap and CSS3Matt Raible

Introduce Bootstrap 3 to Develop Responsive Design ApplicationeXo Platform

Responsive web-design through bootstrapZunair Sagitarioux

Bootstrap pptIshtdeep Hora

BootstrapFajar Baskoro

Introduction to BootstrapRon Reiter

Destaque (11)

Bootstrap [part 2]

Responsive Design - Planning, Execution, Management with Bootstrap 3

Bootstrap

Building a Moodle theme with bootstrap

Desenvolvimento Front end (AngularJS e Bootstrap)

Refreshing Your UI with HTML5, Bootstrap and CSS3

Introduce Bootstrap 3 to Develop Responsive Design Application

Responsive web-design through bootstrap

Bootstrap ppt

Bootstrap

Introduction to Bootstrap

Semelhante a Responsive websites with Joomla 3 & Bootstrap - Joomla!Day UK 2013

My Joomla Story - Joomla!Day UK 2013Sander Potjer

Joomla! Template with Bootstrap 3 - Joomla!Day Spain 2013 Saurabh Shah

My Joomla Story - JoomlaDay Bosnia & Herzegovina 2013Sander Potjer

WordPress Theme Selection Field GuideGloria Antonelli

7 ingredients to search engine optimisation (SEO) for JoomlaPeter Bui

My Joomla Story - JoomlaDay The Netherlands 2013Sander Potjer

My Joomla Story - Joomla!Day Switzerland 2013Sander Potjer

Web2.0 LINKSDaniele Pauletto

10 tips to improve Joomla’s usabilitySander Potjer

Joomla! Volunteers Portal @ Joomla World Conference 2013Sander Potjer

Working Differently Blogging for Education and MarketingAnne Adrian

How to Contribute in Joomla! Community - Joomla!Day Bangkok 2013Saurabh Shah

Semelhante a Responsive websites with Joomla 3 & Bootstrap - Joomla!Day UK 2013 (12)

My Joomla Story - Joomla!Day UK 2013

Joomla! Template with Bootstrap 3 - Joomla!Day Spain 2013

My Joomla Story - JoomlaDay Bosnia & Herzegovina 2013

WordPress Theme Selection Field Guide

7 ingredients to search engine optimisation (SEO) for Joomla

My Joomla Story - JoomlaDay The Netherlands 2013

My Joomla Story - Joomla!Day Switzerland 2013

Web2.0 LINKS

10 tips to improve Joomla’s usability

Joomla! Volunteers Portal @ Joomla World Conference 2013

Working Differently Blogging for Education and Marketing

How to Contribute in Joomla! Community - Joomla!Day Bangkok 2013

Mais de Sander Potjer

Daarom Joomla! - Makkelijk content publicerenSander Potjer

Daarom Joomla! - Inspiratie uit de praktijkSander Potjer

Daarom Joomla! - Een fantastische basisSander Potjer

Performance budget @ Joomla! Performance Expert SessieSander Potjer

Technieken & tools @ Joomla! Performance Expert SessieSander Potjer

CDN @ Joomla! Performance Expert SessieSander Potjer

Proxy caching @ Joomla! Performance Expert SessieSander Potjer

Server performance @ Joomla! Performance Expert SessieSander Potjer

.htaccess performance @ Joomla! Performance Expert SessieSander Potjer

Google AMP @ Joomla! Performance Expert SessieSander Potjer

Optimaliseer afbeeldingen @ Joomla! Performance Expert SessieSander Potjer

Optimalisatie plugins @ Joomla! Performance Expert SessieSander Potjer

Cache handlers @ Joomla! Performance Expert SessieSander Potjer

Performance & Joomla! core @ Joomla! Performance Expert SessieSander Potjer

Joomla! First - JoomlaDagen 2017 #jd17nlSander Potjer

Complexe pagina's gebruiksvriendelijk (Joomla Page Builders)Sander Potjer

Performance & SEO - Joomla SEO Expert SessieSander Potjer

Social Media & SEO - Joomla SEO Expert SessieSander Potjer

Joomla 3.6: nieuwe router - Joomla SEO Expert SessieSander Potjer

SEO Audit - Joomla SEO Expert SessieSander Potjer

Mais de Sander Potjer (20)

Daarom Joomla! - Makkelijk content publiceren

Daarom Joomla! - Inspiratie uit de praktijk

Daarom Joomla! - Een fantastische basis

Performance budget @ Joomla! Performance Expert Sessie

Technieken & tools @ Joomla! Performance Expert Sessie

CDN @ Joomla! Performance Expert Sessie

Proxy caching @ Joomla! Performance Expert Sessie

Server performance @ Joomla! Performance Expert Sessie

.htaccess performance @ Joomla! Performance Expert Sessie

Google AMP @ Joomla! Performance Expert Sessie

Optimaliseer afbeeldingen @ Joomla! Performance Expert Sessie

Optimalisatie plugins @ Joomla! Performance Expert Sessie

Cache handlers @ Joomla! Performance Expert Sessie

Performance & Joomla! core @ Joomla! Performance Expert Sessie

Joomla! First - JoomlaDagen 2017 #jd17nl

Complexe pagina's gebruiksvriendelijk (Joomla Page Builders)

Performance & SEO - Joomla SEO Expert Sessie

Social Media & SEO - Joomla SEO Expert Sessie

Joomla 3.6: nieuwe router - Joomla SEO Expert Sessie

SEO Audit - Joomla SEO Expert Sessie

Último

Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies

A Domino Admins Adventures (Engage 2024)Gabriella Davis

TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc

Real Time Object Detection Using Open CVKhem

Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia

Presentation on how to chat with PDF using ChatGPT code interpreternaman860154

08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls

A Call to Action for Generative AI in 2024Results

CNv6 Instructor Chapter 6 Quality of Servicegiselly40

Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun

Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2

The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge

Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1

Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko

Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays

Histor y of HAM Radio presentation slidevu2urc

04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG

The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los

IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge

Responsive websites with Joomla 3 & Bootstrap - Joomla!Day UK 2013

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/

20.

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

37.

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

59.

65.

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

73.

74. Contact-module

75. Contact-module | custom output

76. Contact-module

77. Menu

78.

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

98.

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