Iniciándonos en grids con Susy 2

17/11/2014
Iniciándonos en grids con Susy 2

Tras haber tenido multitud de problemas usando otros grids, os voy a presentar Susy. Un grid más para SASS, más potente que nuestros grids tradicionales. Tal vez pueda ser más complejo su uso avanzado, pero sabiendo varias nociones básicas que comentaré a continuación nos será más sencilla su comprensión y aprendizaje inicial. Aunque esto es solo una pequeña parte…

¿Por qué Susy?

Últimamente, con la utilización de nuestros tradicionales sistemas de grids, se han ido teniendo varios de problemas como la no correcta adaptación a ciertos dispositivos dependiendo de la complejidad de nuestro diseño. 

La flexibilidad de nuestro framework tradicional se limita a ciertas resoluciones sin llegar a tener del todo en cuenta la variedad de dispositivos que podría haber entre cada uno de sus breakpoints base, sin tener en cuenta lo pesado que nos puede resultar a veces tener que incluir (y modificar) clases en el HTML para que todo pueda ser ‘flexible’.

Susy es un framework más para Sass que nos proporciona un grid que podemos customizar según las cualidades que deba poseer nuestro proyecto, además de darnos una mayor potencia y flexibilidad que los grids tradicionales. En este artículo os voy a enseñar nociones básicas de Susy 2.

Instalación

Suponiendo que tenemos Ruby instalado en nuestro equipo, y si no tenemos ya Sass, debemos instalar esta gema con:

sudo gem install sass

Si no es el caso y ya teníamos Sass, es importante comentar que Susy solo funciona a partir de la versión 3.3, deberíamos entonces asegurarnos que nuestra gema está actualizada, y escribir esta línea en nuestra consola si la respuesta es negativa.

sudo gem update

Una vez tengamos Sass, ya podemos instalar Susy:

sudo gem install susy

Por último y sin ser obligatorio, añadiremos Compass. Como caso personal, me gusta trabajar y compilar el Sass usando Compass, además nos aporta facilidades en el uso de Susy (y Sass) que ya iremos viendo con su uso. Entonces:

sudo gem install compass

A la hora de crear nuestro directorio de proyecto con Compass -opcionalmente-, podemos añadirle a nuestro ‘compass create’ de siempre ‘--using susy’ para que se nos cree el directorio correcto para Susy.

compass create --using susy ‘nombre del proyecto’

Una vez finalizada nuestra instalación no debemos olvidar de añadir  la línea require ’susy’ en nuestro config.rb previamente configurado, e importarlo con un @import ‘susy’ en nuestra hoja de estilos, donde también tendremos que importar Compass en este último caso.

Settings en Susy 2

Bien, ya tenemos Susy funcionando y queremos empezar a echar mano de él, para ajustar nuestro contenido al diseño. Pausa; primero debemos echarle un ojo a nuestra configuración inicial. 

Antes de ello deberíamos saber algo sobre los llamados ‘maps’ de Sass. En Susy estos maps se crean con el objetivo de sobreescribir nuestras configuraciones, e implementarlos en nuestros estilos en forma de mixins como os muestro a continuación:

$map1: layout(auto 12 .25 inside fluid isolate);

.my-element {
  @include breakpoint(760px) {
    @include with-layout($map1) {
      ...
    }
  }
}

Realmente el CSS de ese map, se compilaría en el siguiente:

$map: (
  container: auto,
  columns: 12,
  gutters: .25,
  gutter-position: inside,
  math: fluid,
  output: isolate,
);

 

Sabiendo esto, por defecto Susy trae unos ajustes establecidos en un que nos dirá, por ejemplo, si nuestro grid es estático, el número de columnas que tenemos o la medida de nuestro contenedor. Para modificar los valores por defecto solo deberemos crear un map, de nombre $susy, con los valores que deseemos modificar. A continuación os muestro los ajustes por defecto de Susy las opciones que creo que pueden ser más importantes y no tan previsibles.

$susy: (
  flow: ltr,
  math: fluid, | static
  output: float, | isolate
  gutter-position: after | before | split | inside | inside-static,
  container: auto,
  container-position: center,
  columns: 4,
  gutters: .25,
  column-width: false,
  global-box-sizing: content-box,
  last-flow: to,
  debug: (
    image: hide | show | show-columns | show-baseline,
    color: rgba(#66f, .25),
    output: background | overlay,
    toggle: top right,
  ),
  use-custom: (
    background-image: true,
    background-options: false,
    box-sizing: true,
    clearfix: false,
    rem: true,
  )
);

 

Math: Nuestros cálculos en Susy pueden ser fluidos o estáticos. Al ser fluido Susy calculará los span interiores relativos al contenedor; al ser estático, los valores internos se calculan dependiendo del width de las columnas.

Output: La forma en la que nos mostrará Susy la disposición de nuestros elementos. Puede ser de dos tipos:

  • Float: Es la forma por defecto y más común de alinear las diferentes secciones.
  • Isolate: Fue desarrollado con el objetivo de solucionar los errores de redondeo de pixeles en los grid fluidos. Si no os enfrentáis a este bug con vuestros navegadores, lo mejor es no usarlo.

Gutter: Son los espaciados entre las columnas que hemos definido anteriormente con ‘columns’, el valor se calcula (cuando es fluido) dependiendo de las mismas; así .25 sería equivalente a 1/4 del valor de la columna y .5, a la mitad. Sobre las posiciones del gutter:

  • After: Los espaciados son márgenes añadidos después de cada columna. Habría que omitir el margen del último elemento referenciando bien la última columna en nuestro span con last.
  • Before: Los espaciados son márgenes añadidos antes de las columnas. Se omite el primer margen de nuestro primer elemento, añadiendo la propiedad first (de nuevo en nuestro  span) a nuestro primer elemento.
  • Split: Los espaciados aparecen a ambos lados en forma de margen. Podemos tener problemas de alineación con el elemento padre. Por ello es importante añadir nest al definir con un span el elemento padre.
  • Inside: Los espaciados como los que tenemos en split cambian a ser paddings. De nuevo deberemos añadir nest al elemento padre para evitar problemas de alineación.
  • Inside-static: Actúa de la misma forma que inside utilizando los gutters con unidades en lugar de porcentajes y usando el width que puedes definir en $column-setting.

Debug: Esta es nuestra opción para debugear nuestro grid. Nos da la opción de mostrar el grid como imagen y guía y nos permite modificar la forma en la que se muestra e incluso su apariencia y disposición. Puede ser interesante saber que la opción show-baseline, te muestra solo las guías horizontales en caso de tener importado compass, y/o nuestra variable $base-line-height disponible.

¿Problemas con el box-sizing?

Si tenemos problemas ya que no actúa correctamente en nuestros estilos, basta con escribir esta línea:

@include border-box-sizing;

 

Mixins y funciones: el corazón de Susy

Container

Es nuestro ‘wrapper’ para centrar nuestro contenido o simplemente alinearlo hacia un lado, ya que depende de la variable $container-position. Esta variable está definida en nuestro map $susy, en la que por defecto viene automático. Tras esto, incluiremos dicho contenedor en nuestros ‘wrappers’. Además podemos pasar un valor opcional de longitud al incluirlo.  

A continuación os muestro como se haría...

.page-wrapper {
  @include container(960px);
}

... y como se compilaría el CSS:

.page-wrapper {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.page-wrapper:after {
  content: ‘’;
  display: block;
  clear: both;
}

 

Span 

Lo más importante para el uso de Susy. Con este mixin alinearemos nuestros elementos ‘automáticamente’; basta con especificar su tamaño y algún que otro valor en caso de ser necesario.

Para que seamos más productivos Susy nos da más facilidades con su sintaxis abreviada. 

#sidebar {
  @include span('width' [wide/wider] at [location] of 'layout' [last (or another value)]);
}

Esto debería explicarlo detenidamente.

  • Width: las columnas que queremos que mida nuestro elemento.
  • ‘at <location>’: Opcional. Donde queremos que se sitúe nuestra columna. Cuando tenemos nuestro bloque aislado podemos elegir a partir de que columna lo situamos.
  • ‘of layout’: Las columnas que tiene nuestro elemento padre. Susy calcula el valor de las columnas dependiendo del número de columnas padre. Debemos prestar especial cuidado a esto ya que no es lo mismo 4 columnas de 12, que 4 columnas de 8 (en caso de que el elemento padre esté anidado y no mida el 100% de las columnas). Tendremos más de un valor si hemos creado un grid asimétrico, pero eso lo hablaremos otro día.

A este mixin, también podemos añadirle varios atributos:

  • En el caso de last, definimos que es el último elemento de la fila. Se eliminarán los espaciados derechos. 
  • Con first, diremos que es el primer elemento y se eliminarán los espaciados izquierdos.
  • Nest es muy importante en grids de tipo split o inside, para indicar que es el elemento padre. Mediante nest, Susy elimina ambos espaciados laterales.
  • Isolate nos aísla el elemento pudiendo situarlo a partir de la columna que deseemos, definiendo una localización con ‘at’.
  • Wide / Wider: Opcional. A veces se puede llegar a necesitar un gutter (o dos) aparte de los que tenemos por defecto. Esto es opcional y su uso no es demasiado común. También tenemos la opción no-gutters, de la que pienso que puedo omitir su descripción dada la obviedad para evitar redundancia.

Tal vez así, rápidamente, pueda parecer complejo; por ello os muestro un simple ejemplo antes de que empecéis a jugar con estos valores:

.my-content {
  @include span(first 9 of 12);
  .my-isolate-block {
    @include span(isolate 3 at 2 of 9);
  }
}
.second-sidebar {
  @include span(3 of 12 last);
}

 

Así se mostraría:

Gutter

Por último (por hoy) con esta función definiremos que nuestro gutter se mostrará suponiendo que nuestro diseño tiene el número de columnas que escribamos entre los paréntesis.

.gutter-block {
  @include gutter(8);
}

Y ahora podéis probar a adaptar vuestro grid y seguir ampliando conocimientos. Sentiros libres de ir comentando experiencias o escribir en caso de alguna duda o comentario.

Añadir nuevo comentario

HTML Restringido

  • Etiquetas HTML permitidas: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Saltos automáticos de líneas y de párrafos.
  • Las direcciones de correos electrónicos y páginas web se convierten en enlaces automáticamente.