Denali CSS Docs are Moving

We've updated our documenation to align with our other frameworks. Our new documenation will live here and these pages will be removed.

What’s New

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

January 22nd 2020


New Radio Toggle We added css to support radio toggles.


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


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


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

October 10th 2019


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


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

September 10th 2019


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


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


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


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.