Skip to main content

September, 2020 #

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 #

Discussion on Twitter #

Today we open sourced Duet date picker:

✨ 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

— Nick Williams (@WickyNilliams) September 17, 2020

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 @viljamis 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

— Viljami Salminen (@viljamis) 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

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.

Read more

Usage documentation

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.

View example

iOS and Android support

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.

View example

Angular and React examples

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.

Read more

Duet Markdown renderer

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

Read tutorial

What is Duet? #

Duet is a collection of reusable components and tools, guided by clear standards, that can be assembled together to build digital products for LocalTapiola and Turva.

The goal of Duet is to improve user interface consistency and quality, while making our software design and development processes more efficient.

The name “Duet” resembles the fact that there are two separate themes. One for LocalTapiola and one for Turva.

Duet has a core team of designers and developers inside LocalTapiola who are dedicated to building and supporting the system.

Until October!
Viljami Salminen

Archive

View All Updates

Edit