Twitter Bootstrap Orchard Theme

Twitter Bootstrap Orchard Theme

Twitter came out with a Bootstrap toolkit "designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more." The Bootstrap CSS and JavaScript is indeed nice, so much nicer than the default Orchard Theme - Theme Machine. Now that I have a little free time over the holidays, I thought I would create a custom Orchard Theme based on Bootstrap from Twitter. It's still not quite finished, but Bootstrap is definitely working with Orchard CMS and I am excited to start offering it as a theme for my clients.

Twitter Bootstrap Orchard Theme

Twitter Bootstrap comes with its own CSS and JavaScript, which I have included in the custom Orchard Theme. I have also added some things I like from HTML5 Boilerplate into the mix as well as some media queries for responsive web design. Rumor has it that Bootstrap will support responsive web design with the release of 2.0, so I look forward to modifying the theme with the release of 2.0.

Pictures are worth a thousand words, so here are some images of the new Twitter Bootstrap Orchard Theme. First, full support for the fixed topbar navigation as well as all the various typography and widgets that come with Bootstrap. You have all the lovely buttons, form elements, alerts, grid, pagination, breadcrumbs, and everything else that comes with Bootstrap. Although I tried to minimize the shape overriding, I have provided shape alternates where appropriate so everything works perfect out of the box. So much nicer than the Theme Machine.

Twitter Bootstrap Orchard Theme

In addition to wonderful CSS styles for all your various elements and typography, Bootstrap also includes some really nice JavaScript / jQuery Plugins that offer effects and animation to provide a nice look and feel. I included all the plugins with the theme and you get some really nice features like modal dialogs, alerts, dropdown for navigation, button states, tips, and popvers. Here are a couple of images showing the Bootstrap Modal Dialog, Tabs, and Dropdown Navigation. Again, I am just scratching the surface as to what all is included in Twitter Bootstrap and the Custom Orchard Theme.

Twitter Bootstrap Modal Dialog and Orchard CMS

Twitter Bootstrap Tabs and Dropdown Navigation with Orchard CMS

Bootstrap comes with a simple, but effect grid system based on 960.gs and I have used it to theme a typical blog, portfolio, FAQ, etc. in Orchard. I am still tweaking those a bit so I will display those photos some other time. Just know that Bootstrap from Twitter is a pretty nice theme to get you up and running with a website or web application. I think it will make a nice default theme for my Orchard Websites should my clients wish to go that route.

I am also taking parts of the HTML5 Boilerplate to provide some common sense defaults without weighing down the lightweight, simplicity of Bootstrap. More on all of this later.

Conclusion

Bootstrap from Twitter is an awesome toolkit for developing websites and web applications and will make a wonderful Orchard Theme. If you are looking for an exception Orchard Web Developer, I am available for hire. If you are interested in learning about Orchard CMS, check out any of my Orchard Tutorials.

Contact Me