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

•

5 recomendaciones•3,115 vistas

Sander Potjer

Create your own responsive website with Joomla 3 & Bootstrap.

Tecnología

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

Más contenido relacionado

La actualidad más candente

Social ao thun dong phuc Kabuto

Áo thun đồng phục Kabuto

This is a fest event Brochure of Swaroopmm,2017. This brochure has been uploaded to help you in term of getting knowledge of design, events and others. Apart from this, I'm a Mechanical Engineer as well as a Graphic Designer. So, You can follow me for more PPT about design and mechanical related topics. Complete Details will be available soon on my website. Other Important Profile Links: Known as: Technocrat Sawji Share, Support, Subscribe!!! Subscribe: https://goo.gl/wD36yk Youtube: https://www.youtube.com/TechnocratSawji Facebook: https://www.facebook.com/TechnocratSawji Instagram: https://www.instagram.com/TechnocratSawji Telegram: https://telegram.me/TechnocratSawji Twitter: https://twitter.com/TechnocratSawji Stay Connect With Gopal Saw: Facebook: https://www.facebook.com/GopalSawji Instagram: https://www.instagram.com/GopalSawji Twitter: https://twitter.com/GopalSawji

Fest Event Brochure | Swaroopmm College Fest Event Brochure, 2017

Gopal Saw

Gạch Ốp Tường

ThGiiGchLtSn

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 abroad

StudyCountry

Blogger build by k.mookoyo

Thanakrid Teapatarapanya

Top Social Media Blogs

AIRR Media

Week of September 2-6

Vanessa M. Valle

Twitter: Sharing Knowledge Empowers

Sandy Kendell

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

Akihiro Nishimura

Untold Secrets to Develop Referrals Part 1

Danny Foo

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

Nikunj Thakkar

Social của Cà Phê Ông Bi

Cà Phê Ông Bi

1.2 social media overview

ifrcsm4resworkshop

La actualidad más candente (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

Destacado

Bootstrap [part 2]

Ghanshyam Patel

In only the last few years, Responsive Design patterns and paradigms have brought forth spectacular, sweeping changes in UI web production. The demands for device-compliance as well as the always-growing mobile market have made Responsive Design a necessity for many websites and web applications. While taking the Responsive approach may offer incredible opportunities, it also carries a gamut of challenges. This presentation will cover best practices for the planning, production, and management of Responsive websites. It will also serve as an introduction to Responsive website creation using the Bootstrap 3 framework. We will explore the mechanics of the Bootstrap grid and explore how it may be used to create robust, flexible Responsive layouts. Topics central to the presentation include mobile-first production, content focus, site maintainability and performance.

Responsive Design - Planning, Execution, Management with Bootstrap 3

Eric Carlisle

Bootstrap

Jadson Santos

Building a Moodle theme with bootstrap

Bas Brands

Desenvolvimento Front end (AngularJS e Bootstrap)

Julian Cesar

Many startups and open source projects have the luxury of starting greenfield projects. Unfortunately, the corporate world rarely works this way. It's more maintenance coding and a few new features every now and then. This session covers how you can use three of the hottest technologies (HTML5, CSS3 and Bootstrap) to spruce up a legacy application. It describes a real-world situation where a redesign was implemented in a few short weeks, making an old site look brand new. It also does a deep dive into Bootstrap, explains LESS, and shows pitfalls with older browsers. After this session, you'll be motivated to integrate Bootstrap into your applications and turn that legacy UI into something sexy! See blog post about this presentation at http://raibledesigns.com/rd/entry/my_bootstrap_presentation_from_html5.

Refreshing Your UI with HTML5, Bootstrap and CSS3

Matt Raible

www.exoplatform.com - The second session of "eXoers on the grill" presentation in Vietnam. After a very good start last month about the Git Rebase Functionality presented by Trong from the Portal team the subject of this session was the Responsive Design. This presentation was prepared and presented by all members of UI Team: Giang, Hoa, Trung and Thibault. eXoers on the Grill aims to provide some incentive & fresh air for our staff in order to constantly re-think our methods, spread good practices, promote some technology or tools, generate ideas, etc... All the teams are invited to contribute by picking up some hot topics of their choice and spread to other teams.

Introduce Bootstrap 3 to Develop Responsive Design Application

eXo Platform

Responsive web-design through bootstrap

Zunair Sagitarioux

Bootstrap ppt

Ishtdeep Hora

Bootstrap

Fajar Baskoro

Introduction to Bootstrap

Ron Reiter

Destacado (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

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

My Joomla Story - Joomla!Day UK 2013

Sander Potjer

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

Saurabh Shah

My Joomla Story - JoomlaDay Bosnia & Herzegovina 2013

Sander Potjer

The WordPress Theme Selection Field Guide includes helpful tips for business owners and web designers on how to pick the best theme for their needs. Learn theme evaluation processes, WordPress best practices and workflow strategies. This guide also includes a list of essential skills, the community, and upcoming WordPress developer trends all to make your journey a more pleasant experience. Presented at the Milwaukee WordCamp 2013.

WordPress Theme Selection Field Guide

Gloria Antonelli

7 ingredients to search engine optimisation (SEO) for Joomla

Peter Bui

My Joomla Story - JoomlaDay The Netherlands 2013

Sander Potjer

My Joomla Story - Joomla!Day Switzerland 2013

Sander Potjer

Web2.0 LINKS

Daniele Pauletto

oomla is very flexible and has many possibilities. A disadvantage is that working with Joomla can look complex because there are so many choices of settings and navigation to make. For a Joomla specialist that is often not a problem, but for many end users of a Joomla website it can be a stumbling block. However, with a little effort you can make a website more user-friendly for the end user. In this presentation Sander will share 10 tips, from easy to more complex ones, to improve the usability of your Joomla website. And as a bonus a practical example that you can use in your own projects.

10 tips to improve Joomla’s usability

Sander Potjer

Joomla! Volunteers Portal @ Joomla World Conference 2013

Sander Potjer

Working Differently Blogging for Education and Marketing

Anne Adrian

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

Saurabh Shah

Similar 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

Más de Sander Potjer

Daarom Joomla! - Makkelijk content publiceren

Sander Potjer

Daarom Joomla! - Inspiratie uit de praktijk

Sander Potjer

Daarom Joomla! - Een fantastische basis

Sander Potjer

Performance budget @ Joomla! Performance Expert Sessie

Sander Potjer

Technieken & tools @ Joomla! Performance Expert Sessie

Sander Potjer

CDN @ Joomla! Performance Expert Sessie

Sander Potjer

Proxy caching @ Joomla! Performance Expert Sessie

Sander Potjer

Server performance @ Joomla! Performance Expert Sessie

Sander Potjer

.htaccess performance @ Joomla! Performance Expert Sessie

Sander Potjer

Google AMP @ Joomla! Performance Expert Sessie

Sander Potjer

Optimaliseer afbeeldingen @ Joomla! Performance Expert Sessie

Sander Potjer

Optimalisatie plugins @ Joomla! Performance Expert Sessie

Sander Potjer

Cache handlers @ Joomla! Performance Expert Sessie

Sander Potjer

Performance & Joomla! core @ Joomla! Performance Expert Sessie

Sander Potjer

Joomla! First - JoomlaDagen 2017 #jd17nl

Sander Potjer

Complexe pagina’s gebruiksvriendelijk? Dat klinkt als een vreemde combinatie! Heb jij ook wel eens een pagina gebouwd voor een klant bestaande uit meerdere kolommen en rijen, tabs, embedded-video, afbeeldingen met lightbox effect etc… ? Vaak wordt dit opgelost door meerdere extensies in te zetten en aan elkaar te knopen. Maar kon de klant daarna nog eenvoudig aanpassingen maken zonder de pagina om zeep te helpen of naar 10 verschillende pagina’s in het beheer te gaan? En hoe zag die pagina eruit in de zoekresultaten van de site? Met Perfect Content Builder kan je zulke pagina’s opbouwen terwijl ze toch nog op een gebruiksvriendelijke manier voor je klant te bewerken zijn. In deze presentatie laten we zien hoe deze extensie het werken aan de site voor jou en je klant eenvoudig maakt!

Complexe pagina's gebruiksvriendelijk (Joomla Page Builders)

Sander Potjer

Performance & SEO - Joomla SEO Expert Sessie

Sander Potjer

Social Media & SEO - Joomla SEO Expert Sessie

Sander Potjer

Joomla 3.6: nieuwe router - Joomla SEO Expert Sessie

Sander Potjer

SEO Audit - Joomla SEO Expert Sessie

Sander Potjer

Más 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

BooK Now Call us at +918448380779 to hire a gorgeous and seductive call girl for sex. Take a Delhi Escort Service. The help of our escort agency is mostly meant for men who want sexual Indian Escorts In Delhi NCR. It should be noted that any impersonator will get 100 attention from our Young Girls Escorts in Delhi. They will assume the position of reliable allies. VIP Call Girl With Original Photos Book Tonight +918448380779 Our Cheap Price 1 Hour not available 2 Hours 5000 Full Night 8000 TAG: Call Girls in Delhi, Noida, Gurgaon, Ghaziabad, Connaught Place, Greater Kailash Delhi, Lajpat Nagar Delhi, Mayur Vihar Delhi, Chanakyapuri Delhi, New Friends Colony Delhi, Majnu Ka Tilla, Karol Bagh, Malviya Nagar, Saket, Khan Market, Noida Sector 18, Noida Sector 76, Noida Sector 51, Gurgaon Mg Road, Iffco Chowk Gurgaon, Rajiv Chowk Gurgaon All Delhi Ncr Free Home Deliver

08448380779 Call Girls In Civil Lines Women Seeking Men

Delhi Call girls

Evaluating the top large language models.pdf

ChristopherTHyatt

08448380779 Call Girls In Greater Kailash - I Women Seeking Men

Delhi Call girls

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke

Product Anonymous

08448380779 Call Girls In Diplomatic Enclave Women Seeking Men

Delhi Call girls

What is a good lead in your organisation? Which leads are priority? What happens to leads? When sales and marketing give different answers to these questions, or perhaps aren't sure of the answers at all, frustrations build and opportunities are left on the table. Join us for an illuminating session with Cian McLoughlin, HubSpot Principal Customer Success Manager, as we look at that crucial piece of the customer journey in which leads are transferred from marketing to sales.

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

HampshireHUG

MySQL Webinar, presented on the 25th of April, 2024. Summary: MySQL solutions enable the deployment of diverse Database Architectures tailored to specific needs, including High Availability, Disaster Recovery, and Read Scale-Out. With MySQL Shell's AdminAPI, administrators can seamlessly set up, manage, and monitor these solutions, ensuring efficiency and ease of use in their administration. MySQL Router, on the other hand, provides transparent routing from the application traffic to the backend servers in the architectures, requiring minimal configuration. Completely built in-house and supported by Oracle, these solutions have been adopted by enterprises of all sizes for their business-critical applications. In this presentation, we'll delve into various database architecture solutions to help you choose the right one based on your business requirements. Focusing on technical details and the latest features to maximize the potential of these solutions.

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

Miguel Araújo

How to convert PDF to text with Nanonets

naman860154

2024: Domino Containers - The Next Step. News from the Domino Container commu...

Martijn de Jong

Tech Trends Report 2024 Future Today Institute.pdf

hans926745

Scaling API-first – The story of a global engineering organization

Radu Cotescu

A Domino Admins Adventures (Engage 2024)

Gabriella Davis

Sara Mae O’Brien Scott and Tatiana Baquero Cakici, Senior Consultants at Enterprise Knowledge (EK), presented “AI Fast Track to Search-Focused AI Solutions” at the Information Architecture Conference (IAC24) that took place on April 11, 2024 in Seattle, WA. In their presentation, O’Brien-Scott and Cakici focused on what Enterprise AI is, why it is important, and what it takes to empower organizations to get started on a search-based AI journey and stay on track. The presentation explored the complexities of enterprise search challenges and how IA principles can be leveraged to provide AI solutions through the use of a semantic layer. O’Brien-Scott and Cakici showcased a case study where a taxonomy, an ontology, and a knowledge graph were used to structure content at a healthcare workforce solutions organization, providing personalized content recommendations and increasing content findability. In this session, participants gained insights about the following: Most common types of AI categories and use cases; Recommended steps to design and implement taxonomies and ontologies, ensuring they evolve effectively and support the organization’s search objectives; Taxonomy and ontology design considerations and best practices; Real-world AI applications that illustrated the value of taxonomies, ontologies, and knowledge graphs; and Tools, roles, and skills to design and implement AI-powered search solutions.

IAC 2024 - IA Fast Track to Search Focused AI Solutions

Enterprise Knowledge

Building Digital Trust in a Digital Economy Veronica Tan, Director - Cyber Security Agency of Singapore Apidays Singapore 2024: Connecting Customers, Business and Technology (April 17 & 18, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

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

apidays

In an era where artificial intelligence (AI) stands at the forefront of business innovation, Information Architecture (IA) is at the core of functionality. See “There’s No AI Without IA” – (from 2016 but even more relevant today) Understanding and leveraging how Information Architecture (IA) supports AI synergies between knowledge engineering and prompt engineering is critical for senior leaders looking to successfully deploy AI for internal and externally facing knowledge processes. This webinar be a high-level overview of the methodologies that can elevate AI-driven knowledge processes supporting both employees and customers. Core Insights Include: Strategic Knowledge Engineering: Delve into how structuring AI's knowledge base is required to prevent hallucinations, enable contextual retrieval of accurate information. This will include discussion of gold standard libraries of use cases support testing various LLMs and structures and configurations of knowledge base. Precision in Prompt Engineering: Learn the art of crafting prompts that direct AI to deliver targeted, relevant responses, thereby optimizing customer experiences and business outcomes. Unified Approach for Enhanced AI Performance: Explore the intersection of knowledge and prompt engineering to develop AI systems that are not only more responsive but also aligned with overarching business strategies. Guiding Principles for Implementation: Equip yourself with best practices, ethical guidelines, and strategic considerations for embedding these technologies into your business ecosystem effectively. This webinar is designed to empower business and technology leaders with the knowledge to harness the full potential of AI, ensuring their organizations not only keep pace with digital transformation but lead the charge. Join us to map a roadmap to fully leverage Information Architecture (IA) and AI chart a course towards a future where AI is a key pillar of strategic innovation and business success.

EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx

Earley Information Science

GenCyber Cyber Security Day Presentation

Michael W. Hawkins

Enterprise Knowledge’s Urmi Majumder, Principal Data Architecture Consultant, and Fernando Aguilar Islas, Senior Data Science Consultant, presented "Driving Behavioral Change for Information Management through Data-Driven Green Strategy" on March 27, 2024 at Enterprise Data World (EDW) in Orlando, Florida. In this presentation, Urmi and Fernando discussed a case study describing how the information management division in a large supply chain organization drove user behavior change through awareness of the carbon footprint of their duplicated and near-duplicated content, identified via advanced data analytics. Check out their presentation to gain valuable perspectives on utilizing data-driven strategies to influence positive behavioral shifts and support sustainability initiatives within your organization. In this session, participants gained answers to the following questions: - What is a Green Information Management (IM) Strategy, and why should you have one? - How can Artificial Intelligence (AI) and Machine Learning (ML) support your Green IM Strategy through content deduplication? - How can an organization use insights into their data to influence employee behavior for IM? - How can you reap additional benefits from content reduction that go beyond Green IM?

Driving Behavioral Change for Information Management through Data-Driven Gree...

Enterprise Knowledge

As privacy and data protection regulations evolve rapidly, organizations operating in multiple jurisdictions face mounting challenges to ensure compliance and safeguard customer data. With state-specific privacy laws coming up in multiple states this year, it is essential to understand what their unique data protection regulations will require clearly. How will data privacy evolve in the US in 2024? How to stay compliant? Our panellists will guide you through the intricacies of these states' specific data privacy laws, clarifying complex legal frameworks and compliance requirements. This webinar will review: - The essential aspects of each state's privacy landscape and the latest updates - Common compliance challenges faced by organizations operating in multiple states and best practices to achieve regulatory adherence - Valuable insights into potential changes to existing regulations and prepare your organization for the evolving landscape

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

TrustArc

How to Troubleshoot Apps for the Modern Connected Worker

ThousandEyes

This presentations targets students or working professionals. You may know Google for search, YouTube, Android, Chrome, and Gmail, but did you know Google has many developer tools, platforms & APIs? This comprehensive yet still high-level overview outlines the most impactful tools for where to run your code, store & analyze your data. It will also inspire you as to what's possible. This talk is 50 minutes in length.

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

wesley chun

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