What’s New

We list all the updates, bug fixes, and new features.


January 22nd 2020

Components

New Radio Toggle We added css to support radio toggles.

Principles

New Responsive Grid - Denali’s responsive grid allows content to adapt seamlessly to different screen sizes. View Principle

New Component Behavior - Component behavior refers to the way that Denali’s components adapt to fit within the different breakpoints. View Principle

New Page Density & Spacing - Balancing page density and spacing is fundamental to creating interfaces that are easy to consume. View Principle

Documentation

New Helpers - Flex - Flex helpers, based on flexbox, help layout responsive elements within a container. View Docs

New Helpers - Margins - Margin helpers are used to space out elements. View Docs

New Helpers - Padding - Padding helpers are used to control an elements padding. View Docs

Guides

New Theme Your App - Follow the steps below to theme your app with Denali. View Guide


October 10th 2019

Components

New Grouped Chips We added grouped chips to help you display key value pairs. View docs

Principles

New Fields - These principles includes the basic foundation, types, positioning and states. View Principle


September 10th 2019

Components

New Fields Responsiveness - By default input groups are not responsive, but by adding a helper class of responsive to the element, will stack the label and input while increasing the width to 100% of the viewport when the screen size is broken down to mobile. View docs

New Toggle Inverse - When a toggle is on a darker background apply .is-inverse class to a toggle's outer <div> container. View docs

Navbar - We recently removed .nav-center, so to replicate it use .nav-right and use .nav-group to section off navbar sections. View docs We also added responsiveness to the navbar by added some classes and elements. View docs

Formats

New Containers - Containers are a foundational layout element. Denali offers a choice between a basic container and a full container. Basic containers can be placed within full containers for added flexibility. View docs

New Rows - Rows horizontally layout content and are direct children of containers. View docs

New Columns - Columns must always be wrapped within rows and are used to layout content vertically or horizontally. View docs

Principles

Buttons - We just published out principles for buttons. This includes the basic foundation, labels, density and details on the states and usage for each type of button. View Principle


Open-source

July 30th 2019

Denali is a comprehensive and customizable design system and CSS framework that provides a scalable approach to efficient UI design and development. Denali has worked so well for us internally that we’ve decided to share it with the open source community in the hope that your projects may also benefit from its use.