It’s almost every day that there is a new and interesting CodePen shared that sheds light on the endless possibilities of CSS development. I think we’re truly looking at the starting bridges of what CSS is going to become, a somewhat of a PhotoShop created for the web; there is no doubt about that.
A few months ago we shared a similar roundup of some great CSS tools to help you simplify your development tasks, and last year we saw two great CSS posts from us as well — specifically about minimal CSS frameworks and grid systems, and also CSS pattern tools to help you create the most amazing color collages for your projects.
This roundup is going to be somewhat of a pinnacle for everything else we’ve written about CSS. If you’re looking to get into web design and development and feel like CSS is something you’re going to be working with quite often, this list of tools and frameworks is going to be a great starting point of learning about the tools that the most pro’s use in their daily workflow as well.
Let us know about your favorites in the comments!
1. SMACSS
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.
2. Unsemantic
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.
3. Susy
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 the article about how Susy can help you build better off-canvas grids!
4. 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.
5. 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.
6. Jeet
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.
7. Transformicons
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.
8. Hover
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.
9. Bourbon
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.
10. Spritebox
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.
11. Font Awesome
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.
12. Stitches
Stitches is an HTML5 sprite sheet generator. Nothing more to say, load up images and get your sprite sheet. Easy peasy.
13. Sass
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!
14. Less
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.
15. Turbine
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.
16. Myth
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.
17. Stylus
Stylus is a revolutionary new language, providing an efficient, dynamic, and expressive way to generate CSS. Supporting both an indented syntax and regular CSS style.
Simple (S)CSS grid framework:
https://github.com/PixelT/unlimitedGrid