Introducción a Desy, el sistema de diseño del Gobierno de Aragón

¿Qué es Desy?

Desy es el sistema de diseño del Gobierno de Aragón.

Puede tener más información en la descripción técnica.

La documentación oficial está publicada en: https://desy.aragon.es/

Esquema general funcional

Desy tiene distintas fases:

• Mockups: diseños iniciales estáticos hechos con Figma o Adobe XD.

• desy-html: proyecto donde se definen los componentes básicos UI

• desy-angular: librería angular desarrollada a partir de desy-html, para usar en proyectos angular.

desy-html y desy-angular son consumidos por otras aplicaciones mediante su publicación en npm.

Open

Arquitectura

desy-html

Es una librería npm, para ser consumida por cualquier proyecto de maquetación HTML del Gobierno de Aragón.

Tecnologías o frameworks:

• Node.js (con variables de entorno)

• Npm.js (para las dependencias de Javascript)

• Gulp.js y plugins (para generar el HTML y compilar)

• Postcss y plugins (para compilar CSS)

• Tailwind CSS (como framework de CSS usando PurgeCSS) y plugins

• Nunjucks (para el templating)

Contiene:

• La configuración personalizada de Tailwind CSS para nuestro sistema de diseño.

• Los componentes en formato macro del lenguaje de plantillas Nunjucks.

• Los javascripts que necesitan los componentes para ser importados al estilo ECMAScript modules.

También contiene una documentación pensada para copiar-pegar (macros de Nunjucks o HTML con clases de Tailwind CSS) en proyectos de maquetación a partir de un proyecto starter: desy-html-starter.

desy-angular

Es una librería angular, para ser consumida por cualquier aplicación angular del Gobierno de Aragón.

Angular tiene defina la estructura para las librerías. Para poder hacer demos, se ha definido el proyecto con la librería y una aplicación demo.