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 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 y plantillas de página en la documentación: https://desy.aragon.es/

¿Cómo comenzar?

Ejecuta primero npm install
Ejecuta npm run dev para escuchar cambios en los archivos njk, css y html, para renderizarlos y recargar el servidor local con browser-sync.
Usa npm run prod para generar el CSS y minificarlo.
Dependencias: Node.js v20.14.0, Tailwind CSS y AutoPrefixer configurado en PostCSS. Versión y lista de dependencias completa en: Ver package.json

¿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.11.1.2

Improved initial tooltip visualization in Dropdown, Listbox, Menu navigation, Menubar and Tooltip.
Validation fixes in Tree.

v.11.1.1

Fixes in Collapsible and Tree.
Minor improvements.

v.11.1.0

Added Tree navigation param to use the Tree as a folded menu.
Fixes in Tree, Accordion and Accordion history.

v.11.0.5

Minor fixes in breadcrumbs.
Added default font size and line height to body to improve accessibility.

v.11.0.4

Fixed previous responsive with Tailwind CSS breakpoint prefixes.
Changed footer text size in mobile.

v.11.0.3

Text styles are now responsive with Tailwind CSS breakpoint prefixes.
Added Table modifier to not stack cells in mobile.
Accessibility fixes.

v.11.0.2

Accessibility fixes.

v.11.0.1

Minor fixes.

v.11.0.0

Pagination now uses select instead of listbox and changes in parameters.

v.10.2.2

Added missing params in Toggle and Notification.
Accessibility fixes.

v.10.2.1

Minor fixes in Tabs and Prose styles.

v.10.2.0

Menu horizontal improvements and modifiers.
Links list improvements and icon customizations.
Added new params to style collapsible elements.
Table now is stacked in mobile.
Improvements in additional breakpoints.
Footer columns fixes.

v.10.1.1

Fixed columns in Footer navigation items.

v.10.1.0

Added new param in Footer to improve columns.

v.10.0.1

Fixed cally not loading in templates.

v.10.0.0

Updated to Node v20.14.0 and Npm v10.8.1. Audit fix --save to update dependencies to latest.

v.9.0.1

Minor fixes.

v.9.0.0

Added Datepicker component using Cally v0.6.1. as js file.
Updated Gulp to 5.0.0
Added additional breakpoints to Docs.

v.8.13.1

Minor fixes.

v.8.13.0

Added logos in Header Advanced examples.
Added FEADER logos in Footer.
Tooltip now allows select content inside.
Updated to latest Tailwind CSS.
Accessibility fixes.
Minor improvements.

v.8.12.1

Fixed logo.html parameter in Footer and improved styles for logo.
Minor improvements.

v.8.12.0

Added new logos and parameters in Footer.
Added global function to open/close Tree items.
Added global funcion to Notification to close it.
Accessibility fixes.
Improvements in docs.

v.8.11.0

Added global funcion to Accordion and Accordion history to open/close all items.
Added global function to check/uncheck Toggle.
Bug fixes.
Improvements in docs.

v.8.10.2

Updated Tailwind CSS form and typography plugins.

v.8.10.1

Fixed a bug in conditionals in radios.

v.8.10.0

Updated to Tailwind CSS v3.3.5
Fixed bugs in Checkboxes and Radio conditionals.
Added global function to select items in Listbox.
Added global function to open/close Collapsible and Dialog.
Accessibility improvements.
Improvements in Docs.

v.8.9.0

Added global function to select items and refactor Menu navigation to fix keyboard navigation.
More improvements of height in offcanvas in Header and Header advanced.
Improvements in Docs.

v.8.8.1

Fixed a bug in active items in Nav, Menu horizontal and Menu vertical.
Improved height in offcanvas in Header and Header advanced.

v.8.8.0

Added global function to select items in Listbox.
Added global function to open items in Accordion and Accordion history.
Fixed a bug in Tabs.
Improvements in Docs. Added menu navigation in header advanced in template example.

v.8.7.0

Added global function to select items and subitems in Menubar and Menu horizontal.
Now Tabs can have html inside their titles.
Improvements and better accessibility in docs.

v.8.6.0

Added global function to select items and subitems in Menu navigation.
Bug fixes.
Improvements in docs.

v.8.5.0

Added global function to select an item in Tabs.
Added new param in Breadcrumbs to show the items inline on mobile.
Docs fixed bad units in text styles.
Improvements in docs.

v.8.4.1

Active items are font-bold now in all components.
Minor improvements.

v.8.4.0

Added global function to select an item in Nav.
Docs now show the active section in offcanvas menus.

v.8.3.1

Minor fixes.

v.8.3.0

Added global function to select an item in Header navigation in Header and Header advanced components.
Docs now show the active section in header menu.
Minor fixes.

v.8.2.2

Fixed duplicate ids in subitems in components with subitems.
Minor fixes.

v.8.2.1

Minor fixes.

v.8.2.0

Added global function to select an item in Menu vertical.
Added tfoot in Table and Table advanced, that is not affected by orderby. Useful for showing totals in tables.
Removed aspect-ratio plugin from Tailwind CSS as it's now baked by default.
Added first and last buttons to navigate in Pagination.
Minor improvements.

v.8.1.7

Fixed bad html copy code in caller components.

v.8.1.6

Minor changes in docs.

v.8.1.5

Changed gap-xl to gap-lg as the default gap in layout grids.

v.8.1.4

Fixed anchors in examples.

v.8.1.3

Fixed anchors in docs.

v.8.1.2

Improvements in estilos page in docs.

v.8.1.1

Fixed a bug in Searchbar that avoids linebreak in button.
Added new graphics colors, removed desy-html-templates in docs.

v.8.1.0

Added a new modifier class in Menu horizontal to show scroll in mobile.
Bug fixes.

v.8.0.1

Fixed a bug in examples Nunjucks code.

v.8.0.0

Improved indentation in examples.
Added functions to show source code in Nunjucks and HTML.
Removed Prism.
Fixed a bug in telephone link in footer.
Fixed an example of Searchbar with button breaking line.

v.7.4.0

Translated examples to español.

v.7.3.1

Added source code links to Plantillas pages.

v.7.3.0

Added desy-html-starter page templates and Plantillas page.

v.7.2.0

Removed cdn links for popper and tippy.
Redesigned component examples pages.
Improved indentation in component examples pages.
Added new parameter in footer for logo FEDER url.
Docs improvements.

v.7.1.2

Minor improvements.

v.7.1.1

Fixed a bug in checkboxes and radios. Now the conditionals work properly.
Minor fixes.

v.7.1.0

Added class to Tabs to better display them inline with scroll if needed in mobile.

v.7.0.1

Accessibility and docs improvements.

v.7.0.0

Updated to node 16.17.1 and npm 8.15.0. Updated to latest packages.
Docs improvements.
Bug fixes in Tree and Toggle.

v.6.6.0

Removed Backstop.js visual regression testing library to make the library lighter. We will use it only in test branch.
Added Card component.
Added Links list component.
Added a bigger c-h0 heading style. A smaller c-h4 style and prose improvements.
Docs improvements.
Bug fixes.

v.6.5.0

Added Backstop.js visual regression testing library.
Improved documentation.

v.6.4.1

Fixed notification close.
Header GA logo has now the right colors.
Improved documentation.

v.6.4.0

Added title for mobile in Header.
Now the Dialog close on click outside.
Fixed Notification not closing on close button click.
Fixed Toggle bad arias and colors.
Fixed Collapsible bad arias and not opening.
Fixed Tabs active element.
Improved prose styles. Now the lists have black bullets and paragraphs correct line heights.
Improvements in documentation.

v.6.3.3

Fixed behavior in Accordion and Accordion history.
Fixed bad "Show code" button position in docs.
Minor improvements and fixes in docs.

v.6.3.2

Added header background images.

v.6.3.1

Added new header background colors.
Changes in heading advanced examples.

v.6.3.0

Added parameters and changes in Header advanced.
Added active parameter in Tabs.
Removed alpine.js and added new collapsible.js file.
Fixed keyboard navigation in Tree.
Minor fixes.

v.6.2.1

Fixed bad vertical spacing in c-form-group that affected forms in desy-angular.
Minor fixes in listbox, dropdown and menubar for header modifier.
Minor accessibility improvements.

v.6.2.0

Added classes for base modifiers in form components to improve responsive styles.
Added a listbox in Pagination to choose the items per page.
Item can position the icon with a new parameter.
Accessibility fixes and improvements in Accordion history, Menu navigation, Toggle examples, Footer.
Minor improvements in Table advanced.

v.6.1.0

The header is now colored.
Added new components: Header advanced and Header mini.
Minor validation fixes.

v.6.0.0

Compilation
- Updated to TailwindCSS v3.0.24
- Improved file compilation with TailwindCSS v.3 just-in-time mode by default. Now it's simpler and compiles all in any file changes. Removed cleancss. Now compiles css in Nunjucks, html or js changes.
- Improved headings styles in prose with the tailwind typography plugin.
Components
- Added new component Menu navigation
- Table advanced: Added selects in table head for filtering in columns
- Modal: Added button loaders in items if param isButtonLoader is provided
- Header: Added 2 zones to nest HTML content (customLogoHtml, customNavigationHtml). One after the logo and the other after the navigation. Added a param to hide the default GA logo (noLogo). Added target param to navigation items
- Added new component Accordion history.
- Footer: Added custom description, noLogo params. Improvements in logo position and navigation items position in mobile.
- Toggle: now uses aria-expanded instead of aria-pressed by default.
Improvements
- Searchbar: improvements and example for visible label.
- File upload: added button styles.
- Tree: fixed acc. Improved examples.
- Toggle examples: accessibility fixes.
- Button: Added new modifier class for has selection as Dropdown. Improved dropdown has selection class.
- Item: improved icons and text for screenreaders.
- Button loader: fixed a bug that makes an error when no loader.text is provided
- improved the check icon for Button loader, Listbox and Menubar: now it's the same in all browsers.
- Accordion: Added disabled param to items. Now the show/hide info can be customized. Fixed item.classes not applied. Added cursor not allowed in disabled items.
- Menu horizontal: Added new styles for tabs in mobile.
- Header: Improvements in header active items and menu navigation active items.
- Strong tag in base styles is font-semibold instead of font-bold.
Fixed validation errors in Footer examples, Spinner, Button loader and Button.
Docs: Improved grid example. Added font-bold example for headings style, font-semibold for strong example, and em example.

v.5.3.0

Added missing params in input-group for inputs.
Docs improvements.
Minor validation fixes.

v.5.2.2

Minor fixes.

v.5.2.1

Docs improvements.

v.5.2.0

Added toggle component.
Added searchbar to tree component.
Minor validation fixes.

v.5.1.1

Fixed pagination from having too much listbox height.

v.5.1.0

Added tree component.

v.5.0.1

Fixed accessibility bad semantics in subnav. Added dropdown contentHtml rendering and example.

v.5.0.0

Header now uses correct dropdown params.

v.4.3.0

Added disabled and active param in menubar and fixed accessibility issues.
Accessibility 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

Accessibility 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.
Accessibility 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

Accessibility 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 accessibility 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.
Accessibility 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.
Accessibility 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 accessibility 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 accessibility 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

Accessibility 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.
Accessibility 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 accessibility 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.