Tag Archives: css

960 Grid System

Essence

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. Read more.

Dimensions

The 12-column grid is divided into portions that are 60 pixels wide. The 16-column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns. View demo.

Purpose

The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements.

 

Homepage: http://960.gs/

Font Awesome

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.Font Awesome  the iconic font designed for Bootstrap

 

Homepage: http://fortawesome.github.io/Font-Awesome/

Sprite Cow

Sprite Cow is another one which is open source and works very effective by auto-recognizing the different elements inside a single image.

So, you design the sprite image in your favorite imaged editing application, upload it to Sprite Cow and simply click (or click + drag) on each element to get their widthheight and background-position as a CSS rule.

Homepage: http://www.spritecow.com

 

Tabifier

The Tabifier is a tool to properly indent computer code. The style it produces is a mix of my personal preferences for indentation plus what I could manage to make a program produce from dirty source.

The Tabifier currently supports CSS, HTML, and C Style code; the latter being anything that uses curly braces to start and end blocks, and semicolons to terminate statements. JavaScript and PHP both fall into that latter category. (For JavaScript, only when you put the semicolons in, which you always should even though they’re technically optional.)

Homepage: http://tools.arantius.com/tabifier