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

•

5 gefällt mir•3,115 views

Sander Potjer

Create your own responsive website with Joomla 3 & Bootstrap.

Technologie

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

Weitere ähnliche Inhalte

Was ist angesagt?

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

Was ist angesagt? (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

Andere mochten auch

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

Andere mochten auch (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

Ähnlich wie 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

Ähnlich wie 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

Mehr von 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

Mehr von 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

Kürzlich hochgeladen

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

How to convert PDF to text with Nanonetsnaman860154

Presentation on how to chat with PDF using ChatGPT code interpreternaman860154

Partners Life - Insurer Innovation Award 2024The Digital Insurer

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

Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...gurkirankumar98700

The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung

WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal

A Domino Admins Adventures (Engage 2024)Gabriella Davis

08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls

Automating Google Workspace (GWS) & more with Apps Scriptwesley chun

How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes

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

Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko

Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik

Salesforce Community Group Quito, Salesforce 101Paola De la Torre

08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls

08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls

🐬 The future of MySQL is Postgres 🐘RTylerCroy

Kürzlich hochgeladen (20)

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

How to convert PDF to text with Nanonets

Presentation on how to chat with PDF using ChatGPT code interpreter

Partners Life - Insurer Innovation Award 2024

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

Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...

The Codex of Business Writing Software for Real-World Solutions 2.pptx

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...

WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service

A Domino Admins Adventures (Engage 2024)

08448380779 Call Girls In Civil Lines Women Seeking Men

Automating Google Workspace (GWS) & more with Apps Script

How to Troubleshoot Apps for the Modern Connected Worker

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

Handwritten Text Recognition for manuscripts and early printed texts

Injustice - Developers Among Us (SciFiDevCon 2024)

Salesforce Community Group Quito, Salesforce 101

08448380779 Call Girls In Diplomatic Enclave Women Seeking Men

08448380779 Call Girls In Friends Colony Women Seeking Men

🐬 The future of MySQL is Postgres 🐘

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