¿Cómo utilizar los estilos de la rejilla base?

Las distintas rejillas con las que cuenta cSans poseen los mismos nombres para las clases (salvo casos excepcionales) para facilitar el aprendizaje y disponen de dos tipos de clases: columnas y espaciados.

Las clases de columnas empiezan por el prefijo col + número de columnas. Dependiendo del tipo de rejilla que se esté utilizando, podemos encontrar algunas clases con anchos muy específicos que en principio no encajan con la rejilla base. Por ejemplo, en una rejilla de 12 columnas, si queremos repartir todo el ancho en 5 columnas iguales no podríamos porque 12 no es múltiplo de 5. En este caso podemos solucionar el problema con la clase .col5c. Lo mismo pasa con una rejilla de 10 columnas, en la que tenemos la clase .col3c.

Las clases de espaciado empiezan por las letras t, b, l, r (top, bottom, left, right) seguidas por el número de unidades de espacio que usarán. Si el espaciado es horizontal (l, r) estas unidades equivalen a columnas y se pueden utilizar números negativos. Por ejemplo, la clase .r2 equivale a un espaciado por la derecha de 2 columnas, pero la clase .r-2 sería un espaciado negativo por la derecha de 2 columnas. Tambien existen las clases r05 e l05, que separan unicamente media columna por la derecha o la izquierda. En el espaciado vertical (t, b) el espaciado se realiza en múltiplos de 10px. Por ejemplo, la clase .t4 proporciona un espaciado superior de 40px.

Ejemplos:

• col12: Crea una columna de 12 módulos (su ancho depende de la rejilla base que estemos utilizando)
• col8 l2: Crea una columna de 8 módulos con una separación de 2 módulos por la izquierda
• col4 l-1: Crea una columna de 4 módulos con una separación negativa por la izquierda de 1 módulo (solaparía la columna que tiene a la izquierda)
• col4 t3: Crea una columna de 4 módulos y deja una separación por la parte superior de 30px

Aqui se pueden ver distintas rejillas base:

• Rejilla de 24 columnas y 950px de ancho total
• Rejilla de 12 columnas y 940px de ancho total
• Rejilla de 10 columnas y 1000px de ancho total

Además de los estilos de columna y separación, existen algunos estilos más:

• .page: Capa que contiene los elementos de la páxina. Tiene el ancho total de la rejilla base y esta centrada (si la rejilla base está centrada).
• .grid: Muestra la rejilla base de fondo sobre el elemento aplicado. Sirve de guía.
• .p1: Proporciona un padding de (por lo general, aunque depende de la rejilla) 10px todo alrededor. Sirve para usar conjuntamente con la clase .content en el interior de una columna para separar el contenido del borde de la capa, por ejemplo:

<div class="col5">
	<div class="content p1">
		Contenido de la capa
	</div>
</div>

• .p2: Igual que .p1, con la diferencia de que se dejan 20px de separación.