desy-html

desy-html es una librería NPM que sirve para construir la interfaz de usuario de las aplicaciones web del Gobierno de Aragón. Utiliza Gulp, PostCSS, Tailwind CSS, Alpine.js y Nunjucks para renderizar componentes HTML+CSS+JS. Es útil para crear aplicaciones web ligeras o maquetas html.

Si necesitas una librería con más potencia para construir tu aplicación web, te recomendamos mejor, que uses su versión traducida a Angular: desy-angular librería NPM, Ejemplos de desy-angular

Mira ejemplos de componentes de desy-html en la documentación: https://desy.aragon.es/

Mira ejemplos de templates de página usando los componentes de desy-html: https://desy.aragon.es/pages/desy-html-templates

¿Cómo comenzar?

Ejecuta primero npm install
Utiliza npm run dev para generar el CSS de src/styles.css a /dist/styles.css, este proceso escucha cambios en los archivos njk, css y html, y recarga browser-sync.
Usa npm run prod para generar el CSS, purgarlo (excluir las clases CSS que no se usan) y minificarlo.
Dependencias: Node.js v12.18.3, Tailwind CSS, AutoPrefixer, PurgeCSS y CSSnano configurado en PostCSS

¿Cómo comienzo un proyecto que usa los componentes de desy-html?

Para comenzar un nuevo proyecto que usa desy-html como dependencia, no uses este repositorio, usa mejor desy-html-starter.

Descarga el proyecto desy-html-starter desde su repositorio: https://bitbucket.org/sdaragon/desy-html-starter
Personaliza el proyecto descargado según tus necesidades (cambia el nombre y rutas).
Podrás usar cualquier componente de desy-html en ese proyecto. Copia cualquier ejemplo de macro desde la documentación de desy-html y pégalo dentro de tu página, include o componente del nuevo proyecto.

Contacta con el equipo

desy-html está mantenido por un equipo de SDA Servicios Digitales de Aragón (España). Si quieres saber más acerca de desy-html, puedes escribir por email a alguno de los commiters.

Licencia del software

A no ser que se indique lo contrario, la base de código está liberada bajo la licencia abierta EUPL-1.2 License. Esto cubre tanto la base de código como cualquier ejemplo en la documentación. Lee la licencia.

Descarga el código fuente

El código de este proyecto está publicado en un repositorio público de Bitbucket. Puedes hacer un fork o descargarlo desde aqui: https://bitbucket.org/sdaragon/desy-html/

Changelog (English)

What's new in the latest version of desy-html

v.5.0.0

Header now uses correct dropdown params.

v.4.3.0

Added disabled and active param in menubar and fixed accesibility issues.
Accesibility fixes in menu horizontal.
Minor improvements in documentation.

v.4.2.1

Minor fixes.

v.4.2.0

Checkboxes can be indeterminate at init.
Fixes in alert. Now it's read by screen readers.
Header now uses dropdowns.
Dropdowns, listboxes and tooltips now closes when loosing focus.
Minor improvements in documentation.

v.4.1.3

Minor improvements.

v.4.1.2

Improvements in docs and Spanish translation of texts.

v.4.1.1

Accesibility improvements in header.

v.4.1.0

Added new parameters for customizing the skip link inside header component.

v.4.0.3

Minor improvements.

v.4.0.2

Improved headings spacing.

v.4.0.1

Minor fixes in checkboxes, radios, input group and date input.
Minor improvements with license file compilation.

v.4.0.0

Updated tailwindcss to 2.2.7 and tailwind plugins related to latest versions. Changed the way we compile nested css. It affects gulp tasks so it bumps to a desy major version.
Added js files to purge in tailwind.config.js
Header uses container now and accepts breakpoints as footer.
Added heading level param to item component.
Added a new parameter in table advanced to show horizontal scrollbar in large tables and to apply classes to checkboxes.
Select has optgroups and new hidden parameter to mimic a placeholder.
Date input can be used now as time input using new divider parameters.
Accesibility improvements in table advanced, accordion
Fixes in notification, tooltip, modal, menu vertical, listbox, status item,
Improvements in many component examples. Added inline examples for input, textarea, character count and select. Added fixed columns in table examples.

v.3.2.1

Fixed minor js validation issues.
Fixed color examples in estilos page in docs.
Fixed widths and line breaks in dropdowns with nav, listboxes and menubar items.

v.3.2.0

Accesibility and validation improvements in accordion, menu vertical, nav, pagination and tooltip.
Added new headingLevel parameter to control the heading hierarchy in accordion, error-summary, fieldset, label, modal, notification and tabs.
Javascript minor fixes.
Updated postcss npm dependencies.

v.3.1.3

Improved responsiveness and accesibility in header.

v.3.1.2

Searchbar has a param to show a custom button instead of lens icon.
Date input can be better customized.
Fixed validation in: nav.
Accesibility improvements in: tooltip, modal, notification, button, menu vertical and listbox.

v.3.1.1

Minor fixes.

v.3.1.0

Added tooltip component.
Changes in menu vertical component: Simplified html and parameters.
Changes in nav and pagination components: Changed parameters, roles and arias.
Improved w3c validation of all component examples.
Accesibility and bug fixes in notification, modal, table advanced, footer, header, dropdown and listboxes.

v.3.0.3

Minor fixes.

v.3.0.2

Minor fixes.

v.3.0.1

Removed jit mode in tailwindcss compilation to avoid problems with purgecss safelist.

v.3.0.0

Updated Tailwindcss to 2.1.1 and activated jit mode to seed up css compilation.
Build folder is named "dist" now.
Improved js: now it's more modular, and better to be used as plug and play in desy-html-starter project. This is a breaking change for projects that used previous versions of desy-html.
Removed unneeded details js cdn polyfill.
Added an optional ".dev" class to the body to be used in development environments.
Added open and close html comments in rendered html for each component.
Added an optional win-node-env dependency to allow node environment variables in Windows.
Many accesibility fixes and improvements in menubar, searchbar, header and offcanvas menu, pagination, modals, nav and footer.

v.2.1.3

Minor fixes.

v.2.1.2

Menubar now can have groups with their own aria-label that groups menuitem, menuitemcheckbox and menuitemradio.
Added element that acts as label for listbox and menubar for screenreaders.
Select error now goes before select.
Fixed bad positioned subnav dropdown in header.
Minor fixes and accesibility improvements.

v.2.1.1

Minor fixes and improvements.

v.2.1.0

Added listbox and menubar components.
Removed secondary modifiers from dropbox, modal and dialog.

v.2.0.4

Minor fixes.

v.2.0.3

Many improvements in docs: Added catalog page with all the components at glance.
Changes in menu horizontal: fixes and changed styling to match tabs styling.
Fixes in: menu horizontal, tabs, button, input, select, searchbar, footer, date input and checkboxes.
Improvements in footer spacing and page integration. Changed page bg color for that.

v.2.0.2

Accesibility improvements in: menu vertical, status item, notifications, alert, modals, dialog and tabs.

v.2.0.1

Fixed radios not checked if has no conditional.
Improvements in header: Added logo letters, offcanvas is now a dialog and traps focus inside. Removed extra navs.
Accesibility improvements in: pagination, offcanvas, header, menu vertical, modal, dialog, notification, alert, item, status item, tabs and focus styles.

v.2.0

Updated Tailwindcss to 2.0
Added Tailwind aspect ratio plugin and used in colors docs.
Added missing placeholder params to textarea and character count.
Fixes in header, menu vertical, button icons, search and radios.
Fixed bad heights in input, textarea, select. Now they have the same height as buttons.
Added alert component that triggers notifications.
Improved focus styles.
Added divider in input group.

v.1.9.0

Updated Tailwindcss to 1.9.6
Fixed a bug in tailwind.config.js that avoid compile in desy-angular
Refactored accordion component.
Added software license.
Improved focus styles in components and links.
Added alert and neutral modifiers to c-link
New components: notification, modal, dialog, status and status item.
Added a close button inside offcanvas navigation.
Menu vertical now has icons, improved styles and a param to show all items unfolded.
Fixes in docs, details, nav, footer

v.1.8.3

Added changelog in docs.
Changes in details component. Now it's a caller component and has better params.

v.1.8.2

Updated Gobierno de Aragon logo. Now it has the square outside the img in both expanded and normal versions.
Now package.json is being copied to build folder, in order to be published along the html files. This way we can track which version is online. You can see now the published package.json here
Changed rounded corners to button, button-loader and dropdown. Now is smaller and has a more squared aspect, as the input and selects.
Added variants: group-hover and group-focus to display css properties. Now we can show/hide children elements on hover or focus.
Fixed bugs in accesibility in navs, and fixed a bug in dropdowns.

v.1.8.1

v.1.8

Added tabs component.
Added an expanded version of logo in header that has responsive variants.
Added a subnav in header to show the current app as title or to navigate between different apps.
Added favicon to docs.
Added SDA logo and links in footer and improved footer examples.

v.1.7.3

Fixed gulp clean task that broke build process if build folder didn't exists before.
Added width spacings for dropdown to use.
Fixes in dropdown, pagination and items.

Gracias

Este proyecto fue inicialmente forkeado de: https://github.com/saadeghi/tailwindcss-postcss-browsersync-boilerplate

Este proyecto se ha construido sobre el código fuente del proyecto GOV.UK Frontend: https://github.com/alphagov/govuk-frontend. Agradecemos al equipo de GDS Government Digital Service por su fabuloso trabajo y por hacerlo opensource para la comunidad.