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:

• omg-red
• omg-yellow
• omg-blue
• omg-green
• omg-black
• omg-white

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:

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:

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:

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>

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:

• .square (ul)
• .disc (ul)
• .decimal (ol)
• .lower-alpha (ol)
• .upper-alpha (ol)
• .lower-roman (ol)
• .upper-roman (ol)

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>

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