Basscss / Docs

Base

Base element styles control native HTML elements such as headings, paragraphs, buttons, and forms in a systematic and opinionated way. These styles include typographical considerations and utilities derived from base elements, such as typefaces, the type scale, forms, and buttons.

Typography

Base type scale

Base type elements are normalized to a simple type scale that works well across devices.

Hamburger 1

Hamburger 2

Hamburger 3

Hamburger 4

Hamburger 5
Hamburger 6
<h1>Hamburger 1</h1>
<h2>Hamburger 2</h2>
<h3>Hamburger 3</h3>
<h4>Hamburger 4</h4>
<h5>Hamburger 5</h5>
<h6>Hamburger 6</h6>

Type scale utilities

Use the .h1.h6 font-size utilities to override an element’s default size.

Pork Chop 1

Pork Chop 2

Pork Chop 3

Pork Chop 4

Pork Chop 5

Pork Chop 6

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

Forms

Forms use base styles for their structure with color styles applied to adjust the look and feel. This creates a rhythmic consitency among all forms while allowing thematic differences where needed. Form elements do not rely on nested styles or markup structure, so utility styles can be used for contextual adjustments.

Inline Forms

By default, form elements display inline. Use the default .input style or create custom color styles to control the appearance.

<form>
  <label class="">Search</label>
  <input type="text" class="input">
  <button class="button-blue">Go</button>
</form>

Stacked Forms

Use .block and other utilities to stack form elements. The use of utilities allows for a lot of flexibility when building form layouts.

<form class="sm-col-6">
  <label>Email Address</label>
  <input type="text" class="block full-width input">
  <label>Password</label>
  <input type="password" class="block full-width input">
  <label>Select</label>
  <select class="block full-width input">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
  </select>
  <label class="block full-width mb2">
    <input type="checkbox" checked>
    Remember me
  </label>
  <button class="button-blue">Sign In</button>
</form>

Buttons

Base button styles are defined in base. Use color styles and custom extensions to adjust their appearance.

Link Button
<div class="mb1">
  <button>Button</button>
  <a href="#!" class="button">Link Button</a>
</div>
<div class="mb1">
  <button class="button-blue">Button Blue</button>
  <button class="button-blue-outline">Button Blue Outline</button>
  <button class="button-gray">Button Gray</button>
</div>

Tables

Default table structural styles are defined in base. Use the default table-light color style with other color utilities or create custom theme extensions to suit your needs.

Artist Album Release Date
Huey Lewis and the News Sports 1983
Phil Collins No Jacket Required 1985
Peter Gabriel So 1986
<table class="table-light">
  <thead>
    <tr>
      <th>Artist</th> <th>Album</th> <th>Release Date</th>
    </tr>
  </thead>
  <tbody>
    <tr> <td>Huey Lewis and the News</td> <td>Sports</td> <td>1983</td> </tr>
    <tr> <td>Phil Collins</td> <td>No Jacket Required</td> <td>1985</td> </tr>
    <tr> <td>Peter Gabriel</td> <td>So</td> <td>1986</td> </tr>
  </tbody>
</table>
Typography Forms Buttons Tables