By Paul Andrew

extractCSS is a tool for extracting ids, classes and inline styles

For this post I have collected 25 small web-based apps and tools that will in one way or another offer quick solutions to many of those frustrating and time-consuming tasks you will often have to overcome when working with CSS.

There are apps that will calculate EM sizes from PXs, tools for minimizing and cleaning your CSS, resources for generating CSS animations, converters for turning images into base64 encoded strings, generators for creating Flexbox layouts, and much more. You may not need them today but they are all worth bookmarking, as you just never know when you will need them.

extractCSS

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

CSS Beautifier

CSS Beautifier will automatically format your CSS styles so that they are consistent and easier to read.

CSS Beautifier will automatically format your CSS styles

CSScomb

CSScomb is a coding style formatter that will sort CSS properties into a specific pre-configured order.

CSScomb is a coding style formatter that will sort CSS properties

ProCSSor

Just like CSScomb and CSS Beautifier above, ProCCSer offers formatting functionalities, but does give you far more control over the output.

ProCCSer offers formatting functionalities

CSS Compressor

CSS Compressor is a handy little app that will minimize and compress your CSS.

CSS Compressor is a handy little app that will minimize and compress your CSS

StyleStats

StyleStats is a little tool (and Node.js library) for collecting useful CSS stats from any stylesheet. Just input the URL and click ‘parse’.

StyleStats is a little tool for collecting useful CSS stats

CSS Trashman

CSS Trashman examines your site’s live DOM and reverse engineers a new, more elegant definition that captures styles down to the pixel. The generated CSS (or Sass) will be customized for your site and ready to be downloaded and dropped into place.

CSS trashman examines your site's live DOM and reverse engineers

Live CSS Editor

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

Chrome extension Live CSS Editor

px-em

px-em is a really, really small 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.

px-em is a really, really small tool that will work out the EM sizes from PX

RQRWDC

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

RQRWDC Really Quick Responsive Web Design Calculator is a responsive web design tool

Fibonacci

Fibonacci is a really handy generator for creating Flexbox layouts.

Fibonacci is a really handy generator for creating page layouts using Flexbox

Flat UI Color Picker

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

a huge collection of inspiring flat UI colors

PatternBolt

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

PatternBolt is a collection of SVG patterned backgrounds

CSS Animation Generator

This is a tool for quickly generating small CSS animations. Just copy and paste the generated CSS and HTML into your own project.

This is a tool for quickly generating small CSS animations

CSS Shorthand Generator

Shrthnd is a handy tool that converts CSS properties into shorthand, making shorter and more readable stylesheets.

Shrthnd is a handy tool that converts CSS properties into shorthand

iconizr

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

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

CSSynth

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

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

Create CSS3

Create CSS3 is an app that allows you to generate all of the CSS3 code you will ever need quickly and easily, with fallbacks where required.

Create CSS3 is an app that allows you to generate all of the CSS3 code

Flexplorer

Flexplorer is a simple tool for generating flexbox code for lists.

Flexplorer is a simple tool for generating flexbox code for lists

Duri.me – DataURI Converter

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

Duri.me is a Data URI converter

CSS Shapes Editor

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

Gridpak Responsive Grid Generator

Gridpak is a useful tool for generating a responsive grid system. It gives you control over every aspect of the grid from column padding to where ‘break points’ occur.

Gridpak is a useful tool for generating a responsive grid system

CSS Diner

CSS Diner is 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.

CSS Diner is a simple little game that will help you learn about CSS selectors

Also Worth Mentioning

  • CSS Vocabulary – A CSS reference library.
  • Layoutit – A Bootstrap drag & drop interface builder.
  • NTH-TEST – A nth-child and nth-of-type tester.
  • Picssel-Art – An app for creating pixel art using CSS.

Finished!

If you enjoyed this collection of apps, you’ll also like the selection of tools I published last month, the post includes tools that will convert Illustrator files to HTML, guides that will help you visualize CSS3 Flexbox Properties, web apps to quickly browse and select Google fonts, and much, much more.

The post 25 Free Apps & Tools For Working With CSS appeared first on Market Blog.

Read more here:: 25 Free Apps & Tools For Working With CSS