Free Apps & Tools For Working With CSS

by Bradley Nice, Content Manager at ClickHelp.com — software documentation tool

For web developers and designers CSS is like a second native language. CSS or Cascading Style Sheets is a markup language. When paired with HTML, CSS allow a developer to decide and define how a web page or a website will eventually look or how it will appear to the visitors of the web platform. Some of the elements which CSS has an impact on include font size, font style, the overall layout, the colors and other design elements.

In this post I’ve gathered a wide range of different tools for speeding up and making your work with CSS easier.

extractCSS — a tool for extracting ids, classes and inline styles from an HTML document and then outputting them as a CSS stylesheet.

CSScomb — a coding style formatter which sorts CSS properties into a specific pre-configured order.

CSS Compressor — a little app which minimizes and compresses your CSS.

Live CSS Editor — a Chrome and Safari extension that allows you to freely write CSS rules on any site and instantly see the results.

px-em — a tinyl tool that will work out the EM sizes from PXs. Just add the parent PX size in the box, the required size in the bottom and you’re done.

RQRWDC (Really Quick Responsive Web Design Calculator) — a responsive web design tool that allows you to work out an elements width in % from PX.

flat UI colors — a huge collection of inspiring flat UI colors that you can easily copy and paste into your own stylesheet.

PatternBolt — a collection of SVG patterned backgrounds, packed into a single CSS/SASS file.

iconizr — a tool for converting SVG images into a set of CSS icons.

CSSynth — a handy little app that will help to run CSS animations in order.

Duri.me — a Data URI converter that will turn images into base64 encoded strings that can then be inputted directly in your HTML and CSS files.

CSS Shapes Editor — a Chrome extension that offers controls to create and edit CSS Shapes values like polygon(), circle() and ellipse() on any selected element.

CSS Diner — a simple little game that will help you learn about CSS selectors. All you have to do is type in the correct selector to complete each level. Go on, give it a try.

If you know any other free apps and tools for working with CSS, please suggest and I’ll add them to the list.

Have a nice day!

Bradley Nice,
Content Manager at ClickHelp.com — best online documentation tool for SaaS vendors