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

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

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

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

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

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

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

Data Cloud, More than a CDP by Matt Robison

Anna Loughnan Colquhoun

ICT role in 21st century education and its challenges

rafiqahmad00786416

In this session, we will delve into strategic approaches for optimizing knowledge management within Microsoft 365, amidst the evolving landscape of Copilot. From leveraging automatic metadata classification and permission governance with SharePoint Premium, to unlocking Viva Engage for the cultivation of knowledge and communities, you will gain actionable insights to bolster your organization's knowledge-sharing initiatives. In this session, we will also explore how to facilitate solutions to enable your employees to find answers and expertise within Microsoft 365. You will leave equipped with practical techniques and a deeper understanding of how there is more to effective knowledge management than just enabling Copilot, but building actual solutions to prepare the knowledge that Copilot and your employees can use.

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

Drew Madelung

Architecting Cloud Native Applications

WSO2

Corporate and higher education. Two industries that, in the past, have had a clear divide with very little crossover. The difference in goals, learning styles and objectives paved the way for differing learning technologies platforms to evolve. Now, those stark lines are blurring as both sides are discovering they have content that’s relevant to the other. Join Tammy Rutherford as she walks through the pros and cons of corporate and higher ed collaborating. And the challenges of these different technology platforms working together for a brighter future.

Corporate and higher education May webinar.pptx

Rustici Software

In the thrilling conclusion to 2023, ransomware groups had a banner year, really outdoing themselves in the "make everyone's life miserable" department. LockBit 3.0 took gold in the hacking olympics, followed by the plucky upstarts Clop and ALPHV/BlackCat. Apparently, 48% of organizations were feeling left out and decided to get in on the cyber attack action. Business services won the "most likely to get digitally mugged" award, with education and retail nipping at their heels. Hackers expanded their repertoire beyond boring old encryption to the much more exciting world of extortion. The US, UK and Canada took top honors in the "countries most likely to pay up" category. Bitcoins were the currency of choice for discerning hackers, because who doesn't love untraceable money?

Ransomware_Q4_2023. The report. [EN].pdf

Overkill Security

GenAI Risks & Security Meetup 01052024.pdf

lior mazor

The value of a flexible API Management solution for Open Banking Steve Melan, Manager for IT Innovation and Architecture - State's and Saving's Bank of Luxembourg Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 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 New York 2024 - The value of a flexible API Management solution for O...

apidays

Boost Fertility New Invention Ups Success Rates.pdf

sudhanshuwaghmare1

DBX First Quarter 2024 Investor Presentation

Dropbox

Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood

Juan lago vázquez

Automating Google Workspace (GWS) & more with Apps Script

wesley chun

Manulife - Insurer Transformation Award 2024

The Digital Insurer

Modernizing Securities Finance: The cloud-native prime brokerage platform transforming capital markets. Madhu Subbu, Managing Director, Head of Securities Finance Engineering 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 - Modernizing Securities Finance by Madhu Subbu

apidays

Artificial Intelligence Chap.5 : Uncertainty

Khushali Kathiriya

Effective data discovery is crucial for maintaining compliance and mitigating risks in today's rapidly evolving privacy landscape. However, traditional manual approaches often struggle to keep pace with the growing volume and complexity of data. Join us for an insightful webinar where industry leaders from TrustArc and Privya will share their expertise on leveraging AI-powered solutions to revolutionize data discovery. You'll learn how to: - Effortlessly maintain a comprehensive, up-to-date data inventory - Harness code scanning insights to gain complete visibility into data flows leveraging the advantages of code scanning over DB scanning - Simplify compliance by leveraging Privya's integration with TrustArc - Implement proven strategies to mitigate third-party risks Our panel of experts will discuss real-world case studies and share practical strategies for overcoming common data discovery challenges. They'll also explore the latest trends and innovations in AI-driven data management, and how these technologies can help organizations stay ahead of the curve in an ever-changing privacy landscape.

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery

TrustArc

AWS Community Day CPH - Three problems of Terraform

Andrey Devyatkin

AXA XL - Insurer Innovation Award Americas 2024

The Digital Insurer

Webinar Recording: https://www.panagenda.com/webinars/why-teams-call-analytics-is-critical-to-your-entire-business Nothing is as frustrating and noticeable as being in an important call and being unable to see or hear the other person. Not surprising then, that issues with Teams calls are among the most common problems users call their helpdesk for. Having in depth insight into everything relevant going on at the user’s device, local network, ISP and Microsoft itself during the call is crucial for good Microsoft Teams Call quality support. To ensure a quick and adequate solution and to ensure your users get the most out of their Microsoft 365. But did you know that ‘bad calls’ are also an excellent indicator of other problems arising? Precisely because it is so noticeable!? Like the canary in the mine, bad calls can be early indicators of problems. Problems that might otherwise not have been noticed for a while but can have a big impact on productivity and satisfaction. Join this session by Christoph Adler to learn how true Microsoft Teams call quality analytics helped other organizations troubleshoot bad calls and identify and fix problems that impacted Teams calls or the use of Microsoft365 in general. See what it can do to keep your users happy and productive! In this session we will cover - Why CQD data alone is not enough to troubleshoot call problems - The importance of attributing call problems to the right call participant - What call quality analytics can do to help you quickly find, fix-, and prevent problems - Why having retrospective detailed insights matters - Real life examples of how others have used Microsoft Teams call quality monitoring to problem shoot problems with their ISP, network, device health and more.

Why Teams call analytics are critical to your entire business

panagenda

Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...

Zilliz

Kürzlich hochgeladen (20)

Data Cloud, More than a CDP by Matt Robison

ICT role in 21st century education and its challenges

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

Architecting Cloud Native Applications

Corporate and higher education May webinar.pptx

Ransomware_Q4_2023. The report. [EN].pdf

GenAI Risks & Security Meetup 01052024.pdf

Apidays New York 2024 - The value of a flexible API Management solution for O...

Boost Fertility New Invention Ups Success Rates.pdf

DBX First Quarter 2024 Investor Presentation

Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood

Automating Google Workspace (GWS) & more with Apps Script

Manulife - Insurer Transformation Award 2024

Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu

Artificial Intelligence Chap.5 : Uncertainty

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery

AWS Community Day CPH - Three problems of Terraform

AXA XL - Insurer Innovation Award Americas 2024

Why Teams call analytics are critical to your entire business

Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...

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