Making a CSS framework responsive

HTML & CSS
1

Hi,

In the company where I work, they use a CSS framework, much like the blueprint CSS framework. Now there are talks of making it responsive.
Where/how should we begin making the complete framework responsive? Please keep blueprint CSS framework in mind. How could one begin making blueprint responsive.

Any suggestions would be really helpful.

Thanks,

2

Can’t you just take an existing responsive CSS framework and move your stuff into it?

There’s plenty of good responsive CSS frameworks out there, might be much easier and quicker then trying to hack what you have.

3

seanuk makes a good point…

I suggest also taking a look at how the “tried and true” packages handle being responsive. Look at Twitter Bootstrap especially. They split their CSS files into two. The first file is just general CSS rules. The second file is only used when you want your site to be responsive. Check out how they squeeze and restack as the screen width narrows. It will at least give you some ideas if you decide to create your own responsive CSS rules.

Good luck!

4

yes, I second Twitter Bootstrap :slight_smile:

5

We don’t know how flexible and clean your framework is, how much of its code (CSS rules and HTML markup) you can rewrite and how easily you can swap fixed to fluid or relative units, etc. Then there’s also the question how you’d like to make your site responsive, e.g. work yourself from the smallest screen (mobile first) up to the biggest, vice versa, optimize for tablets first… and so forth, so I really find it nearly impossible to answer your question without being vague.

Some tools are articles have been collected here: http://mobile.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/

Seriously though, Responsive Design is a hot topic and there are a plethora of articles, templates, guides, tutorials, and frameworks out there to choose from.

Personally, I do not recommend Twitter Bootstrap. It’s very, very heavy, too bloated for my taste. There are other frameworks out there you can check, though I don’t recommend any of them, either (here are some reasons):

Some framework listings:

http://designshack.net/articles/css/which-is-right-for-me-22-responsive-css-frameworks-and-boilerplates-explained/
http://speckyboy.com/2012/08/21/15-more-responsive-css-frameworks-boilerplates-worth-considering/

If you do a search, you’ll find plenty more resources.

6

Projects like this are best done with a real world scenario at hand. Don’t think about it as making the framework responsive but making a single site that uses the framework responsive. Naturally when that is done the framework will need to be modified to support the new design goals. When the framework needs to be modified to achieve a new design goal than think about how that change can be best made to correlate to everything else that uses the framework. Though the idea remains to still use a single site as a jumping off point but keeping reuse in mind across all other sites which the framework is in use.