SMACSS based CSS Frameworks

Since no answers are flying off the press, I was curious and took a look around.

It turns out there are quite a few, and I see you have been at this for a while now.

I see others recommended LESS or SASS, and I'll add there are solutions like Compass and Susy. These are simply things to look into as they each have inherent organization patterns.

But here is my actual answer.

I have a similar endeavor in looking for CSS frameworks that organize the resulting solutions of Responsive Web Design, into best-practices, naming-conventions and otherwise -- patterns. So here is what I was looking at, with an equivlent open-ended question, at a dead-end.

I considered that perhaps the problem may be, that CSS organization is highly dependent on environment and context. So, maybe design patterns is a good approach.

So here was my solution and I will suggest it here -> I really like your comments on separating css into: base, layout, fonts, elements. This can benefit others in some instances.

If you cannot find a organization methodology out there that suits your environment, experiment and design what you need, then name it, and share it back with the world.

This is multiply beneficial to you, in that: you learn how to solve your problem, and it shows well for you as an advanced developer.

One approach is to share the solution in a wordpress blog, a website example page, or a github repository.

If it is genuine and beneficial, name it, build it and share it. Only good things can come of this.

Good luck!


I don't know that Bootstrap is based on SMACSS, but Jonathan Snook (SMACSS founder) had the following to say:

"If you were wondering what an example implementation of SMACSS might look like? Bootstrap is a perfect example."

Prefixed classes in bootstrap


Pure is a newer CSS framework that is based on SMACSS. It seems to be related to the YUI project.

From their extend page...

Based on SMACSS

Pure is broken up into a set of responsive modules. From the beginning, we adopted SMACSS as a convention for writing our CSS. For those who are new to SMACSS, you should give it a quick read, especially the section on module rules.

Tags:

Css

Frameworks