Designs Systems y CSS Framework Alternatives

Importancia de crear patrones como Front-End Developer, para no tener que reinventar la rueda constantemente.

¿Qué es un Design System?

Un Design System, traduciéndolo al español significa “Sistema de Diseño” pero ¿a qué se refiere esto?. Pues es más que un simple framework, más que una herramientas para mejorar tu UI (User Interface — Interfaz de Usuario) o una librería de componentes a establecidos. Es realmente un conjunto de reglas que evolucionan y que conforman un producto.

En palabras mas sencillas, es un conjunto de reglas que conforman la cara de un producto. Es muy importante porque como empresa o producto, tu deberías saber quien eres, cual es tu misión y cual es el Look and Feel que ofreces.

Diseñando una paleta de estilos

Antes de empezar a crear componentes brillantes y emocionantes, se deben asentar las bases para los mismos, cuestiones como: color, tamaño de letra, espaciado, altura, color de la letra, tipo de fuente, etc.

Hay que irse a lo mas mínimo o lo mas detallado para así comenzar y poder crear realmente desde 0 nuestro propio Design System.

Color:

Esta propiedad es la mas obvia, así como la mas reutilizable a través de todo nuestro Design System.

Principalmente debemos seleccionar nuestros colores de marca, así como también aquellos colores que nos comunican éxito o falla dentro de nuestra aplicación. Y por ultimo se necesitan algunos colores grises (algunos para fondos, otros para bordes, etc).

Sombras:

Las sombras son otra propiedad usada comúnmente en la mayorías de las interfaces de usuario:

Estas cuatro sombras deberían ser suficientes para cada componente en nuestro sistema:

• Una sombra sutil para resaltar componentes interactivos.
• Una sombra más pronunciada para cuando se aplique el efecto hover.
• Una sombra mucho más pronunciada para agregar perspectiva a dropdowns/popovers junto con otros componentes.
• Una sombra distante para los modals.

Fuentes:

Para creara apropiadamente una jerarquía visual en cada pantalla necesitaremos definir un set de tamaños de fuente diferentes.

El siguiente paso es elegir que tamaños de fuente necesitamos:

• Un tamaño por defecto.
• Unos tamaños para Headers y Sub-headers.
• Un tamaño aun más grande para secciones de titulo.
• Un tamaño ridículamente grande para precios (si aplica).
• También necesitaremos algunos tamaños pequeños para inputs, labels, textos secundarios etc.

Espaciado de letras:

El tamaño de la letra no es lo único que necesitamos en nuestros componentes de texto, el espaciado de letra es una propiedad útil para apretar o condensar headers o para dejar que respiren header o textos más pequeños.

También están otros elementos como, botones, el border-radius entre otras cosas que son útiles y que se van usando a los largo de tu sistema de diseño, pero que pueden ir surgiendo a medida que vas construyéndolo poco a poco.

CSS Frameworks Alternatives

Cuando hablamos de un framework, hablamos de un conjunto de estructuras o esquemas, que ya están desarrolladas y probadas, que nos son útiles para agilizar u organizar mejor nuestro trabajos, en CSS3 también existen frameworks y sinceramente si no fuera por ellos muchos tiempos de entrega no serian tan cortos.

Algunos Frameworks

• Bootstrap: es uno de los más famosos, por no decir el más famoso, de los frameworks existentes en el mundo. En el 2011 se creo como solución interna para resolver inconsistencias en el desarrollo, dentro del equipo de Twitter. En agosto de ese mismo año Boostrap fue lanzado al publico como proyecto Open Source en Github, desde ese entonces el framework solo ha ganado popularidad.
• Materialize: Es un framework relativamente. Creado en base a Material Design (un framework de Google), Materialize se basa en la misma filosofía minimalista de Google, generando botones intuitivos y sencillos de integrar así como distintos componentes.
• Pure.css: es el framework responsive de Yahoo que sigue más o menos la filosofía de Boostrap pero con su propio toque y Sistema de Diseño propio.
• Foundation: Al igual que Boostrap Foundation se volvió Open Source en 2011 proporcionando una manera más rápida y mejor de generar o crear interfaces de usuario. Tiene como atributo que fue el primer framework Mobile First Responsive construido en Sass/Scss.

A pesar de que son frameworks de CSS3, esto no es lo único que contienen, como dice anteriormente también proporcionan componentes con comportamientos y funciones especificas en Javascript.

Veamos un poco de la integración de cada uno en Ruby on Rails.

Boostrap por ejemplo no es solamente css, también necesita librerías adicionales para trabajar tales como PopperJs, Jquery y su propia librería de Javascript, para usarlos siempre hay dos maneras usar los CDN que te proporcionan, anclarlos a tu index.html o tu html principal y usarlo, el problema con esta manera son que entorpece los tiempos de carga de tu pagina haciéndola descargar cada uno de estos archivos cada vez que visiten tu pagina. Ante esto se generaron otras maneras de usar bootstrap que optimizan los tiempos de carga tales como la instalación a través de npm, bower, gemfile, etc.

Ruby Way: en ruby es tan simple y sencillo como agregar la gema al Gemfile o sino instalarla desde 0.

Materialize: Al igual que Boostrap tiene su propio CDN pero veamos la Ruby Way, si quieren mas info sobre esta gema aquí esta la documentación.

Agregamos lo siguiente al GemFile

Fundation: Fundation es realmente simple así como las veces anteriores.

Al Final cualquiera de las opciones que quieras utilizar es valida siempre y cuando la bases en tus conocimientos y necesidades.