Checking out responsive grid systems
Over the last few weeks I’ve been browsing a few responsive grid systems/CSS frameworks, partly as a means of learning new responsive web design methods and also because I’ve been considering whether I should completely redevelop the core set of files that I use for website layouts. I think that the answer to that question is ‘No’ because I’ve yet to find a system that completely resonates with me.
Neverthless, I’ve definitely learned some new methods by looking at the CSS/HTML code of each system so I’d encourage you to do the same. Without exception, all frameworks that I’ve looked at have been very well commented so it’s been relatively easy to understand how they work.
I’ve looked at 8 or 9 systems/frameworks and downloaded a subset of these to look into more thoroughly:
- Get Skeleton is a boilerplate for mobile friendly development and it includes styles for typography, buttons, tabs and forms. It looks a very useful resource that covers a lot.
- 1140 CSS Grid uses a fluid layout and I love this approach. Fluid layouts may not be suitable for every single site but you gain a lot by doing it this way. Fluid (or elastic) layouts greatly simplify the work that you need to do to make a site mobile friendly with media queries (in my experience).
- InuitCSS “combines years of my best dev tips, tricks and practices in one handy file”. The InuitCSS framework is perhaps looser than some others but that means you get a very sensible and streamlined system. You can also add to it with plugins (or ‘Igloos’) which extends the core to add more specific functionality. I like that approach.
I’m going to extend my learning here by rebuilding a personal site with one or more of these systems (probably starting with InuitCSS). Why not do the same? I bet you’ll learn some useful new techniques by doing so!
Related Posts
Comments
We Like
ThemeForest sell a range of site templates from some fantastic designers. They also sell some great WordPress themes!
Online invoicing made easy with CurdBee!
» Sign up
Join SugarSync for online backup. Sync your files between Mac, PC and mobile phone. Get 5 GB FREE and up to 10 GB bonus space!
Featured Book
HTML5 and CSS3 for the Real World will show you how to create websites using these new methods.
This easy-to-follow guide covers everything you need to know to get started. You’ll master the new semantic markup available in HTML5, as well as how to use CSS3 without sacrificing clean markup or resorting to complex workarounds. Buy the Book! · FREE Chapters
Zap! Media 2 January 2012, 09:23 1
Great article, thanks for sharing. A few of our clients have already noticed a need for Responsive Web Design. In our opinion, this will be a BIG trend for web design in 2012.