HTML5 Zone is brought to you in partnership with:

My name is Jean-Baptiste Jung and I’m a 29 years old web developer and professional blogger. I was born and raised in Paris, France and I now live in Belgium with my wife and our adorable cat. I first used the internet in 1998, built my first website in 2001 and finally started to work as a professional web developer in 2005. In 2010, I left my job and created my own web development studio. jb is a DZone MVB and is not an employee of DZone and has posted 55 posts at DZone. You can read more from them at their website. View Full User Profile

Super useful tools for CSS coding

07.16.2013
| 1986 views |
  • submit to reddit

When you develop a website or web app, having the right tools can definitely help you to save a lot of time. In this article, I have compiled a list of fresh and super useful tools for CSS coding.

Pure CSS


Brought to you by Yahoo, Pure is a set of CSS modules that you can use as a basis in every web project. It makes CSS development easier and the whole framework looks really clean and professional. If you haven’t already, give it a try!

More info: http://purecss.io/

CSS only responsive navigation


Responsive layouts are very popular on the web right now, and this is definitely a good thing in my opinion. Here is a downloadable and reusable responsive navigation menu, made in CSS only.

More info: http://valdelama.com/css-responsive-navigation

CSS Trashman


It’s very hard to keep your CSS files clean and compact when coding for a big project. Don’t worry though, CSS Trashman is here to help. This useful online tool examines your site, compacts styles and finally let you download a super clean version of your site CSS file so you can safely delete them.

More info: http://www.csstrashman.com/

Glue


Instead of loading dozens of images, it is way better to load one big image and use the technique called CSS sprites. Glue is a simple command line tool to transform a set of images into a single file so you can easily use CSS sprites on your website. Super useful.

More info: https://github.com/jorgebastida/glue

Helium CSS


On large stylesheets, it is not so rare that several styles are not used on your website. Unfortunely, it’s not easy to find them. Helium is a JavaScript-based tool that runs in your browser and detect unused styles from your CSS file.

More info: https://github.com/geuis/helium-css

Topcoat


Topcoat is a very neat and clean library of CSS classes specialized in form elements: buttons, checkboxes, sliders, etc. A super easy way to make your website or app look good in minutes.

More info: http://topcoat.io/

.Fitgrd


.Fitgrd is a solid foundation to build up your own responsive website. Everything but the grid is up to you and gives you the ability to save a lot of dispensable code.

More info: http://www.fitgrd.com/

Normalize.css


Normalize.css is a HTML5-ready alternative to CSS resets. It makes browsers render all elements more consistently and in line with modern standards. It is used by many popular sites such as Twitter Bootstrap, Soundcloud, TweetDeck, and more.

More info: http://necolas.github.io/normalize.css/

Bear CSS


Bear CSS is a beautiful website, but also a super useful tool. Simply create a HTML document and upload it. Bear CSS will automatically generate a downloadable CSS file based on the HTML elements used. A great time-saver!

More info: http://bearcss.com/

Published at DZone with permission of jb j, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)