Browse By

14 Useful CSS Generators And Tools

It is quite lovely to see that new tools are launched pretty often to help web designers or web developers do their work easier. Although most of these below are new I’ve also included a few oldies but goldies that I’ve used over the years.

CSS LINT

csslint

CSS Lint is a tool to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.

G5 Framework

framework.gregbabula

The 1KB CSS

1kbgrid

Other CSS frameworks try to do everything—grid system, style reset, basic typography, form styles. But complex systems are, well, complex. Looking for a simple, lightweight approach that doesn’t require a PhD? Meet The 1KB CSS Grid.

CSS Compressor

csscompressor

Use this Cascading Style Sheets, CSS Compressor to compress CSS to reduce CSS code size and make your web pages load faster. You can select from four levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression.

CSS Formatter and Optimiser

codebeautifier

Columnal CSS grid system

columnal

The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. The elastic grid system is borrowed from cssgrid.net, while some code inspiration (and the idea for subcolumns) are taken from 960.gs.

 

Grid Designer

grid.mindplay

inuit.css

inuitcss

inuit.css is built to work on smaller screens (such as tablets) and tiny screens (such as phones) straight out of the box with minimal effort.

 

Fractal

getfractal

See exactly which lines of code are not supported in over 24 email clients. Email designers that are tired of trawling through check lists, this is for you.

CSS Crush

csscrush

The CSS Crush script takes one CSS file as input, scans for @ import directives, and includes them directly in the output file so no http requests are wasted.

 

Typetester

typetester

The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.

CSS Formatter and Optimiser

css_optimiser

Skeleton

getskeleton

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

Layer Styles – A HTML5 app for creating CSS3 in a intuitive way

layerstyles

WhatFont Tool

whatfont

What is the easiest way to find out the fonts used in a webpage? Firebug or Webkit Inspector? No, that’s too complicated. It should be just a click away.

 

Leave a Reply

Your email address will not be published. Required fields are marked *