In this article I will be talking about some tools and websites I’ve only recently discovered. They may, or may not be new but I think they are very useful and worth sharing with a wider community.

1) 1140px CSS Grid

The 1140px CSS grid is a pre-made CSS frame ready to tackle the age old problem of different screen resolutions – but more than that, it allows your website to happily change for use with mobile devices too. It is free and available at: http://cssgrid.net/

2) CSS3 Generator

http://www.css3.me/ is a very easy to use CSS3 generator and when I first set eyes upon it it looked like any other CSS3 generator, but it does actually have some nice features available and I found myself using it more often than I had expected. It attempts to provide code for IE6+7 but often simply writes comments into the code instead. Css3.me was designed by Eric Hoffman and coded by Peter Funk.

3) CSS3 Please!

Very similar to above, css3please.com is a CSS3 generator of sorts but it differs quite substantially to css3.me in the fact that it deals with the raw CSS coding, with the site itself looking like a text editor. I actually learnt a great deal from this site, an example being the ordering of CSS3 properties with different prefixes, and why.

4) Code Beautifier

Have some old messy code (don’t we all) that you want re-organising? Code Beautifier is based on csstidy and it claims it is a “CSS Formatter and Optimiser”. It does an efficient job of sorting a tangled mess into standardised code which can then be minified or arranged for readability.

5) CSS Design Awards

CSS Design Awards is less of tool as such, it is a showcase for brilliant modern CSS based designs. It is also an area worth looking at to seek inspiration for an up and coming design. It is updated daily with a new winner each day but it also has many previous winners to look through.

6) Google Web Fonts

Google Web Fonts is Awesome! It takes a mundane and annoying task, which is to implement the different font types into CSS and makes it super easy by allowing you to link directly to a particular font’s stylesheet. The down side is that you can only use the fonts listed on their site, but the list is growing fast with new fonts being added. It also has a great variation of fonts available.

7) Border Radius

Border-Radius.com is by far the simplest tool for generating CSS3 rounded corners that I have found. Using the correct syntax and ordering, this tool will also allow you specify the specific radius of each corners. Great tool, No Faff.

8) Css-Tricks Snippets

Css-Tricks is a blog run by Chris Coyier which contains a section called ‘Snippets’. These are small blocks, usually only a few lines, of coding to do a specific thing. The CSS section has many different items and makes for an interesting read. Each snippet usually includes a demo and has a comments section underneath with user feedback.

If you liked this article, please leave a comment or share it below.