soy Kseso y esto EsCSS

El autor y su obra: Graaf, por @Laux_es

Ángel RB, también conocido por @Laux_es, presenta su obra Graaf. Un sistema que proporciona plantillas semi-transparentes para superponerlas a tu diseño y verificarlo.

El autor y su obra: Graaf, por @Laux_es

·Por Kseso ✎ 3
El autor y su obra: graaf.space por @Laux_es

¿Por qué Graaf?

En diseño las proporciones nos ayudan a que éste sea más estético y atractivo. Cuando estamos maquetando nuestro proyecto, es importante no perder de vista este aspecto.

Entonces, ¿estamos ante otro framework más?

No, no. Graaf te proporciona plantillas semi-transparentes (grid overlays) que se superponen a tu diseño y así ver si todo está en su sitio.

Graaf es la manera más sencilla de comprobar que todo encaja en tu proyecto.

¿Y cómo se usa Graaf?

Agregar una plantilla a tu proyecto es tan fácil como incluir un link a un fichero de CSS. Nada más. No es necesario incluir ningún tipo de HTML ni JavaScript.

¿Cuántas de estas plantillas semitransparentes hay en Graaf?

En este momento 14 16.

Este proyecto recopila distintas plantillas de webs como Medium, NY Times, BBC o Github. Puedes ver los detalles en la imagen siguiente.

graaf.space: plantillas y detalles
Graaf.space: plantillas y detalles

Y si resulta que la grilla que yo utilizo no la tienes entre tus plantillas

No te preocupes si no encuentras una plantilla que se ajuste a tu diseño. Graaf te permite definir tu propias plantillas a través de la URL.

Cada plantilla se identifica por tres parámetros básicos: anchura, número de columnas y margen entre columnas o gutter. Sólo tienes que pasar los valores de estos parámetros en la URL del link al fichero CSS:

<link rel="stylesheet" href="https://grids.graaf.space/ANCHURA/COLUMNAS/GUTTER.css"> <link rel="stylesheet" href="https://grids.graaf.space/793/10/16.css">

Esto superpone una plantilla de 793 píxeles con 10 columnas y una separación (gutter) de 16 píxeles.

Algún otro detalle que quieras reseñar de Graff

Graaf no tiene ninguna dependencia externa.

Vale, quiero jugar un rato con Graaf. ¿Una forma sencilla de hacerlo?

Sí. Tan sencillo como añadir el link a graaf en codepen tal como ves en la siguiente imagen:

graaf en codepen
Uso de graaf en codepen

Vale, lo quiero. ¿Dónde consigo a Graaf?

Graaf es un proyecto open source alojado en Github

Nota del editor: Sobre el autor

@laux_es Al autor de Graaf, Ángel RB, lo puedes encontrar en Twitter como @laux_es.
También en su blog: laux.es
Y sobre el tema que ocupa este artículo, los comentarios del post también es un buen lugar.

Nota del editor II:

¿Qué es el espacio "El autor y su obra"?: en este enlace lo explicaba ya hace un tiempo

Otros artículos de la serie El autor y su obra

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso