The old cSans (0.x)

If you are looking for a css framework compatible with old browsers (IE5+), take a look to cSans 0.x in Google Code.

cSans 1.x

The new version of cSans is supported only by modern browsers and mobile devices (IE8+, FF3.5+, iOS, etc) because its usage of modern css3 properties.

The aim of cSans 1.x is to allow build modern and flexible websites for computers, tablets and mobiles. It's divided in the following utilities:

Reset the default styles

Reseting styles allows build web pages and apps easily, controlling all sizes and spaces from zero

By default, all styles will be reset. All headers have the same size, without margin and paddings. The new html5 elements (article, aside, footer, figure, etc) will be treated as block elements.

The form elements (textarea, inputs, etc) have the "box-sizing" property as "border-box" to facilitate defining a specific width. The textareas have the same appearance to textfields for consistency purpose (in webkit and mozilla).

By default, the list elements (ul and dl) don't have list style.

The default font family is Helvetica (and then, Arial) and by default the text rendering is "optimizeLegibility", that uses the kerning provided by the font.

But get text styles too!

Not always is a good idea reset everything. For example in an article, the h1 and h2 elements don't have to look equality, the ul list must be bullets, etc. So there is the class "text" that provide a more text-based reset, with spaces between paragraphs, various header sizes, etc. So you can build the webpage interface reseting all elements and reserve a space for the articles with typography features.

Basic utilities

cSans provides basic utilities to some specific purposes:

• You can replace any text for an image (a logo, for example) with the class "image"
• You can convert a ul/ol element in horizontal buttons with the class "tabs"
• You can convert any block element in an inline element with the class "inline". Applied to an ul/ol, all list items will be inline.
• You can float to left and right elements with the classes "left" and "right". The class "right-right" floats the element to right and align its content to right.
• You can apply the clearfix method with the class "clear"
• You can hide an element with the class "hide". The class "hide-accesible" hide an element maintaining its accesibility (doesn't apply display:none).
• You can make an element simulating a link (cursor pointer, underline, etc) with the class "link"
• You can change the list style type of an ol element using the classes "lower-alpha", "upper-alpha", "lower-roman", "upper-roman" and "decimal".
• In search inputs, you can make the input behave like a text input (in webkit) with the class "no-appearance".