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

title

Caps

Left align

Center

Right align

<p class="bold">Bold</p>
<p class="normal">Normal</p>
<p class="italic">Italic</p>
<p class="title">title</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>

Shape

<button class="btn btn-primary">Default</button>
<button class="btn btn-primary round">Round</button>
<button class="btn btn-primary square">Square</button>
<button class="btn btn-primary wide">Wide</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="underline">Underline</a>
<a class="btn">Link Button</a>
<a class="btn btn-primary">Styled Link Button</a>

Forms

Fields

Personal
Account
Contact
Helper text for a form field. Can use this text to link to more info.
<form>
  <legend>Personal</legend>
  <fieldset class="mb-3">
    <div class="mb-2">
      <label>Name</label>
      <input type="text" class="block" placeholder="John Doe">
    </div>
    <div class="mb-2">
      <label class="block">
        Date of Birth
        <span class="normal" style="color:#8d949e;">(optional)</span>
      </label>
      <select class="mb-0">
        <option>Month</option>
      </select>
      <select class="mb-0">
        <option>Day</option>
      </select>
      <select class="mb-0">
        <option>Year</option>
      </select>
    </div>
  </fieldset>
  <legend>Account</legend>
  <fieldset class="mb-3">
    <div class="mb-2">
      <label>Email</label>
      <input type="email" class="block" placeholder="john@johndoe.com">
    </div>
    <div class="mb-2">
      <label>Password</label>
      <input type="password" class="block">
    </div>
  </fieldset>
  <legend>Contact</legend>
  <fieldset class="mb-3">
    <div class="mb-2">
      <label>Address</label>
      <input type="text" class="block" placeholder="938 Jackson St.">
    </div>
    <div class="mb-2">
      <label>City</label>
      <input type="text" class="block" placeholder="Jackson">
    </div>
    <div class="mb-2">
      <label>State</label>
      <select class="block">
        <option value="">- Select your state -</option>
      </select>
    </div>
    <div class="mb-2">
      <label>Phone</label>
      <input type="text" class="block" placeholder="837-383-3678">
    </div>
    <div class="mb-2">
      <label>
        Comments
        <span class="normal" style="color:#8d949e;">(optional)</span>
      </label>
      <textarea class="block" name="comment"></textarea>
      <small style="color:#8d949e;">
        Helper text for a form field. Can use this text to 
        <a class="underline" href="#">link to more info.</a>
      </small>
    </div>
  </fieldset>
  <button type="submit" class="btn btn-primary">Sign Up</button>
</form>

Checkboxes

Favorite Colors
<form>
  <fieldset id="favorite_colors">
    <legend>Favorite Colors</legend>
    <div class="flex items-center mb-1">
      <input type="checkbox" id="red" name="color" value="Red">
      <label for="red">Red</label>
    </div>
    <div class="flex items-center mb-1">
      <input type="checkbox" id="orange" name="color" value="Orange">
      <label for="orange">Orange</label>
    </div>
    <div class="flex items-center mb-1">
      <input type="checkbox" id="yellow" name="color" value="Yellow">
      <label for="yellow">Yellow</label>
    </div>
    <div class="flex items-center mb-1">
      <input type="checkbox" id="green" name="color" value="Green">
      <label for="green">Green</label>
    </div>
    <div class="flex items-center mb-1">
      <input type="checkbox" id="blue" name="color" value="Blue">
      <label for="blue">Blue</label>
    </div>
    <div class="flex items-center mb-1">
      <input type="checkbox" id="violet" name="color" value="Violet">
      <label for="violet">Violet</label>
    </div>
    <div class="flex items-center mb-1">
      <input type="checkbox" id="brown" name="color" value="Brown">
      <label for="brown">Brown</label>
    </div>
    <div class="flex items-center 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="flex items-center mb-1">
      <input type="radio" id="mac" name="os" value="Mac">
      <label for="mac">Mac</label>
    </div>
    <div class="flex items-center mb-1">
      <input type="radio" id="windows" name="os" value="Windows">
      <label for="windows">Windows</label>
    </div>
    <div class="flex items-center mb-1">
      <input type="radio" id="chrome" name="os" value="Chrome">
      <label for="chrome">Chrome</label>
    </div>
    <div class="flex items-center mb-1">
      <input type="radio" id="linux" name="os" value="Linux">
      <label for="linux">Linux</label>
    </div>
  </fieldset>
</form>

Code & Syntax Highlighting

Inline Code

Run the function saveAll() and continue working.

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

Preformatted Text

Pre
    formatt
            ed
<pre>
Pre
    formatt
            ed
<pre>

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>