cSans

cSans is a light, flexible and modern CSS framework, compatible with modern browsers such as IE8+, Firefox, Safari, Opera... & other platforms

Debug tools

There is a class collection for debuggin purposes, that creates an outline border to specific element. There is one class for each colour:

For example, lets debug two elements

<p class="omg-red">
	<a href="#" class="omg-blue">A link with omg-blue</a>
</p>

The result of this code would be something like this:

A link with omg-blue

Text styles

By default, cSans remove the margins and paddings of all block elements but you can use the class "text" to recover these styles for long texts (such as articles, posts, etc). Every header element, paragraph, list, etc inside a "text" class will have a more typography based default style.

This is an example of how use this class:

<article class="text">
	<p>This is a default paragraph inside a text class</p>
	<ul>
		<li>Element style</li>
		<li>Element style</li>
		<li>Element style</li>
	</ul>
</article>

<p>This is a default paragraph</p>
<ul>
	<li>Element style</li>
	<li>Element style</li>
	<li>Element style</li>
</ul>

The result of this code would be something like this:

This is a default paragraph inside a text class

  • Element style
  • Element style
  • Element style

This is a default paragraph
Element style
Element style
Element style

Image replacement

The class "image" hide the text of any content and apply an image as background. This is usefull to use images in an accesible way, for example in logotipes or image-based titles.

To use this class you only have to define which image you want as background and its width and height. The class can be applied to inline elements (such links, strong, em, span) or block elements, and even list elements (ol and ul) to replace each list item for one image. If the element is a link or contents one (for example an h1 with a link inside) the link will be clicable. This is a simple example of how to use:

First, define the image and its size in a class:

.google-logo {
	background-image: url('http://www.google.es/intl/en_com/images/logo_plain.png');
	width: 297px;
	height: 110px;
}

Now apply the classes "image" and "google-logo" to the desired element:

<h1 class="image google-logo">
	<a href="http://google.com">Go to google</a>
</h1>

The result of this code looks like this:

Go to google

Tabs and inline classes

The class "inline" convert any block element in an inline element. You can apply also to an list element (ul or ol) to make inline its list items. For example:

<p class="inline">This is an inline paragraph</p>
<em>following by</em>
<ul class="inline">
	<li>some</li>
	<li>inline</li>
	<li>list items</li>
</ul>

This is an inline paragraph

following by
  • some
  • inline
  • list items

The class "tabs" applied to list elements converts them in tabs, floating to left each list item. For example:

<ul class="tabs">
	<li><a href="http://google.com">Google</a></li>
	<li><a href="http://yahoo.com">Yahoo</a></li>
</ul>

This code looks like following (with no other styles):

List styles

There is some classes to change easily the list-style-type of any ordered or unordered list element to the most popular values:

Example of use:

<ol class="upper-roman">
	<li>One</li>
	<li>Two</li>
</ol>

<ol class="lower-alpha">
	<li>One</li>
	<li>Two</li>
</ol>
  1. One
  2. Two
  1. One
  2. Two

More tools

There are some more usefull classes:

left
Float an element to left
right
Float an element to right
right-right
Float an element to right and align its content to right (text-align)
clear
Applies the clearfix method. By default, all elements article, aside, details, div, fieldset, figure, footer, header, section and summary have this method applied.
no-collapse
Destroy the top margin collapse.
hide
Hides an element (applies display: none)
hide-accesible
Hides an element in an accesible way (place it outside of the browser window)
link
Apply the link style of a non-link element (for example a spam). Define the cursor as "pointer" and text-decoration "underline".
row
Creates a row layout with an element (float and set the width 100%)
no-appearance
Remove the default appearance in webkit search fields, unifying to the text fields
Fork me on Github