Building a Personal CSS Framework with Compass

Compass provides two frameworks for you to use: the compass core framework and blueprint. And while these frameworks take time to learn, the learning curve is certainly going to take less time than it would take to build it yourself.

And while the most robust and mature frameworks arise out of collaboration of a community. Sometimes a very productive approach is to build your own framework that accommodates your own unique way of thinking about building webpages. That framework can certainly be built on top of other frameworks if you so desire. And it will certainly evolve over time to be more robust and flexible – always meeting only the needs that you have and no-one else’s.

As you know, Compass is a “meta-framework”, this means it is a framework for building frameworks and distributing them. Your personal framework is no exception. As of version 0.10.3, it has never been easier to build and use your personal framework in your compass projects. I think this feature set is easiest to understand when you see it in action, so I made a quick screencast:

Of course, once you master making a personal framework, it’s pretty trivial to release it to your friends and coworkers or even share it across teams in your organization.

Lastly, please remember that you can drop any framework (personal or otherwise) into your project’s extensions directory and it will be automatically loaded the next time compass runs without the need for changing your configuration at all.