HTML5 CSS3 Frameworks Sass/Compass/320&up/susy/HTML5boilerplate play together?

Question

I've been exploring the tools and techniques to implement responsive design.

I like the responsive mobile 1st approach that 320 & up does, it says it uses html5 boilerplate.

For overall editing, control and features Compass/Sass seem to have a lot to offer.

• It is not clear if the HTML5 boilerplate is included in Compass?
• It seems that Compass has it's own similar capabilities?
• Susy claims to incorporate 320 & up, which says it uses HTML5 boilerplate.
• I'm confused do html5 boilerplate co-exist with Compass facilities? do I need to choose?
• What is the best stack to consider here?
• are there compass plug-ins that provide the full stack?

Answer 1

(HTML5 is not required to have responsive design.)

Each of these stylesheet technologies builds on the other. They all "compile" down into CSS.

SASS is the important part. Learn the basics and start playing with the others.

html5boilerplate: It is a cross-browser compliant stylesheet. It's a great starting point for CSS. As of 2.0, it uses normalize instead of reset.

CSS: Clarke's 320 & up is a fine approach for mobile browsers that recognize media queries. Skeleton is another good one, if you use grid systems for site layout. These are both straight CSS base files, like boilerplate plus grids & media queries.

SASS: If you want to write CSS faster and with less repetition, then an abstraction tool like SASS will help you. It processes SASS syntax to generate CSS. Highlights include: variables, custom functions (mixins), converting existing .css, .less, .sass, .scss files into .sass or .scss formats.

Compass: Compass is more of a collection of SASS mixins and includes than a "framework." Eventually you will not like (re)creating your own SASS mixins. Compass has already solved many problems, and you can use their solutions as mixins, and pre-made "CSS modules" that you can import.

• Compass uses parts of the html5boilerplate, but it does not explicitly include all of it.
• It does not normalize (normalize.css), it resets based on the Meyer's reset.
• You have to know what you want, and then pull it in Compass.

Susy: Susy is a percentage-based grid system written in SASS that uses some Compass features.

If I want to see how a particular problem was solved, I will look at Compass and see if they have already done that. I find that there is some overhead with Compass, so I don't use it often.

I personally use my own customized version of 320 & up authored in SASS, where I break-out each part into it's own include file: colors, fonts, forms, grids, headings, links, mixins, modernizr, tables, typography, vendors, 320, 480, ..., etc. It keeps things nice and organized, and it compiles down into one 'syles.css' file that is then minified.