El autor y su obra: Graaf, por @Laux_es 14.2.17
Á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 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.
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:
Vale, lo quiero. ¿Dónde consigo a Graaf?
Graaf es un proyecto open source
alojado en Github
Nota del editor: Sobre el autor
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
Kseso
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
genial muchas gracias, yo hacia esto a mano y a la mala con algunos proyectos
ResponderEliminarBuen artículo, gracias. Sabes si las columnas y el gutter se pueden configurar en porcentaje?
ResponderEliminarYo utilizo http://jeet.gs/ .Hice unas pruebas en CODEPEN con https://grids.graaf.space/1200/6/16.css pero solo en px.
Saludos.
Hola Nacho,
EliminarPor ahora, la API no está preparada para tratar con valores porcentuales. Estoy realizando pruebas donde se puedan combinar valores porcentuales con pixeles exactos. Para ello estoy utilizando la función calc, pero parece que esta no funciona correctamente en la propiedad background-size.
Comentaré por aquí cuando tenga lista esa funcionalidad :)
Muchas gracias por el comentario y un saludo!