Component-driven Drupal theming

FLISOL - 2019

¿Cómo llegamos hasta aquí?

 

 =


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

 

Escenario

Estamos en el Sprint 0 del Frontend

Old Way:

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.

New Way:

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.

  La implementación del Frontend en  un Diseño Moderno comienza al inicio del proyecto y no al final.

No somos "Themers".

Aplicamos Sistemas de Diseño

Design Systems

"A Comprehensive Guide To Design Systems" by Will Fanguy

Style Guide

  • Colores

  • Typografía

  • Espaciado

  • Grids

  • Tratamiento de Imágenes

  • Iconografía

Pattern Library

  • 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 y Vencerás

(divide et impera)

Atomic Design

Atomic Design

  • atomicdesign.bradfrost.com

  • Postura que consiste en "desmenuzar" la partes que constituyen un proyecto.

  • Define su propio leguaje y método.

  • Especifica niveles de complejidad en los patrones del UI

  • Nos ayuda a llevar a código la estructura del proyecto

"Atomic Design In One GIF" by Brad Frost

Pattern Lab

patternlab.io

 

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.

 

Particle

Opinionated tools to build Design Systems

Phase2 Technology

 

Particle

A bunch of tools to build design systems

https://github.com/phase2/particle

  • Starter-Kit = tools + examples
  • Drupal theme, Grav theme, Pattern Lab app
  • Strict Atomic Design component structure
  • Webpack bundling of all CSS, javascript, font, and static image assets for multiple targets
  • Webpack Dev Server for local hosting and auto asset injection into Pattern Lab and Drupal
  • pa11y accessibility testing
  • VueJS framework integration
  • Twig namespaced paths generated automatically. @atoms/thing.twig means the same thing to Drupal theme and Pattern Lab.
  • SVG icon auto-generation
  • Bootstrap 4 integration, used for all starting example components
  • Auto-linting against the AirBnB JS Style Guide and sane Sass standards
  • Prettier auto code formatting
  • All Webpack and Gulp files are fully configurable
  • Jest unit tests for all components

Particle is Design Modules

  1. A folder of Twig, Sass, and Javascript
  2. Tied together with asset dependency via Javascript modules
  3. All pulled into a single Design System library

Integration to Drupal

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 %}

Pros

1 - Autocontenidos y encapsulados

2 - Indepedientes

3 - Reutilizables

4 - Gratificación Instantánea

5 - Facilita la comunicación entre el cliente y el desarrollador

Component-driven Drupa theming

By Jorge Ram

Made with Slides.com

Component-driven Drupa theming

  • 559

More from Jorge Ram