Denali Design
Published in

Denali Design

Getting Started with Components & Icons in Denali

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

--

--

--

Open source themeable design system

Recommended from Medium

JavaScript: Arrow Function

React Events

Essential javascript insights

React Fundamental Core Concept

wilt/07.22.2017

LeetCode (hard): Interview Question - Median of two sorted arrays

C’est la “Vue”

react-js

Component Examples

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
Chas Turansky

Chas Turansky

I’m a digital product designer based in the bay area currently working at Verizon.

More from Medium

Styling Bold and Italic Fonts Using CSS

SASS — Syntactically Awesome StyleSheets

dropdown selector workaround for material design bootstrap (MDB)

User Experience Design in the midst, and aftermath of a category 5 typhoon

A picture of a car that is pinned down by a fallen tree