Essential CSS

How to use Essential CSS

NPM

npm install essentialcss

Then include it in your build system, or import it directly from node_modules/essentialcss/dist/essential.css.

Direct Download

Download essential.css
Download essential-hljs.css
Table Of Contents
Typography
Layout
Borders & Spacing
Inputs
Buttons
Tables
Colors

Typography

Paragraphs

HTML
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum non unde laborum officia doloremque, repudiandae laudantium nihil! Sed at omnis eos a obcaecati. Mollitia minus voluptatem velit, assumenda ipsa esse!</p>
Output

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum non unde laborum officia doloremque, repudiandae laudantium nihil! Sed at omnis eos a obcaecati. Mollitia minus voluptatem velit, assumenda ipsa esse!

Headings

HTML
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Output

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Text Markup

HTML
<p><strong>strong</strong> <i>italics</i> <del>strike</del> <u>underline</u> <sub>sub</sub> Normal <sup>super</sup> <b>bold</b> <mark>highlighted</mark></p>
Output

strong italics strike underline sub Normal super bold highlighted

Lists

HTML
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    Item 3
    <ol>
      <li>Sub Item 1</li>
      <li>Sub Item 2</li>
      <li>Sub Item 3</li>
    </ol>
  </li>
</ol>
Output
  1. Item 1
  2. Item 2
  3. Item 3
    1. Sub Item 1
    2. Sub Item 2
    3. Sub Item 3
HTML
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    Item 3
    <ul>
      <li>Sub Item 1</li>
      <li>Sub Item 2</li>
      <li>Sub Item 3</li>
    </ul>
  </li>
</ul>
Output
  • Item 1
  • Item 2
  • Item 3
    • Sub Item 1
    • Sub Item 2
    • Sub Item 3

Layout

Display

Class CSS Value
d-b block
d-ib inline-block
d-i inline
d-f flex
d-if inline-flex

Flexbox

HTML
<div class="d-f">
<div style="width: 100px">100px</div>
<div class="flex">flex</div>
</div>
<div class="d-f">
<div class="flex">flex</div>
<div class="flex">flex</div>
</div>
<div class="d-f">
<div class="flex">flex</div>
<div class="flex-2">flex-2</div>
</div>
<div class="d-f">
<div class="flex">flex</div>
<div class="flex-3">flex-3</div>
</div>
Output
100px
flex
flex
flex
flex
flex-2
flex
flex-3

Grid System

HTML
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col span-4">col span-4</div>
<div class="col span-8">col span-8</div>
</div>
Output
col
col
col
col span-4
col span-8

Responsive Grid

HTML
<div class="row">
<div class="col d-span-3 t-span-6 m-span-12">
  col d-span-3 t-span-6 m-span-12
</div>
<div class="col d-span-3 t-span-6 m-span-12">
  col d-span-3 t-span-6 m-span-12
</div>
<div class="col d-span-3 t-span-6 m-span-12">
  col d-span-3 t-span-6 m-span-12
</div>
<div class="col d-span-3 t-span-6 m-span-12">
  col d-span-3 t-span-6 m-span-12
</div>
</div>
Output
col d-span-3 t-span-6 m-span-12
col d-span-3 t-span-6 m-span-12
col d-span-3 t-span-6 m-span-12
col d-span-3 t-span-6 m-span-12

Alternative Responsive Grid

HTML
<div class="row">
<div class="col" style="min-width: 150px">
  col, min-width: 150px
</div>
<div class="col" style="min-width: 200px">
  col, min-width: 200px
</div>
<div class="col" style="min-width: 300px">
  col, min-width: 300px
</div>
</div>
Output
col, min-width: 150px
col, min-width: 200px
col, min-width: 300px

Borders & Spacing

Borders

HTML
<div class="b">b</div>
<div class="bt">bt</div>
<div class="br">br</div>
<div class="bb">bb</div>
<div class="bl">bl</div>
<div class="bx">bx</div>
<div class="by">by</div>
Output
b
bt
br
bb
bl
bx
by

Border Radius

HTML
<!-- All corners -->
<div class="r">r</div>
<div class="round">round</div>

<!-- Individual corners -->
<div class="rtl">rtl</div>
<div class="rtr">rtr</div>
<div class="rbr">rbr</div>
<div class="rbl">rbl</div>

<!-- Side combinations -->
<div class="rt">rt</div>
<div class="rb">rb</div>
<div class="rl">rl</div>
<div class="rr">rr</div>
Output
r
round
rtl
rtr
rbr
rbl
rt
rb
rl
rr

Border Radius Classes

Class Description
r All corners (0.25rem)
round Fully rounded (9999rem)
rtl Top-left corner only
rtr Top-right corner only
rbr Bottom-right corner only
rbl Bottom-left corner only
rt Top corners (left + right)
rb Bottom corners (left + right)
rl Left corners (top + bottom)
rr Right corners (top + bottom)

Note: Add 0 suffix (e.g., r0, rt0) to cancel border radius.

Padding

Color Legend

Additional styles may be added to the example output (borders, spacing, colors) for demonstration.

HTML
<div class="p">p</div>
<div class="pt">pt</div>
<div class="pr">pr</div>
<div class="pb">pb</div>
<div class="pl">pl</div>
<div class="px">px</div>
<div class="py">py</div>
Output
p
pt
pr
pb
pl
px
py

Margins

HTML
<div class="m">m</div>
<div class="mt">mt</div>
<div class="mr">mr</div>
<div class="mb">mb</div>
<div class="ml">ml</div>
<div class="mx">mx</div>
<div class="my">my</div>
Output
m
mt
mr
mb
ml
mx
my

Negative Margins

HTML
<div class="-m">-m</div>
<div class="-mt">-mt</div>
<div class="-mr">-mr</div>
<div class="-mb">-mb</div>
<div class="-ml">-ml</div>
<div class="-mx">-mx</div>
<div class="-my">-my</div>
Output
-m
-mt
-mr
-mb
-ml
-mx
-my

Cancelled Margins

HTML
<div class="m m0">m m0</div>
<div class="m mt0">m mt0</div>
<div class="m mr0">m mr0</div>
<div class="m mb0">m mb0</div>
<div class="m ml0">m ml0</div>
<div class="m mx0">m mx0</div>
<div class="m my0">m my0</div>
Output
m m0
m mt0
m mr0
m mb0
m ml0
m mx0
m my0

Inputs

Basic Inputs

HTML
<input placeholder="Input" />
<textarea placeholder="Textarea"></textarea>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select multiple>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
</select>
Output

Labels

HTML
<label for="input">Input:</label>
<input id="input" />
Output

Checkbox / Radio

HTML
<input type="checkbox" id="check1" />
<label for="check1" class="checkbox">Check 1</label>
<input type="checkbox" id="check2" />
<label for="check2" class="checkbox">Check 2</label>

<input type="radio" name="radios" id="rad1" />
<label for="rad1" class="checkbox">Radio 1</label>
<input type="radio" name="radios" id="rad2" />
<label for="rad2" class="checkbox">Radio 2</label>
Output


Buttons

Button Types

HTML
<button>button</button>
<input type="button" value="input" />
<input type="submit" value="submit input" />
<a href="#" class="btn">a.btn</a>
Output
a.btn

Button Colors

HTML
<button>Default</button>
<button class="primary">Primary</button>
<button class="secondary">Secondary</button>
<button class="success">Success</button>
<button class="warning">Warning</button>
<button class="danger">Danger</button>
Output

Button Sizes

HTML
<button class="small">Small</button>
<button>Normal</button>
<button class="large">Large</button>
Output

Button Groups

HTML
<div class="btn-grp">
<button>Default</button>
<button>Default</button>
<button>Default</button>
</div>
Output

No Styles

HTML
<button class="no-style">no-style</button>
<button class="no-btn">no-btn</button>
Output

Tables

Basic Table

HTML
<table>
<thead>
  <tr>
    <th>Field 1</th>
    <th>Field 2</th>
    <th>Field 3</th>
    <th>Field 4</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Row 1 - Data 1</td>
    <td>Row 1 - Data 2</td>
    <td>Row 1 - Data 3</td>
    <td>Row 1 - Data 4</td>
  </tr>
  <tr>
    <td>Row 2 - Data 1</td>
    <td>Row 2 - Data 2</td>
    <td>Row 2 - Data 3</td>
    <td>Row 2 - Data 4</td>
  </tr>
  <tr>
    <td>Row 3 - Data 1</td>
    <td>Row 3 - Data 2</td>
    <td>Row 3 - Data 3</td>
    <td>Row 3 - Data 4</td>
  </tr>
</tbody>
</table>
Output
Field 1 Field 2 Field 3 Field 4
Row 1 - Data 1 Row 1 - Data 2 Row 1 - Data 3 Row 1 - Data 4
Row 2 - Data 1 Row 2 - Data 2 Row 2 - Data 3 Row 2 - Data 4
Row 3 - Data 1 Row 3 - Data 2 Row 3 - Data 3 Row 3 - Data 4

Responsive Table

HTML
<div class="table-wrapper">
<table>
  <thead>
    <tr>
      <th>Field 1</th>
      <th>Field 2</th>
      <th>Field 3</th>
      <th>Field 4</th>
      <th>Field 5</th>
      <th>Field 6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 - Data 1</td>
      <td>Row 1 - Data 2</td>
      <td>Row 1 - Data 3</td>
      <td>Row 1 - Data 4</td>
      <td>Row 1 - Data 5</td>
      <td>Row 1 - Data 6</td>
    </tr>
    <tr>
      <td>Row 2 - Data 1</td>
      <td>Row 2 - Data 2</td>
      <td>Row 2 - Data 3</td>
      <td>Row 2 - Data 4</td>
      <td>Row 2 - Data 5</td>
      <td>Row 2 - Data 6</td>
    </tr>
    <tr>
      <td>Row 3 - Data 1</td>
      <td>Row 3 - Data 2</td>
      <td>Row 3 - Data 3</td>
      <td>Row 3 - Data 4</td>
      <td>Row 3 - Data 5</td>
      <td>Row 3 - Data 6</td>
    </tr>
  </tbody>
</table>
</div>
Output
Field 1 Field 2 Field 3 Field 4 Field 5 Field 6
Row 1 - Data 1 Row 1 - Data 2 Row 1 - Data 3 Row 1 - Data 4 Row 1 - Data 5 Row 1 - Data 6
Row 2 - Data 1 Row 2 - Data 2 Row 2 - Data 3 Row 2 - Data 4 Row 2 - Data 5 Row 2 - Data 6
Row 3 - Data 1 Row 3 - Data 2 Row 3 - Data 3 Row 3 - Data 4 Row 3 - Data 5 Row 3 - Data 6

Colors

Background

HTML
<div class="bg-alt">Alternate</div>
<div class="bg-inv">Inverse</div>
<div class="bg-primary">Primary</div>
<div class="bg-secondary">Secondary</div>
<div class="bg-success">Success</div>
<div class="bg-warning">Warning</div>
<div class="bg-danger">Danger</div>
Output
Alternate
Inverse
Primary
Secondary
Success
Warning
Danger

Text Colors

HTML
<p>Normal</p>
<p class="tc-muted">Muted</p>
<p class="tc-inv">Inverse</p>
<p class="tc-primary">Primary</p>
<p class="tc-secondary">Secondary</p>
<p class="tc-success">Success</p>
<p class="tc-warning">Warning</p>
<p class="tc-danger">Danger</p>
Output

Normal

Muted

Inverse

Primary

Secondary

Success

Warning

Danger