Litespeed CSS

Built for designing systems fast.

GitHub

Headings

H1

H2

H3

H4

H5
H6
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

Type Scale

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<p class="h1">Heading 1</p>
<p class="h2">Heading 2</p>
<p class="h3">Heading 3</p>
<p class="h4">Heading 4</p>
<p class="h5">Heading 5</p>
<p class="h6">Heading 6</p>

Typography

Bold

Normal

Italic

Caps

Left align

Center

Right align

<p class="bold">Bold</p>
<p class="normal">Normal</p>
<p class="italic">Italic</p>
<p class="caps">Caps</p>
<p class="left-align">Left align</p>
<p class="center">Center</p>
<p class="right-align">Right align</p>

Buttons

Default

<button>Button</button>
<button class="btn">Button</button>

Color

<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline">Outline</button>
<button class="btn btn-default">Default</button>

Size

<button class="btn btn-default btn-lg">Large</button>
<button class="btn btn-default">Normal</button>
<button class="btn btn-default btn-sm">Small</button>

Links

<a>Default</a>
<a class="btn btn-primary">Link Button</a>

Forms

Fields

Helper text for the form control.
<form>
  <label class="bold">
    Name
    <span class="normal">(optional)</span>
  </label>
  <input type="text" class="block field"/>
  <small class="">Helper text for the form control.</small>
</form>

Checkboxes

Favorite Colors
<form>
  <fieldset id="favorite_colors">
    <legend>Favorite Colors</legend>
    <div class="block mb-1">
      <input type="checkbox" id="red" name="color" value="Red">
      <label for="red">Red</label>
    </div>
    <div class="block mb-1">
      <input type="checkbox" id="orange" name="color" value="Orange">
      <label for="orange">Orange</label>
    </div>
    <div class="block mb-1">
      <input type="checkbox" id="yellow" name="color" value="Yellow">
      <label for="yellow">Yellow</label>
    </div>
    <div class="block mb-1">
      <input type="checkbox" id="green" name="color" value="Green">
      <label for="green">Green</label>
    </div>
    <div class="block mb-1">
      <input type="checkbox" id="blue" name="color" value="Blue">
      <label for="blue">Blue</label>
    </div>
    <div class="block mb-1">
      <input type="checkbox" id="violet" name="color" value="Violet">
      <label for="violet">Violet</label>
    </div>
    <div class="block mb-1">
      <input type="checkbox" id="brown" name="color" value="Brown">
      <label for="brown">Brown</label>
    </div>
    <div class="block mb-1">
      <input type="checkbox" id="black" name="color" value="Black">
      <label for="black">Black</label>
    </div>
  </fieldset>
</form>

Radio Buttons

Operating System
<form>
  <fieldset id="operation_system">
    <legend>Operating System</legend>
    <div class="block mb-1">
      <input type="radio" id="mac" name="os" value="Mac">
      <label for="mac">Mac</label>
    </div>
    <div class="block mb-1">
      <input type="radio" id="windows" name="os" value="Windows">
      <label for="windows">Windows</label>
    </div>
    <div class="block mb-1">
      <input type="radio" id="chrome" name="os" value="Chrome">
      <label for="chrome">Chrome</label>
    </div>
    <div class="block mb-1">
      <input type="radio" id="linux" name="os" value="Linux">
      <label for="linux">Linux</label>
    </div>
  </fieldset>
</form>

Code & Syntax Highlighting

Run the function saveAll() and continue working.

<p>Run the function <code>saveAll()</code> and continue working.</p>
Pre
    formatt
            ed

Tables

Column 1 Column 2 Column 3 Column 4
Cell 1 Cell 2 Cell 3 Cell 4
<table>
  <thead>
    <tr>
      <td>Column 1</td>
      <td>Column 2</td>
      <td>Column 3</td>
      <td>Column 4</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
  </thead>
</table>

Lists

  • Burger
  • Fries
  • Shake
<ul>
  <li>Burger</li>
  <li>Fries</li>
  <li>Shake</li>
</ul>