Reimagining Themeable Design Systems With Denali Open Source
Less than a year ago, we open-sourced Denali and since then, Denali has continued to grow both within Verizon Media and the open source community. Along the way, we’ve learned a lot from our users.
In response to that feedback, we’ve been building out new features and refining existing ones. Our themeable feature has remained the top priority, and we focused a lot of our energy towards revamping it to better support customization and reduce payload size. In addition to themeable, we heard requests from the community for SVG implementation of the icon library and increased component coverage. Discussions with designers and developers over the past few months also made it clear that our users need more than just a design system.
As of today, we’ll be focused on transitioning Denali from a design system to a robust designer and developer productivity platform. The product updates we’re sharing with you today pave the way towards that future, and we can’t wait to get started.
Themeable Updates
Working alongside so many unique brands at Verizon Media, the need for a framework whose front-end appearance could easily be manipulated to fit any visual style was clear. That’s why themeability has always been a core functionality of Denali’s framework. We put our themeable feature front and center by providing a fully revamped theming workflow. These improvements include the following:
Reduced File Size
Previously, themes were contained in a single CSS file. This resulted in bloated file sizes for projects with multiple themes. Now, themes exist as their own files which enables you to control which themes are loaded into a browser. This allows you to use multiple themes in a single project without the heavy payload.
Increased Customizability
We’ve increased the number of supported CSS properties so you can fully implement the unique visual style of your project. New CSS properties continue to be added and soon you’ll be able to customize just about everything.
The ability to completely retheme Denali’s component library allows you to reap the time-saving benefits a common framework provides without sacrificing originality. In the future, we’ll make theming even easier with a tool that will allow you to retheme Denali components and download the customized CSS framework without ever touching code.
SVG Icon Library
You can now implement the entire icon library as a single, bite-sized, SVG file. When we initially launched, we provided our icons as an icon font to allow for easy implementation of the entire icon library, but after speaking to users we discovered that development with SVGs is sometimes preferable to an icon font. The SVG file launching today is 783kb and contains our entire icon library, which is notably smaller than having to load all the icon font files at 2387kb.
Moving forward, we will optimize SVG implementation by enabling you to choose which icons you load into your project via an icon builder, which will further reduce file size. For now, our icon library will continue to be supported through font, png, and single-icon SVGs in addition to our new SVG icon library solution.
Increased Component Coverage
We spoke to product teams actively developing with Denali to determine which components they needed the most. We narrowed down the most highly requested of those components and added them to Denali’s framework, resulting in a 30% increase in Denali’s component coverage. These freshly minted components include lists, block-level alerts, tooltips, button groups, and much more.
What’s Next
Moving forward we’re shifting our focus towards transforming Denali into a productivity tool. That being said, we’re not forgetting our roots. We’ll continue to grow the design system you’ve come to know and love with IE9 support, an expanded charting library, and even more components.
Let us know which of today’s announcements you found most exciting and any features you’d like to see launched in the future in the comments below or on Twitter @Denali_Design.
