10 Web-based CSS Tools

It’s pretty much impossible to design a site without CSS these days. It controls everything. CSS has a hand in so many visual aspects of a site that it can get daunting to keep track of it all or figure out how to tweak it just a certain way. I came up with a list of various web-based CSS tools that can assist any designer in their front-end development quest. If there’s something I missed, please add it to the comments!

Rocket

rocket

Rocket Helps you create animations for items that move from point A to point B on a page. Just include rocket.css and rocket.js on your page.

Font Library

fontlibrary

Use Font Library to tag and organize Google fonts. If you’re looking for a font that fits a certain feel, this could come in handy.

StyleStats

stylestats

Have StyleStats check out your CSS and give you an overview of its qualities including size, unique font sizes, all colors listed, etc.

CSS Shrink

cssshrink

Unless your regular shrink who charges $300 an hour, this guy does his work for free, slimming down your CSS and removing un-necessary code.

CSS Beautifier

beautifier

Take your ugly, unformatted CSS and turn it into a masterpiece.

Spin Kit

loadicon

I could stare at them all day, and nothing’s ever going to load. Spin Kit is your source for CSS loading icons.

PX to EM conversion

px-em

Math is hard. PX to EM will take care of the number crunching for you. Enter your original size and required size and it’ll math it up and give you an EM equivalent.

Type Scale

typescale

How big is that font? It’s big. How big is the next size up? Bigger.

The SVG Font Machine

svgfont

Turn your SVG icons into a usable font.

Fontello

fontello

Take icon sets from the known joints like Font Awesome and turn them into a font.