Getting Started with Components & Icons in Denali

Chas Turansky
Mar 19 · 4 min read

In this guide we’ll be going over how to use Denali components and icons in your next web project. We have two ways of installing Denali CSS in a HTML website or app, scroll down to the beginner and advanced guides depending on your experience.

Beginner CSS Installation

If you’re a beginner or new to Denali this is the perfect place to start. A basic knowledge of HTML5 and CSS3 is required to get started with our CSS Framework.

First, create an HTML file and open it in your browser and text editor. To use Denali you’ll need to include one CSS file for components. You can do this through jsdelivr CDN or download them on the Denali CSS GitHub releases page.

If you plan to go the CDN route, which is the easiest way, just include these two lines of code in your head tag.

<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/denali-css/css/denali.css">

After doing that feel free to skip the advanced installation and move on to installing our icon font components.

Advanced CSS Installation

Advanced installation allows you to take full advantage of what Denali CSS has to offer, however there are some prerequisites. You’ll also need node.js, npm, and sass installed before continuing. If you want to utilize Denali’s theming capabilities check out our Medium post.

After those are installed create an index.html file and install Denali CSS via the node package managers. Run the command in your terminal for the project.

npm install denali-css

This will install the scss files you need to compile. Create a style.scss file and import denali.scss from the node_modeules folder. If your index.html file is in the base path of the project use the code below.

@import ‘node_modules/denali-css/scss/denali.scss’;

After you import the file you’ll need to compile and include the output css file into your head tag. Lets compile the SCSS first by using the command below. This will compile the style.scss file every time you make a change output style.css file.

sass --watch style.scss:style.css

Now let’s include the style.css in the head tag by linking a stylesheet.

<link rel=”stylesheet” href=”style.css”>

Icon Font Installation

Our icon font is very easy to install, just add the CSS file in your head tag. You can do this through jsdelivr CDN or you can download it from the Denali Icon Font GitHub releases page.

<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/denali-icon-font/dist/denali-icon-font.css">

Using Components

For extensive documentation on our components visit www.denali.design. Each component contains a specific HTML syntax to follow. With this you can add what we call modifiers onto the top level element. Let’s take a look at buttons for example. To begin add a button to your HTML file.

<button class=”button is-solid”>Button</button>

As you can see, this component uses standard HTML button syntax with an added button class. This class gives basic styling to our buttons. We also included the modifier is-solid which gives the button a blue background and white text. Try to switch that modifier out for another one like is-outline.

<button class=”button is-outline”>Button</button>

That changes the style of the button to have blue text, a transparent background, and a blue border. If you’re interested in other modifiers, check out our documentation to see all implementations.

Using Icons

Our library contains over 1000 icons. For a catalog of all our icons visit our icon page. This page lists all of our icons by category and provides a simple search so you can find what you need quickly.

To implement an icon in your HTML page create a span tag, add an activation class of d-icon, and a prefix of d- followed by the icon name.

<span class=”d-icon d-add-circle”></span>

We also provide modifiers for icons if you are using denali-css. For color you can add a class of is-red-500, which will turn the icon red. Read more about colors here.

<span class=”d-icon d-add-circle is-red-500"></span>

Additionally we have size modifiers which you can find here. We’ll add a class of is-large which will increase the icon size to 48px.

<span class=”d-icon d-add-circle is-large”></span>

Keep up with Denali

Follow us on Medium or Twitter for updates as we continually evolve Denali into a powerful productivity platform. Don’t forget that Denali is open source — if you’d like to be a part of Denali’s evolution don’t hesitate to make some contributions on GitHub. Finally, checkout denali.design to download our framework, icons, Sketch libraries, and other resources to help build your products! Finally, if you’d like to get in touch with the team directly email us at denali@verizonmedia.com

Denali Design

Open source themeable design system

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store