A lot of the work we do here at GPMD is in the area of ecommerce and, like many other agencies, our framework of choice is Magento. As Im sure youre aware, its becoming increasingly important for websites to be device agnostic, so I set myself the rather daunting task (if you've ever worked with Magento before you'll know what I mean) of creating a responsive Magento base theme; one which we could use as a starting point for our own projects, but also one that we could release to the wider community as a kind of starter, or base responsive framework/theme.
The project is now well underway (check out my Dribbble profile for some sneak peeks), but theres still a lot to do. In the meantime I thought Id start sharing some of my thought processes, resources Ive found useful, and specific issues that Ive encountering as I go along.
This first article is a list of resources that Ive found extremely helpful in the initial stages of thinking about, and planning for the project.
I've learnt so much from these books and found them absolutely invaluable in guiding me in the way Ive approached this project. Don't worry, they're all fairly concise; each one can be read in a couple of hours or less.
Boilerplates & Grid Systems
I love things like HTML5 Boilerplate but in this case I wanted something a little more stripped back, so I settled on Gridless. I also chose to use The Semantic Grid System to help me set up my grid. In both these cases it was necessary to adapt and tweak them to suit my particular needs, but they are a great starting point.
Another reason for not using HTML5 Boilerplate is that my project Isnt actually HTML5 (I can hear the audible gasps of horror) - trust me, there are literally hundreds and hundreds of template files in Magento making a conversion to HTML5 an enormous task and one, for which, we simply dont have the time! Ive stripped out the HTML5 specific stuff I have no need of and just kept helpers for media queries and CSS3.
While I'm on the subject of The Semantic Grid System, you should definitely be looking into using a CSS preprocessor for a project this size (The Semantic Grid System uses LESS to work out the precise percentages required for a responsive grid).
If you're not sure what a CSS preprocessor is, check out this article on Smashing Magazine: An Introduction To LESS And Comparison To SASS
Here are links to the respective websites for more info: