Duet Design System September 2020 Update
You’re reading the ninth Duet monthly update. During the past month we’ve been busy improving the existing features, fixing bugs, and open sourcing Duet Date Picker.
As our team working on Duet Design System couldn’t find an existing date picker that would’ve ticked all the requirements we had for accessibility and performance, we decided to build one and open source it so that others could benefit from this work as well.
Duet Date Picker is an open source version of Duet Design System’s WCAG 2.1 compliant date picker. Duet Date Picker can be implemented and used across any JavaScript framework or no framework at all. We accomplish this by using standardized web platform APIs and Web Components.
Features
- Can be used with any JavaScript framework.
- No external dependencies.
- Themable with CSS variables.
- Weighs only 10kb minified and Gzip’ed (this includes all styles and icons).
- Built with accessibility in mind to support WCAG 2.1.
- Supports all modern browsers and screen readers.
- Support for localization.
- Customizable date parsing and formatting.
- Comes with modified interface for mobile devices to provide better user experience.
- Supports touch gestures for changing months and closing the picker.
- Free to use under the MIT license.
Discussion on Twitter
Today we open sourced Duet date picker:
— Nick Williams (@WickyNilliams) September 17, 2020
✨ Built for the modern web
⌨️ Keyboard and screen reader accessible
🗺️ Supports localisation
🎨 Themable with CSS variables
📱 Mobile friendly
⚡ Only 10kb gzipped (including all styles and icons!)https://t.co/B38UMdCFVT pic.twitter.com/43UTfpT02H
Duet Date Picker, an accessible, WCAG 2.1 compliant date picker that can be implemented and used across any JavaScript framework or no framework at all. via @arielsalminen https://t.co/Frl8VdjzQh pic.twitter.com/3ZcHFLRb4Z
— Smashing Magazine (@smashingmag) September 18, 2020
Our team working on Duet Design System couldn’t find an existing date picker that would’ve ticked all the requirements we had for bundle size and accessibility (WCAG 2.1), so we decided to build one and open source it: https://t.co/As1KL1NWFM pic.twitter.com/HXuBPQNBaQ
— (@arielsalminen) September 17, 2020
New this month
In this section we’ll highlight every month new features and progress from Duet Design System. This month’s highlights include:
Duet Date Picker
As our team couldn’t find an existing date picker that would’ve ticked all the requirements we had for accessibility, we decided to build one and open source it so that others could benefit from this work as well.
Usage documentation
We’ve added new usage docs for each component that explain how and when the component should be used. There’re also better accessibility docs and further considerations to take into account on each component page.
iOS and Android support
We’ve added a new template demonstrating how to build a native view for iOS that utilizes Components, Design Tokens and CSS Framework. Similar techniques inside a native wrapper app could be used for Android as well.
Angular and React examples
In addition to improved Angular and React support, we’ve also created example projects that you can utilize. Both our GitHub account and CLI Tool now come with Angular and React specific templates that you can utilize.
Duet Markdown renderer
Duet now offers a custom renderer for the most popular JavaScript Markdown library marked.js, so that it outputs Duet components like <duet-paragraph> rather than standard HTML tags like <p>.
Until October!
