Como utilizar os estilos de layout?

As distintas grellas coas que conta cSans usan os mesmos nomes para as clases (salvo casos excepcionais) para facilitar o aprendizaxe. As grellas dispoñen de dous tipos de clases: columnas e espaciados.

As clases de columnas comezan polo prefixo col + número de columnas. Dependendo do tipo de grella que se estea empregando, podemos atopar algunhas clases con anchos moi específicos que en principio non encaixan coa grella base. Por exemplo, nunha grella de 12 columnas, se queremos repartir todo o ancho en 5 columnas iguais non poderíamos porque 12 non é múltiplo de 5. Neste caso podemos solucionar o problema coa clase .col5c. O mesmo pasa cunha grella de 10 columnas, no que temos a clase .col3c.

As clases de espaciado comezan polas letras t, b, l, r (top, bottom, left, right) seguidas polo número de unidades de espacio que usaran. Se o espaciado é horizontal (l, r) o espacio equivale a columnas e pódense empregar números negativos. Por exemplo, a clase .r2 equivale a un espaciado pola dereita de 2 columnas, pero a clase .r-2 sería un espaciado negativo pola dereita de 2 columnas. Tamén existen as clases r05 e l05, que separan unicamente media columna pola dereita ou a esquerda. No espaciado vertical (t, b) o espaciado realizase en múltiplos de 10px. Por exemplo, a clase .t4 proporciona un espaciado superior de 40px.

Exemplos:

• col12: Crea unha columna de 12 módulos (o seu ancho depende da grella base que esteamos empregando)
• col8 l2: Crea unha columna de 8 módulos cunha separación de 2 módulos pola esquerda
• col4 l-1: Crea unha columna de 4 módulos cunha separación negativa pola esquerda de 1 módulo (solaparía a columna que ten á esquerda)
• col4 t3: Crea unha columna de 4 módulos e deixa unha separación pola parte superior de 30px

Aqui pódense ver exemplos de distintas grellas base:

• Grella de 24 columnas e 950px de ancho total
• Grella de 12 columnas e 940px de ancho total
• Grella de 10 columnas e 1000px de ancho total

Ademais dos estilos de columna e separación, existen algúns estilos máis:

• .page: Capa que contén todos os elementos da páxina. Ten o ancho total da grella base e está centrado (se a grella base é centrada).
• .grid: Mostra a grella base de fondo sobre o elemento aplicado. Serve de guía.
• .p1: Proporciona un paddin de (xeralmente) 10 px todo ó redor. Serve para usar conxuntamente coa clase .content no interior dunha columna para separar o contido do borde da capa, por exemplo:

<div class="col5">
	<div class="content p1">
		Contido da capa
	</div>
</div>

• .p2: Igual que .p1, coa diferencia de que se deixan 20px de separación.