Useful Frameworks and Tools for CSS Developers


CSS frameworks are pre-prepared software frameworks that are meant to allow for easier, more standards-compliant web design using the Cascading Style Sheetslanguage. Most of these frameworks contain at least a grid. More functional frameworks also come with more features and additional JavaScript based functions, but are mostly design oriented and unobtrusive. This differentiates these from functional and full JavaScript frameworks.

 Useful Frameworks and Tools for CSS Developers


Home   Scalable and Modular Architecture for CSS

SMACSS is all about efficiency, especially if you’re working within a team environment. Do you just ever find yourself in a situation where you’re constantly writing and rewriting CSS code to make something work? SMACSS is for those who want to write simple code on large projects, without the need to feel like there’s a vast sea of code being left behind. An introductory piece from Envato is a good starting place to see what the fuss is about.


Unsemantic CSS Framework

Unsemantic is a fluid grid system that is the successor to the 960 Grid System. It works in a similar way, but instead of being a set number of columns, it’s entirely based on percentages. It seems that some focus is also put on search engine capabilities and how using Unsemantic could improve the overall code readability for robots.



The CSS frameworks these days are still quite immature, with most requiring you to write code in a certain way that can add extra strain on the learning and integration curve. Susy is an amazing grid system that allows you to code the way you’ve always coded, without feeling like you’ve got to learn ten new things to make something work. Check out this article to learn how Susy can help you build better off-canvas grids!


Home · Primer

Are you a frequent visitor of the site that goes by the name of GitHub? I thought you would be. But did you also know that GitHub uses its own internal CSS toolkit to power the site? It means that there’s a style for pretty much everything; layouts, button styles, typography choices, and much more. And this year, this toolkit was finally open-sourced under the name of Primer. Here is an introduction post for this new toolkit.

Loaders loaders

The web is turning into a quite the machine for creating stuff based on web development languages alone, and here we have Loaders.css; a tiny library that provides a set of 28 unique loaders that you can start using right away.


Jeet Grid System   Smart CSS preprocessor grids

Jeet has not only one of the nicest websites I have seen in a long time, it’s also one of the nicest grid systems I have ever seen, and I’m not the only one who thinks that way. Jeet is built on CSS preprocessors. As such, you’re no longer limited to classes like .col-6. Instead, you can pass any fraction, decimal, or combination of the two, to create a completely custom grid.



Love this, just goes to show how JavaScript and CSS can be combined to create something truly amazing. Transformicons is a library for making your SCG and CSS icons transform into different shapes.


Hover.css   A collection of CSS3 powered hover effects

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS. It’s one of those things you’d see on an iPhone application, which further goes to show how close we are to seeing mobile apps being built straight out of the web pipes.


Bourbon   A Lightweight Sass Tool Set

Bourboun has been called many names, but mostly as a solid Bootstrap alternative for the minimalist minded. In itself, Bourbon is exactly what it says — a lightweight framework, but when combined with other interesting packages it can become a powerful and neat framework for creating and writing independent code.


Spritebox   Generate and Create CSS from Sprite Images

Spritebox is for anyone who works with Sprites, it’s a what you see is what you get type of a tool so there’s not much more to say about it. It’s probably one of the easiest solutions out there for generating CSS from single sprite images.

Font Awesome

Font Awesome  the iconic font and CSS toolkit

Font Awesome has to be included for the simple fact that it’s the most popular fonts resource for CSS developers out there, no project is complete without a proper attribution of fonts, and this resource is top notch. Just recently, we also published a list of SVG icons resources, well worth looking into that. Also, you might enjoy this service — Font Awesome to PNG; convert font awesome icons to standalone images quick and easy.


Stitches   An HTML5 sprite sheet generator

Stitches is an HTML5 sprite sheet generator. Nothing more to say, load up images and get your sprite sheet. Easy peasy.


Sass  Syntactically Awesome Style Sheets

If you want to write CSS like a pro, then SASS is your best choice, or at least one of the best. It’s basically giving your CSS coding a bit of a makeover, to the point where it feels like you’re writing from an actual programming language. We highly recommend looking into SASS guidelines as well — it will save you a ton of time!


Getting started   Less.js

Less is another great css-preprocessor, and there is a lot of talk in the community in the past few months as to whether Less is still able to sustain itself. Some say it’s time to move to Sass completely, while others have different opinions. Chris Coyer went into this discussion as well, some time ago.



PHP is amazing at preprocessing stylesheets. PHP has the ability to process it’s own stuff (variables), and work with code real-time as the stylesheet is being processed. It’s a dynamic environment that allows for deep and complex design. TurbineCSS is very much like Sass, with the advantage of individual PHP plugins that can enable the use of features such as browser targeting, advanced design variables, and a lot more. Was able to find this post as an example to show what Turbine is about.


Myth   CSS the way it was imagined.

We’re quite heavy on the pre-processors in this post, but it seems that each one is trying to provide some sort of an unique angle, and Myth is no exception. The big difference with Myth is that it doesn’t actually use a unique syntax, but rather fills the blanks for what each browser supports individually, what’s in the working spec, and what’s being proposed. The end goal comes out to be that as the spec progresses, you can just stop using Myth all together. It’s like you’re writing CSS way ahead in the future.


Leave a Reply