FLISOL - 2019
1. Tenemos algo que implementar
2. Existen diseños para ello
3. Esos diseños se llevan a código
4. Ese código se utiliza por el sistema
Frontenders no podían iniciar el theming antes de que el contenido, servidores, bases de datos y el diseño estuvieran resuletos. Usualmente el frontend estaba al final del proyecto.
Frontenders trabajan en el diseño del sistema antes de las decisiones del backend, en paralelo con resto de la impelmentación. Se crean componentes que son "agnósticos" pero esquemáticos.
Colores
Typografía
Espaciado
Grids
Tratamiento de Imágenes
Iconografía
Aplicación de Guías de Estilo a varios elementos de la UI.
Componentes que se acoplan para construir elementos de mayor complejidad.
Iterable, evolutiva
CÓDIGO REAL (HTML, Twig, React)
+
(divide et impera)
Una herramienta que aplica los principios del Atomic Design.
Hace render de los componentes a HTML.
Proveé una interfaz para navegación y muestra de componentes.
Opinionated tools to build Design Systems
Phase2 Technology
A bunch of tools to build design systems
1. In Drupal, install and enable Component Libraries module.
2. Enable Particle theme and set as default.
3. See:
apps/drupal/templates/content/node--article--teaser.html.twig
{% set article_card = {
card_border: 'none',
card_title: label,
card_text: content.body,
button: {
button_element: 'a',
button_color: 'secondary',
button_text: 'View details »'|t,
button_link: url,
}
} %}
{% include '@molecules/card/_card.twig' with article_card %}