Github libera Primer, su toolkit CSS al estilo Bootstrap

Al igual que Twitter lo hizo hace ya un buen tiempo, ahora es Github quien pone a disposición de todos su propio Framework CSS.

El framework, o como se lo conoce habitualmente, el toolkit CSS viene acompañado de las directrices que definen es estilo de maquetación HTML y CSS utilizado por Github. Si bien inicialmente no tiene pensado competir con otros frameworks como Bootstrap, este toolkit está pensado para ser compartido con la comunidad y bien dejan en claro que la colaboración de todos es valorada, para mejoras y correcciones del mismo.

Liberado bajo licencia MIT, Primer, incluye estilos de tipografía, componentes HTML como botones, formularios, pestañas (tabs) y el paquete de íconos Octicons de Github.

¿Cómo funciona?

Pues de manera muy similar a Bootstrap, si alguna vez utilizaste el Framework de Twitter no tendrás problemas para entender Primer.

Para utilizar las clases y elementos debes definir la clase .container

<div class="container">
<!-- tu contenido aquí -->
</div>

Container aplica por defecto un ancho de 980px, y utiliza la propiedad margin para centrar el contenido.

De la misma manera para definir una fila, en lugar de row debes utilizar la clase .columns. Además cada columna individual debe llevar la clase .column <div class="column">

Las grilla tiene también una manera particular de definir las columnas. Se deben definir las fracciones que indican la distribución de las columnas. Por ejemplo, si tenemos 4 columnas y queremos definir una columna que ocupe tres cuartas partes utilizamos la clase .three-fourths y una segunda columna que mida una cuarta parte se definiría .one-fourth. Además debes agregar a éstas la clase .column. El resultado sería:

<div class="container">
<div class="columns">
<div class="three-fourths column"> Tres Cuartos
</div>
<div class="one-fourth column"> Un Cuarto
</div>
</div>

¿Qué te parece? Para más información acerca de Primer CSS visita el sitio oficial del toolkit aquí.