Introducing Respondsass for Compass

By | February 16, 2013

Today, I’m going to show you Respondsass, my collection of .scss files to help speed up web development. It has been designed to be configurable but lightweight so only has the css you need. It’s built 320 mobile first and up, using ems in the media queries for future friendly websites.

So what is it all about?

The issue I saw with most frameworks was the amount of CSS in the files to created huge grid options where you may only use one or two classes. So what I wanted to do was create a configurable framework that you can say how many columns you need and what the classes should be called and that is all you would hav in the mark up and obviously in the process become a ninja with Sass and Compass. (I achieved the first part but not the ninja bit).

I’m scanning, get to the point.

The main points are this:

Small(ish) CSS output

Neat Sass files, easy to create grid columns without much code and class names of your choice. No more span-1 you can call your columns Al if you want (I feel a song coming on). For more on creating the responsive grid go to the documentation.

Ems for media queries

Ems are definately the way to create media queries but lots of frameworks using pixel values. If you want to learn more about the reason why I chose to go with em based media queries read this post by Lyza Gardner. (In the very near future I will be creating this in rem with em / pixel fallback)

Rems for fonts and spacing

I created a mixin to create any sizing for fonts or spacing with rems with pixel fallbacks which is future friendly future friendly. I’ve also created a configurable baseline to create a nice verticle rhythm based off the baseline rhythm calculator

Just let me at it..

Ok, so if your like me you just want to see how to use it and to give it a go. Go to the Respondsass page and give it a try. I’ve written full documentation but I already have a new update that I will be publishing early next week. Would love you guys to give a try though and give me some feedback.

Over the coming weeks I will be writing more posts on how to use the framework but just for now I wanted to let everyone know its there and get some real UAT on it. I’m starting to sound like Microsoft so on that note…. bye.

Leave a Reply

Your email address will not be published. Required fields are marked *