Estos días he estado trabajando con foundation, un entorno de trabajo para CSS. Mis impresiones han sido bastantes buenas en general. En especial su sistema de rejillas que me ha parecido muy cómoda y rápida de entender.

Foundation 5 está diseñado para mobile first que basicamente es empezar a trabajar primero dimensiones móviles y termina con dimensiones grandes.

Las rejillas

Tenemos un par de clases generales, .row que genera un bloque horizontal que contendrá .columns o .column que se encarga de definir el modelado de la caja, aplicando una posición relativa un flotador (float) y ciertos espacios.

<div class="row">
  <div class="column">
    Columna
  </div>
  <div class="column">
    Columna
  </div>
  <div class="column">
    Columna
  </div>
</div>

Acompañaremos a estas columnas de otras clases que se encargan de darle medidas para diferentes dimensiones.

.small (max-width 640px)
.medium (min-width 641px and max-width 1024px)
.large  (min-width 1025px and max-width 1440px)
.xlarge (min-width 1441px and max-width 1920px)
.xxlarge (min-width 1921px)

Y estas clases irán con el número de columnas que queremos que ocupe. Suponiendo que estamos trabajando con la rejilla por defecto, 12 columnas:

<div class="row">
  <div class="column small-12">
    Columna que ocupa todo el ancho de la fila
  </div>
  <div class="column small-6">
    Columna que ocupa la mitad de la fila
  </div>
  <div class="column small-4">
    Columna que ocupa un tercio de la fila
  </div>
</div>

Si no tienes puntos de ruptura (breackpoints) para otras dimensiones con esta definición sería suficiente ya que las small- se expandirán hasta anchuras mayores.

Otras dimensiones

Para dimensiones que van de 641px a un máximo de 1024px usamos clase .medium y cuando estamos en esa dimensión predomirá esta clase frente a las de menor anchura.

Vamos a leer un poco de código:

<!-- 
Para dimensiones pequeñas el contenido de esta columna ocupará 12 columnas, 
es decir, se expandirá a todo el ancho pero cuando lleguemos a una 
dimensión media (min-width 641px and max-width 1024px) ocupará 6 columnas 
del ancho y cuando llegue a large (min-width 1025px and max-width 1440px) 
ocupará un tercio del ancho.
-->
<div class="row">
  <div class="column small-12 medium-6 large-4">
    Columna que ocupa todo el ancho de la fila
  </div>
</div>

Muy versátil, rápido e intuitivo. Podemos crear una rejilla estable en cuestión de minutos.


Otras clases de ayuda.

1.1 Mover Columnas (offset)

Se encargan de mover las columnas a lo largo del eje X. Además podemos acompañar a los offset de prefijos de dimensión, small-, medium- o large- y quedará definido solamente para esas dimensiones.

<!-- 
Aquí tenemos un bloque de foto texto, el texto ocupa toda la fila 
para dimensiones pequeñas y tan solo 2 columnas para dimensiones medias, 
además si es dimensión media moveremos esta columna una columna 
hacia la derecha usando medium-offset-1, para small dimensiones esto no afectará.
-->
<div class='wrap'>
  <div class='row'>
    <div class='column small-12 medium-2 medium-offset-1'>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In porro, molestias quas. Amet, impedit, atque! Autem ad fuga veniam eum aliquam possimus, modi facilis, illum quod consequuntur laboriosam commodi eveniet.</p>
    </div>
    <div class='column small-12 medium-8'>
      <img src='http://lorempixel.com/600/600'>
    </div>
  </div>
</div>

[ver demo]

1.2 Empujar y traer columnas (push y pull)

Esta clase es muy potente, podemos empujar (push) o traer (pull) contenido especificando una vez más para qué dimensiones.

<div class='wrap'>
  <div class='row'>
    <div class='column small-12 medium-2 medium-push-10'>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In porro, molestias quas. Amet, impedit, atque! Autem ad fuga veniam eum aliquam possimus, modi facilis, illum quod consequuntur laboriosam commodi eveniet.</p>
    </div>
    <div class='column small-12 medium-8 medium-pull-4'>
      <img src='http://lorempixel.com/600/600'>
    </div>
  </div>
</div>

[ver demo]

1.3 Centrar columnas

Usando de nuevo el prefijo para medidas y -centered podemos centrar esa columna para la medida.

<!-- 
Aquí tenemos un titular que se centra cuando es una dimensión grande 
pero para menores dimensiones la columna se extiende a lo largo de la fila.
-->
<div class='wrap'>
  <div class='row'>
    <div class='column small-12 large-2 large-centered'>
      <h1>Lorem ipsum dolor sit amet</h1>
    </div>
  </div>
</div>

Conclusión

Existen muchos motivos para usar un framework para tu css, estabilidad, robusted, soporte, mantenibilidad, otras muchos para no usarlo, te encajona en un patrón, mucho código que no necesitas, semántica en las tags, al final depende de uno y de las necesidades del proyecto aventurarse a hacer algo con un framework, mi consejo es que te asegures de entender bien cómo funcionan las cosas, qué es lo que aplica una clase por detrás y estudiar un poco el estado del proyecto antes de meterse. Para ello puedes ver el número de commits en github o el número de gente que está trabajando en este framework.

Fundation es una buena elección, tiene más de 500 contributors y la versión 5 es muy jugosa, por supuesto tiene muchas otras cosa que aquí no te he mostrado, componentes, slides, dropdown, listas, … y todo lo que necesitas para cubrir las necesidades de tu proyecto.



¡Feliz código!