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
