I recently started looking at using Twitter Bootstrap as a foundation for some of our website projects at LOUDER media. I never found a good Photoshop template for the various responsive grid sizes available with Bootstrap so I made my own and decided to share them with the world.
If you just want the free Photoshop templates for Bootstrap’s responsive grid then go ahead and grab them here:
If you want to read about some of the things I discovered about incorporating WordPress and Bootstrap, please read on.
Since we primarily build custom WordPress-based sites the first thing I did was look for existing starter themes / frameworks that incorporate Bootstrap. Here are some of the ones I looked at with some very brief thoughts on each:
- Roots - Starter theme for Bootstrap with HTML5 Boilerplate and some other WP development goodies baked-in. Seems to be in active development and very well-structured although you have to be ready to conform to the developers’ conventions to best utilize the setup.
- WordPress Bootstrap - Free theme for Bootstrap with lots of theme options to control various Bootstrap features. The developer seems to be interested in making this a very feature-rich, user-controllable Bootstrap/Wordpress environment.
- StrapPress - Premium (read “not free”) theme for Bootstrap with lots of shortcodes and options to utilize Bootstrap’s features. Since it is not free I never got to see the code on this one.
- “Free” Bootstrap WordPress Theme - From the makers of StrapPress. Stripped-down version of StrapPress without the admin GUI for managing Bootstrap’s features. “Free” is defined as “give us your email address through Facebook” rather than truly “free” and so I never got to personally see the code on this one.
- Bootstrap for WordPress - Free theme for Bootstrap lacking the extra goodness of Roots. This one does include some theme options built-in.
- WordPress Twitter Bootstrap CSS Plugin - Plugin (not a theme) that will add the Bootstrap CSS/JS files to your existing WordPress site/theme allowing you to add Bootstrap features at will. It also includes various shortcodes for adding Bootstap content to your pages/posts.
The one that seemed to best fit my needs was the Roots theme.
First of all, I really began this journey looking into other newer web design / development things such as HTML5 Boilerplate, LESS CSS, Normalize.css, and Semantic Grid System. That is what led me to Bootstrap which incorporates elements from HTML5 Boilerplate, LESS, and Normalize.css. Roots, in turn, incorporates Bootstrap, HTML5 Boilerplate, and WordPress (as well as a few other goodies).
Roots is much more of a starting point for theme development than the other options listed above. It does not (so far) include a GUI allowing the WP user to manage all of the features of Bootstrap. Instead it simply includes all of the functionality so that the theme developer can utilize as much or as little as the project requires. This method also allows the theme developer to build his own GUI to control various options as needed rather than being potentially constrained by the admin interface pre-packaged with the theme.
If you want control of the various Bootstap options in a user-friendly GUI or who want a finished, minimal, Bootstrap-powered WordPress theme then Roots is not your best bet. For that I would either use WordPress Bootstrap or pay for StrapPress.
Once I had my starter theme in place I needed to build out the design. Roots, by default, uses the responsive grid built into Bootstrap. This means that the site changes size/structure for visitors with different screens sizes as described on the Bootstrap Scaffolding page. This means that I need to make sure my new site works at five main break points:
- 480px and below – fluid columns, no fixed widths
- 767px and below - fluid columns, no fixed widths
- 768px and above - 42px columns, 20px gutters, 724px total grid width
- 980px and up – 60px columns, 20px gutters, 940 total grid width
- 1200px and up – 70px columns, 30px gutters, 1170px total grid width
Of course, all of this is customizable but why mess with a good thing, right? I searched for Photoshop templates for these sizes and found nothing worthwhile so I made my own and decided to share them with the world. Here is a preview of what the files looks like (click for larger preview):
The following ZIP file includes three Photoshop PSD files. Each PSD has a layer containing the Bootstrap 2.0 table of screen/grid sizes, a layer of columns in red, and vertical grid lines at column edges. Each file is 1200px wide with the grid in the middle. This helps me take my artwork and easily move it from one file to the next but you can adjust the canvas size to whatever width you like if you prefer to work a different way.
I hope you find these templates useful. They are offered as-is with no guarantees or warrantees.