Responsive websites with Joomla 3 & Bootstrap #jd13ba

•

8 likes•4,443 views

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!

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

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

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

Portfolio | html/com_weblinks/category/default.php

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

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

Gạch Ốp Tường

ThGiiGchLtSn

Social List

chillnen

Photo sharing sites- 1

Umar Ali

Top Social Media Blogs

AIRR Media

Blogger build by k.mookoyoThanakrid Teapatarapanya

Top cheapest countries to study abroad

StudyCountry

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

Akihiro Nishimura

Untold Secrets to Develop Referrals Part 1Danny Foo

Twitter: Sharing Knowledge EmpowersSandy Kendell

Week of September 2-6Vanessa M. Valle

Bloggers Perspective

Tarun Chandel

Social của Cà Phê Ông Bi

Cà Phê Ông Bi

Twitter Presentation York

Mark Frydenberg

The 2012 employee_emancipation_all_stars

nzingha149

Social xuong may ao thun gia si kabuto

Xưởng may áo thun giá sỉ Kabuto

Joomla 3 installation and management guide

Singsys Pte Ltd

Infographic 6 steps to build a Joomla website

JoomlaShine

Want to build a Joomla! website on your own, but too afraid of tons of codes that you merely know of? Worry not! With JSN PowerAdmin and JSN Page Builder from JoomlaShine, everything has become easier than ever! All you have to do is typing your pure text, and click to select an appropriate method of display on your front page. No coding skills needed. Let's check out the 6 simple steps you have to build your own eye-catching Joomla site with the help of JSN PowerAdmin and JSN PageBuilder! Download JSN PageBuilder: http://www.joomlashine.com/joomla-extensions/jsn-pagebuilder-joomla-page-builder-extension.html

Joomla 3.4 Made Easy

JoomlaShine

Joomla 3.4 Made Easy - A perfect start for Joomla! novices. Updated with the latest Joomla version. Click here to download: http://www.joomlashine.com/download/free-download-joomla-made-easy.html For more information from JoomlaShine, just: - Visit our website at: www.joomlashine.com - Like our fan pages on FB: http://www.facebook.com/joomlashine - Follow us on Twitter: http://twitter.com/joomlashine

Joomla Explained - As Easy as 1, 2, 3

Rod Martin

Joomla 3.6 - The revolution in Joomla User Experience

JoomlaShine

What's hot

Twitter The Question

Jon Payne

Fest Event Brochure | Swaroopmm College Fest Event Brochure, 2017

Gopal Saw

Gạch Ốp Tường

ThGiiGchLtSn

Social List

chillnen

Photo sharing sites- 1

Umar Ali

Top Social Media Blogs

AIRR Media

Blogger build by k.mookoyoThanakrid Teapatarapanya

Top cheapest countries to study abroad

StudyCountry

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

Akihiro Nishimura

Untold Secrets to Develop Referrals Part 1Danny Foo

Twitter: Sharing Knowledge EmpowersSandy Kendell

Week of September 2-6Vanessa M. Valle

Bloggers Perspective

Tarun Chandel

Social của Cà Phê Ông Bi

Cà Phê Ông Bi

Twitter Presentation York

Mark Frydenberg

The 2012 employee_emancipation_all_stars

nzingha149

Social xuong may ao thun gia si kabuto

Xưởng may áo thun giá sỉ Kabuto

What's hot (17)

Twitter The Question

Fest Event Brochure | Swaroopmm College Fest Event Brochure, 2017

Gạch Ốp Tường

Social List

Photo sharing sites- 1

Top Social Media Blogs

Blogger build by k.mookoyo

Top cheapest countries to study abroad

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

Untold Secrets to Develop Referrals Part 1

Twitter: Sharing Knowledge Empowers

Week of September 2-6

Bloggers Perspective

Social của Cà Phê Ông Bi

Twitter Presentation York

The 2012 employee_emancipation_all_stars

Social xuong may ao thun gia si kabuto

Viewers also liked

Joomla 3 installation and management guide

Singsys Pte Ltd

Infographic 6 steps to build a Joomla website

JoomlaShine

Joomla 3.4 Made Easy

JoomlaShine

Joomla Explained - As Easy as 1, 2, 3

Rod Martin

Joomla 3.6 - The revolution in Joomla User Experience

JoomlaShine

Joomla CMS SEMINAR PPT

Pinky Mondal

Viewers also liked (6)

Joomla 3 installation and management guide

Infographic 6 steps to build a Joomla website

Joomla 3.4 Made Easy

Joomla Explained - As Easy as 1, 2, 3

Joomla 3.6 - The revolution in Joomla User Experience

Joomla CMS SEMINAR PPT

More from 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 (Joomla Page Builders)

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!

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

More from 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

Recently uploaded

State of ICS and IoT Cyber Threat Landscape Report 2024 preview

Prayukth K V

The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development. The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers: State of global ICS asset and network exposure Sectoral targets and attacks as well as the cost of ransom Global APT activity, AI usage, actor and tactic profiles, and implications Rise in volumes of AI-powered cyberattacks Major cyber events in 2024 Malware and malicious payload trends Cyberattack types and targets Vulnerability exploit attempts on CVEs Attacks on counties – USA Expansion of bot farms – how, where, and why In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East Why are attacks on smart factories rising? Cyber risk predictions Axis of attacks – Europe Systemic attacks in the Middle East Download the full report from here: https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/

Monitoring Java Application Security with JDK Tools and JFR Events

Ana-Maria Mihalceanu

SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf

Peter Spielvogel

Building better applications for business users with SAP Fiori. • What is SAP Fiori and why it matters to you • How a better user experience drives measurable business benefits • How to get started with SAP Fiori today • How SAP Fiori elements accelerates application development • How SAP Build Code includes SAP Fiori tools and other generative artificial intelligence capabilities • How SAP Fiori paves the way for using AI in SAP apps

FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf

FIDO Alliance

PCI PIN Basics Webinar from the Controlcase Team

ControlCase

PHP Frameworks: I want to break free (IPC Berlin 2024)

Ralf Eggert

In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development. This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.

FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf

FIDO Alliance

GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...

James Anderson

Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management. The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM). Speakers: Bob Boule Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle. Gopinath Rebala Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.

Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx

nkrafacyberclub

FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf

FIDO Alliance

When stars align: studies in data quality, knowledge graphs, and machine lear...

Elena Simperl

Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™

UiPathCommunity

In questo evento online gratuito, organizzato dalla Community Italiana di UiPath, potrai esplorare le nuove funzionalità di Autopilot, il tool che integra l'Intelligenza Artificiale nei processi di sviluppo e utilizzo delle Automazioni. 📕 Vedremo insieme alcuni esempi dell'utilizzo di Autopilot in diversi tool della Suite UiPath: Autopilot per Studio Web Autopilot per Studio Autopilot per Apps Clipboard AI GenAI applicata alla Document Understanding 👨‍🏫👨‍💻 Speakers: Stefano Negro, UiPath MVPx3, RPA Tech Lead @ BSP Consultant Flavio Martinelli, UiPath MVP 2023, Technical Account Manager @UiPath Andrei Tasca, RPA Solutions Team Lead @NTT Data

DevOps and Testing slides at DASA Connect

Kari Kakkonen

Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...

UiPathCommunity

💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™: See how to accelerate model training and optimize model performance with active learning Learn about the latest enhancements to out-of-the-box document processing – with little to no training required Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath. Speakers: 👨‍🏫 Andras Palfi, Senior Product Manager, UiPath 👩‍🏫 Lenka Dulovicova, Product Program Manager, UiPath

GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...

Sri Ambati

Transcript: Selling digital books in 2024: Insights from industry leaders - T...

BookNet Canada

The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more. Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/ Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.

How world-class product teams are winning in the AI era by CEO and Founder, P...

Product School

Essentials of Automations: Optimizing FME Workflows with Parameters

Safe Software

Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place. Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects. Here’s what you’ll gain: - Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows. - Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy. - Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency. - Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity. We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic. Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.

LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...

DanBrown980551

Do you want to learn how to model and simulate an electrical network from scratch in under an hour? Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)! During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook. PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides: - A fully editable and extendable library for grid component modelling; - Visualization tools to display your network; - Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses; The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well. What you will learn during the webinar: - For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills; - For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.

FIDO Alliance Osaka Seminar: Overview.pdf

FIDO Alliance

Recently uploaded (20)

State of ICS and IoT Cyber Threat Landscape Report 2024 preview

Monitoring Java Application Security with JDK Tools and JFR Events

SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf

FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf

PCI PIN Basics Webinar from the Controlcase Team

PHP Frameworks: I want to break free (IPC Berlin 2024)

FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf

GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...

Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx

FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf

When stars align: studies in data quality, knowledge graphs, and machine lear...

Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™

DevOps and Testing slides at DASA Connect

Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...

GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...

Transcript: Selling digital books in 2024: Insights from industry leaders - T...

How world-class product teams are winning in the AI era by CEO and Founder, P...

Essentials of Automations: Optimizing FME Workflows with Parameters

LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...

FIDO Alliance Osaka Seminar: Overview.pdf

Responsive websites with Joomla 3 & Bootstrap #jd13ba

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/

20.

21.

22.

23.

24.

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

41.

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

63.

69.

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

77.

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

93.

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

113.

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

Responsive websites with Joomla 3 & Bootstrap #jd13ba

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

Viewers also liked

Viewers also liked (6)

More from Sander Potjer

More from Sander Potjer (20)

Recently uploaded

Recently uploaded (20)

Responsive websites with Joomla 3 & Bootstrap #jd13ba