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.

Getting started

Follow the steps below to get started with Denali.

Copied to clipboard!

Denali components

Denali components have three easy ways to get started, each one appealing to a different skill level and use case. Read on to see what suits your particular needs:

or

Use jsdelivr CDN

or

Clone/Fork Git Repository

Denali icon font

Denali’s icon font has three easy ways to get started, each one appealing to a different skill level and use case. Read on to see what suits your particular needs:

or

Use jsdelivr CDN

or

Clone/Fork Git Repository

Code Requirements

For Denali to work correctly, the following items are required:

Use the HTML5 doctype

<!DOCTYPE html>


Add the responsive viewport meta tag

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />

Starter Template

If you want to get started right away, you can use this HTML starter template.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Hello Denali!</title>
    <!-- Denali CSS & Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/denali-icon-font/dist/denali-icon-font.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/denali-css/css/denali.css">
  </head>
  <body>
    <div class="container">
      <h1>Hello World</h1>
      <p>My first website with <strong>Denali</strong>!</p>
    </div>
  </body>
</html>

Community Support

Stay up to date with Denali’s development and join the community: