PrettyCSS

This program is a JavaScript based CSS pretty printing / beautification tool that also does structure validation.  It can run in a browser (as seen below) or on a server with node.js or Rhino.  You can tie into it so that your CSS is minified or is always in a readable format.  If you add this to your SCM system as some sort of hook so that every time someone commits CSS to a repository, it can get automatically validated and massaged into the way you want it to look.

Learn More

  • Command-Line - There's a command-line interface so you can integrate the tool into commit hooks for the SCM of your choosing
  • Download - Get the packaged version or maybe peek at our GitHub repository
  • Installation - How to get the programs set up for your environment
  • Lint Checking - What problems are detected by the software
  • Object Methods - The library is written in JavaScript, ready for your use in projects

Try It Yourself

Below is the live demo of the PrettyCSS engine hard at work.  As you type in CSS, the other text area will get updated with how the CSS structure would be interpreted by browsers.  This means that sometimes you will type in things and they won't be seen in the output area until they get fixed.  To see what I mean, try typing in "a {garbage}" and you won't see "garbage" in the output because the structure of the declaration is invalid.  You will be able to see the parsing error on the Errors tab and hopefully that will provide enough insight to where and why the CSS was considered invalid.

The gadget spec URL could not be found
The above Google Gadget will use the latest committed version from the github repository automatically, so it might be a little newer than what you'll find in our released versions.

Obtaining PrettyCSS

You can head over to the Download page to get a released version, plus the Installation page will help you decide how to get the library and command-line program installed on your system.  We are also hosting the files at our github repository, in case you want the bleeding edge of awesomeness.

Comments