Desy Frontend

Desy Frontend contains the code you need to start building a user interface for Gobierno de Aragón government webapps.

See live examples of Desy Frontend components: https://desy-ast.aragon.es/

This project started initially forked from: https://github.com/saadeghi/tailwindcss-postcss-browsersync-boilerplate

This project is built upon the GOV.UK Frontend project: https://github.com/alphagov/govuk-frontend. We would like to thank the Government Digital Service team for their fabulous work and for making it opensource for the community.

How to set up?

• Run npm install first.
• Use npm run dev to generate CSS from src/styles.css to /build/styles.css, listen to changes in njk, css and html, and browser-sync reload.
• Use npm run prod to generate CSS and Purge it and Minify it.
• Dependencies: Node.js v12.18.3, Tailwind CSS, AutoPrefixer, PurgeCSS and CSSnano configured in PostCSS

How do I start a project that uses desy-frontend components?

To start a new project that uses desy-frontend as dependency, don't use this repo, use desy-frontend-starter repo instead.

• Download the desy-frontend-starter project from here: https://bitbucket.org/sdaragon/desy-frontend-starter
• Personalize the downloaded project for your needings.
• You'll be able to use any desy-frontend component in that project. Copy any Macro example code from here and paste it inside any page, include or component in your project.

Contact the team

Desy Frontend is maintained by a team at Servicios Digitales de Aragón (Spain). If you want to know more about Desy Frontend, please email any of the commiters.

Software license

Unless stated otherwise, the codebase is released under the EUPL-1.2 License. This covers both the codebase and any sample code in the documentation. Read license.

Download source code

This project's code is published in a public Bitbucket repo. You can fork it or download it from here: https://bitbucket.org/sdaragon/desy-frontend/

Changelog

What's new in the latest version of Desy Frontend

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-frontend-starter project. This is a breaking change for projects that used previous versions of desy-frontend.
• 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

• Removed © copyright symbol from footer as we use creative commons license.

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.