Twitter Bootstrap 2.0.3 was just released with a number of bug fixes and ehancements. I use Twitter Bootstrap as a Default Orchard Theme for Orchard CMS and wanted to mention it here in case you are a web designer or web developer who has not heard of it. Twitter Bootstrap is a free website template from Twitter designed to kickstart development of web applications and websites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, etc. as well as a number of jQuery Plugins.
Free Website Template
Twitter Bootstrap is absolutely free and available for download on GitHub. You can see numerous examples on the documentation website.
A few things to point out that make Twitter Bootstrap a joy to develop web applications and websites:
- Based on HTML5
- Responsive Grid Layout that looks good on smartphones, tablets, and desktop PC's.
- Extremely rich typography that includes tables, forms, buttons, navigation, code, blockquotes, etc.
- Numerous jQuery Plugins, including modals, tooltips, dropdowns, popovers, alert messages, tabs, buttons, carousel, etc.
If you are looking for a free website template to build a web application or website, you will definitely want to look at Twitter Bootstrap.
Orchard CMS Twitter Bootstrap Theme
If you are developing websites using a popular CMS like Orchard, Umbraco, Drupal, Joomla or other content management system, Twitter Bootstrap is a great starter theme. As mentioned earlier, I use Twitter Bootstrap as my base Orchard Theme and include a neat little style switcher that allows my clients to swtich to various styles of Twitter Bootstrap.
Therefore, you use the base CSS, scaffolding, typography, and JavaScript Components in Twitter Bootstrap, but change the style to get a whole new variation of colors and fonts.
Responsive Web Design with Media Queries
Worth mentioning again is the support for a responsive web design using media queries and utility classes that allows your website and web application to support smartphones, tablets, and desktops.
Twitter Bootstrap includes an option bootstrap-responsive.css file that includes the default media queries and utility classes, but you can of course modify it to your liking.
// Landscape phones and down
@media (max-width: 480px) { ... }
// Landscape phone to portrait tablet
@media (max-width: 767px) { ... }
// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 979px) { ... }
// Large desktop
@media (min-width: 1200px) { ... }
Utility classes, which should be used sparingly, allow you to specify which elements should be visible or hidden based on the device type:
- .visible-phone
- .visible-tablet
- .visible-desktop
- .hidden-phone
- .hidden-tablet
- .hidden-desktop
Conclusion
There are a lot of free website templates that you can use to kickstart your web design and development. Twitter Bootstrap is fairly complete in what it offers so you may want to think about using it for your next website or web application.
David Hayden is an Orchard Web Developer in Sarasota Florida specializing in web design and development using Orchard CMS. He develops Orchard Themes, Orchard Modules, and Orchard Websites.