While working on a recent WordPress development project, I conducted some research on responsive grids and frameworks. It turned out to be quite a taxing but rewarding exercise. As usual, I’m here to share with you what I’ve found.
As you might know, there is a whole sea of responsive grids, WordPress frameworks and what not, and it is very easy to get lost or confused. I’m going to try to help you out by writing some notes about each grid or framework I mention. I’ll also be listing them in order of complexity, starting from the most basic, easy to learn and going on to more heavy systems.
Pretty much all of these grids are built with HTML 5 and are also responsive, so if you’re not confident on these topics, it’s better to read up before exploring further. I suggest the excellent Responsive Web Design book by Ethan Marcotte if you want a thorough understanding of responsive web design.
Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone. Skeleton is built on three core principles:
- Responsive grid down to mobile
- Fast to start
- Style agnostic, meaning that it’s not a UI framework but just provides basic styles, leaving you to define further styling
The file structure for Skeleton is:
- index.html: The base html page that includes the necessary initial markup
- stylesheets (folder)
- base.css: Basic styles of Skeleton
- skeleton.css: The glorious Skeleton grid
- layout.css: File with no specific styles, but a variety of useful media queries
- images (folder):
- favicon.ico: Standard 16×16 favicon
- apple-touch-icon (x3): All three sizes of Apple touch icons for iPhone 3, iPad and iPhone 4 with retina.
I like it because it isn’t at all complex and therefore is a perfect starting point for your own development. It also includes a PSD template which is very helpful to designers.
The only gripe I have is that, like most of the other grids, it is limited to 960px. I prefer to develop websites with higher widths nowadays, but most grids seem to be stuck at 960px. In this regard, I’d like to like to a great article on tutsplus which discusses full-screen width development and shows you how you can develop your own code which stretches to wider screens. Another article by Tim Holt is also an interesting read for those who want responsive grids bigger than 960px.
320 and Up
Frameworks and boilerplates like HTML5 Boilerplate and Bootstrap are great, but they include some files and styles you’ll use once in a blue moon. ‘320 and Up’ includes only things the author typically uses in his projects. ‘320 and Up’ doesn’t try to do too much. It isn’t a development framework and it doesn’t include grids. Earlier versions of ‘320 and Up’ were written as extensions to HTML5 Boilerplate. While still compatible with Boilerplate, the new ‘320 and Up’ works better with Twitter’s Bootstrap. The new version also includes Font Awesome icon fonts.
What’s in the new ‘320 and Up’?
- Five CSS3 Media Query increments: 480, 600, 768, 992 and 1382px
- Design ‘atmosphere’ (colour, texture and typography) separated from layout
- Bootstrap styles for buttons, forms and tables
- Font-based icons from Font Awesome
- Modernizr, Selectivizr, responsive type tester and design tester
- LESS and Sass mixins and variables
- Reference page
- Upstarts for the things we build every day
As the author (Andy Clarke) of 320 and Up doesn’t like grid frameworks that much, this is somewhat of a different system, and uses what he calls ‘upstarts’. They’re responsive design patterns and HTML and CSS for the things he builds every day. I quite like the idea and 320 and up is definitely one of the top starting points you can choose for your web project.
This is a grid that adapts to any screen width. I haven’t tried it out myself but it seems pretty interesting, so I’m mentioning it just in case some of you want to take a look at it. If anyone would like to comment more about it and its usage please do so in the comments below and I’ll update the post.
The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.
Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.
Scrap 1024! Design once at 1140 for 1280, and with very little extra work, it will adapt itself to work on just about any monitor, even mobile.
It works perfectly in Chrome, Safari, Firefox, IE7 & IE8.
It works alright in IE6. IE6 doesn’t support max-width, so the grid doesn’t fix to 1140px. It spans the full width of the browser. Most people using IE6 probably don’t have monitors with a resolution higher than 1280×1024 though. Images are also not restrained to the width of the column because of max-width. But the extra image is hidden, rather than breaking the layout.
This grid is hugely popular, and is one of the only ones I’ve found which offers more than 960px of width. It also features a handy Photoshop template. Due to it’s construction with percentage based columns, sometimes the right edges of the columns don’t align and I’m not too happy with that, especially if I’m building a design which features some sort of image grid like a portfolio. You can see this illustrated below:
Fluid Baseline Grid
The Fluid Baseline Grid System is an HTML5 & CSS3 development kit that provides a solid foundation to quickly design websites with ease.
The FBG system was built with typographic standards in mind and combines principals of fluid-column layouts, baseline grids and mobile-first responsive design into a resolution independent and device agnostic framework. It is packed with CSS normalization, beautiful typographic standards, corrected bugs, common browser inconsistencies and improved usability. You can finally have your cake and eat it too, all while making awesome websites.
The FBG is designed for mobile first. CSS styles are scaled up from the minimum instead of scaled down from the maximum through the use of media queries. IE6/7/8 do not support media queries, so Respond.js is used to polyfill.
Common Break Points
- 320 px — Mobile portrait
- 480 px — Mobile landscape
- 600 px — Small tablet
- 768 px — Tablet portrait
- 1024 px — Tablet landscape/Netbook
- 1280 px & greater — Desktop
This is a very interesting grid that is able to adapt to bigger screens as well. I haven’t played with it that much but it looks pretty solid.
The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. The elastic grid system is borrowed from cssgrid.net, while some code inspiration (and the idea for subcolumns) are taken from 960.gs. Columnal makes responsive web design a little easier. It is 1140px wide, but since it is fluid, will respond to the width of most browsers.
If the browser gets thin enough, the site will change to a mobile-friendly layout.
How Columnal is different
- Built-in debugging CSS to show the structure of any pages being built
- Sub-columns (columns within columns) for more layout options
- Prefix and suffix for extra space within a column before or after content
- Vertical spacing CSS classes
- PDF of grid system for sketching out site before building
- Wireframing templates
- Columnal is in active development and you may run across bugs
It’s an evolution based on two other successful frameworks, adding other useful things like wireframing templates and a PDF for sketching. However it suffers from the same problem with non alignment of columns as the 1140px grid it is based on.
HTML5 Boilerplate is the professional frontend developers’s base HTML/CSS/JS template for a fast, robust and future-safe site.
After more than four years in iterative development, you get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain XHR and Flash. A starter Apache .htaccess config file hooks you up with caching rules and preps your site to serve HTML5 video, use @font-face, and drop your site’s filesize by half with robust gzipping.
Boilerplate is not a framework, nor does it prescribe any philosophy of development, it’s just got some tricks to get your project off the ground quickly and right-footed.
Why it is good
- Cross-browser compatible (IE6+)
- HTML5 ready. Use the new tags with certainty.
- Optimal caching and compression rules for grade-A performance
- Best practice site configuration defaults
- Mobile browser optimizations
- Progressive enhancement graceful degradation …
- IE specific classes for maximum cross-browser control
- Handy .no-js and .js classes to style based on capability
- Console.log nerfing so you won’t break anyone by mistake.
- Never go wrong with your doctype or markup!
- An optimal print stylesheet, performance optimized.
- iOS, Android, Opera Mobile-adaptable markup and CSS skeleton.
- .clearfix, .visuallyhidden classes to style things wisely and accessibly.
- .htaccess file that allows proper use of HTML5 features and faster page load
- CDN hosted jQuery with local fallback failsafe.
- Think there’s too much? The HTML5 Boilerplate is delete-key friendly.
This is one of the most established grids out there. It still does not consider itself to be a framework, however it does have a lot of features and is therefore more complex than some of the earlier grids we’ve mentioned. Having said that, you can learn a lot from this grid, and indeed many other girds or WordPress frameworks choose to build on the HTML5 Boilerplate.
If you’re interested in HTML5 Boilerplate, I’ve also found an amazing tool called Initializr that helps you kick-start the development of your new projects. It does this generating templates based on the HTML5 Boilerplate, allowing you to choose which parts you want or don’t want from it. A responsive template has also been added to start from a basic design instead of a blank page.
I love this tool because it allows me to choose exactly what I want, and I recommend it to those who feel a bit overwhelmed by all the stuff that comes in the HTML5 Boilerplate by default. Moreover it has a ‘maximal width’ view with which you can set a grid width higher than 960px, which as mentioned I prefer because it gives me more space to work with.
Frameworks (CSS and more)
I had never come across Gumby before this round of research, and I was really impressed with it. Here we’re crossing over to the territory of real frameworks. All the systems mentioned above are mere starting points for your project, but Gumby and the ones we’ll mention next are much more bulky and contain lots of styling additions. You can actually use them for rapid prototyping.
Gumby is a responsive and 960px-grid CSS grid framework that can be customized to work in every resolution with almost no effort.
Its fluid-fixed layout self-optimizes the content for desktop, tablet and mobile resolutions and there is support for nested grids.
Gumby has multiple versions to download: 12 columns, 16 columns, a hybrid one or an all-in-one package. And, there are PSD files provided to ease designing with the grid.
The framework is very well-documented, has demos for all of its features and totally free to use.
It’s a really nice framework and I’d like to play around a bit more with it in the coming months. It has everything you need including PSD files and also a customisable download package so you can cut down the fat.
Foundation is an easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.
Foundation’s Grid lets you lay out pages quickly and logically with a flexible, nestable system. Even better, the Grid can be whatever size you need — it’s easily adapted to any size screens, from phones to TVs.
Foundation includes dozens of styles and elements to help you quickly put together clickable prototypes, that can then be adapted and styled into polished production code. Forms, buttons, tabs, all kinds of good stuff.
The Grid lets you quickly put together page layouts for mobile devices and the desktop. You don’t need two different sites — the Grid is built to create a rock-solid experience on all kinds of devices with the exact same markup.
This is one of the most popular frameworks, together with Twitter’s Bootstrap, and you can’t really go wrong with it if you’re looking for a grid + rapid prototyping tool.
When Mark Otto (@mdo) and Jacob Thornton (@fat) released Twitter Bootstrap to the world in August 2011, their announcement explained what its value would be: empowering front-end developers to kickstart projects more efficiently and effectively.
Together, these interface elements provide all the trappings of a standards compliant, user-friendly, professionally built HTML5 website, right out of the box.
Bootstrap is designed to help people of all skill levels—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.
Bootstrap 2 is now fully responsive. All components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.
If you don’t mind the fact that there is a real lot of code in here, Bootstrap might be right for you. It’s definitely great for rapid prototyping, and is superbly constructed. However till now I’ve preferred to rely on more bare-bones grids when starting my typical WordPress project.
If you’re looking for a great starter article for using Bootstrap with WordPress, check out this one by Ben Stewart. It even has PSD templates for you to use when designing. It also discusses some of the Bootstrap-ready WordPress themes.
WordPress Starter Themes / Frameworks
Now that we’ve taken a look at the major CSS grids and frameworks, hopefully it is clear that there is a difference between a CSS grid and a website framework. Now we’re going to go ahead and add WordPress into the mix, resulting in our search for WordPress responsive starter themes that implement the above mentioned grids and frameworks. In such starter themes we expect to find an inclusion of one or more of the above grids or frameworks, with the addition of WordPress-specific styling, markup and also some useful functions.
Here are the results:
Sure, Frameworks are great and they can make developing sites easier, but sometimes you just need to get your hands on the code and make a project truly yours. Bones isn’t meant to be used as a Framework. It’s meant to be used as a per-project template. Make sites that are original, and one of a kind!
Ever buy something and when you get it home have no idea how to use one of it’s features because there is no documentation? We all hate that. Everything in Bones is documented and available to you before you even download it! Be Warned though, Bones is for Developers so if you’re not comfortable with CSS or HTML, you may want check out some other options.
The stylesheet of Bones is insanely documented. Not only is everything laid out in a semantic order that makes it easy to find what you’re looking for, but it’s all tagged with explanations as to what everything does. This helps you find what you’re looking for fast, instead of having to scroll down a messy stylesheet. Get in, Get out, Get it done. One of my favourites.
Reverie Framework is an extremely versatile HTML5 WordPress framework based on ZURB’s Foundation, a powerful tool for building prototypes on any kind of devices. Reverie follows HTML5 Boilerplate standard and is hNews microformat ready. It is optimized for Search Engine while at the same time improve readability.
It is extremely easy to create your blog, CMS, brochure and any other kind of sites with Reverie. You can see some samples on ZURB and how they make these prototypes. Did I just mentioned Reverie works well with bbPress 2.0 and BuddyPress 1.5, even without styling?
Reverie is a top framework and you cannot go wrong if you decide to use this.
Roots is based on HTML5 Boilerplate, Bootstrap from Twitter, and is hNews microformat ready
Bootstrap from Twitter is included by default, with topbar navigation and the responsive grid ready to go.
This a top starter theme with lots of nice features. It includes a number of unique features, such as cleaner WordPress code output, extremely clean URLs, multilingual ready, widget areas and more. I don’t like that it minimises the Bootstrap JS code as it’s difficult to remove unused stuff from such a file.
Canvas is Woothemes’ most ambitions theme to date. Every element of Canvas is highly customizable through our options panel, so you can make the design, layout and typography exactly like you want. If you are after a highly customizable blog design or just a starter theme for your next client project, then Canvas will most definitely work for you!
Woothemes need no introduction when it comes to WordPress themes, and Canvas 5 is the fifth iteration of this super popular basic theme. Quality is top notch, and it has a great UI for options controlling things like typography, layout etc. Aimed at both users and developers, both will enjoy working with this theme. It also includes the Woothemes Framework, which again features many useful PHP helper functions.
The Genesis theme empowers you to quickly and easily build incredible websites with WordPress.
Whether you’re a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.
This is another theme which packs a lot of goodies in it, due to having the Genesis framework included along with the theme. Therefore you don’t only get a fantastic blank theme with lots of styling ready to tweak, but you also get s super secure and well constructed codebase on which to build.
The framework in fact contains many useful functions to help you while building with WordPress, and the code is also reviewed for security by Mark Jaquith, one of the core WordPress contributors.
When I need to build a site quickly, I very often turn to Genesis. I love it because it isn’t bloated with lots of options within the dashboard, it only has the essentials. On the other hand it is very developer friendly as it has lots of handy functions and hooks for a developer to use. I use the Genesis Simple Hooks plugin for quick theme customisations via hooks. With this plugin, you can hook your own code from within an interface in the dashboard, very handy!
The Thesis Theme framework is a premium template system for WordPress that is designed to serve as the rock-solid foundation beneath any kind of website.
It has a remarkably efficient HTML + CSS + PHPframework and easy-to-use controls that you can use to fine-tune each and every page of your site with a tactical precision that has never been possible before. The days of worrying about your in-site SEO are over—with Thesis, your strategy is “just add killer content.”
Not a coder? Not a problem. The Thesis option panels allow you to command your site with ease, while Thesis does all of the heavy lifting behind the scenes. You’ve never had this much control over your site before, and this is precisely what makes Thesis indispensable to critical website owners all over the globe.
What about customizations and design changes? Thesis contains a futureproof customization system that allows you to produce unique designs without having to touchany core code. And thanks to a revolutionary layout generator (with 1, 2, and 3-column layout combinations) and pinpoint font controls, testing tons of different layout variants has never been easier!
This has been one of the very first starter themes for WordPress, and while it has enjoyed its fair share of controversy, it remains one of the most popular themes. It is aimed more at a beginner user, the emphasis is on making things simple.
Underscores is a very minimal theme right from the folks at Automattic. It is best used as a framework to start off your new theme. It is ideal if you’re not interested in any added functions when looking for a framework for your project. If you just need some wicked WordPress and CSS to get you going, this is your ideal start.
If you’re not sure it will save you time, read ‘The 1000 hour head start‘, article explaining why the use of Underscores will save you lots of time at the start of your project. The Underscores site also includes a generator which generates a theme based on Underscores, but including your own chosen theme name. If you want to develop themes for free or commercial release, such as for sale on Themeforest, this is an ideal base to start from.
WordPress Site Builders
Apart from the frameworks mentioned already, there are what I call the WordPress site or theme builders. Basically these offer not only a framework but complete drag and drop building functionality.
A drag-and-drop platform that allows you to build a website in a professional way. The first-ever framework with draggable “sections” of professional web-design.
PageLines is installed as a theme in WordPress. This means with PageLines you’ll also get WP’s advanced content-management capability and full compatibility with its 16,000 plugins.
In 2.0, PageLines is introducing the first-ever extension marketplace for websites. This means you’ll be able to buy and sell almost anything you need for your site.
This is really cool stuff, my favourite drag and drop WordPress theme builder. Check it out and it will blow you away, promise!
Headway is a close competitor to Pagelines, having very similar features, although at the moment Pagelines is looking a bit more refined.
As you can see you’ve got a real lot of options to choose from depending on how you prefer to work, whether with simple grids or advanced WordPress frameworks.
Want to know what I prefer using? My way is by no means the best way to do things, because it depends a lot on what you need to build, your experience with front end development and WordPress, and philosophy. But here you have it, I prefer heading to initializr.com and using the HTML5 Boilerplate + Bootstrap setup. It gives me a really really neat file setup on which I can then build the WordPress functionality.
I usually refer to other WordPress themes and frameworks for some handy functions. Mostly I borrow WordPress code from Bones and Roots as they are both excellent, tried and tested, and well-documented.
Hope you enjoyed the read and found out some new things, let us know if we left anything out!
If you want to check out some more Grid based web design resources, check out this link.
If you enjoyed this post, make sure to subscribe to WPMayor’s RSS feed.