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.
Typographic elements are normalized to a simple type scale that works well across devices. Default top and bottom margins are set for commonly-used typographic elements.
<h1>Hamburger 1</h1>
<h2>Hamburger 2</h2>
<h3>Hamburger 3</h3>
<h4>Hamburger 4</h4>
<h5>Hamburger 5</h5>
<h6>Hamburger 6</h6>
The .h1
– .h6
font-size utilities can be used to override an element’s default size.
Pastrami 1
Pastrami 2
Pastrami 3
Pastrami 4
Pastrami 5
Pastrami 6
<p class="h1">Pastrami 1</p>
<p class="h2">Pastrami 2</p>
<p class="h3">Pastrami 3</p>
<p class="h4">Pastrami 4</p>
<p class="h5">Pastrami 5</p>
<p class="h6">Pastrami 6</p>
By default, lists have bullets or numbers and padding left.
<ul>
<li>Half-Smoke</li>
<li>Kielbasa</li>
<li>Bologna</li>
</ul>
<ol>
<li>Prosciutto</li>
<li>Andouille</li>
<li>Bratwurst</li>
<li>Chorizo</li>
</ol>
To remove default list styling, use .list-reset
.
<ul class="list-reset">
<li>List Reset</li>
<li>Removes bullets</li>
<li>Removes numbers</li>
<li>Removes padding</li>
</ul>
To set lists inline, use utilities.
<ul class="list-reset">
<li class="inline-block mr1">Half-Smoke</li>
<li class="inline-block mr1">Kielbasa</li>
<li class="inline-block mr1">Bologna</li>
<li class="inline-block mr1">Prosciutto</li>
</ul>
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.
By default, form elements display inline.
<form>
<label>Search</label>
<input type="text" class="mb0 field-light">
<button class="button-blue">Go</button>
</form>
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 field-light">
<label>Password</label>
<input type="password" class="block full-width field-light">
<label>Select</label>
<select class="block full-width field-light">
<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 type="submit" class="button-blue">Sign In</button>
<button type="reset" class="button-gray">Cancel</button>
</form>
Fieldsets can be reset with .fieldset-reset
to allow for easier styling of the fieldset and legend.
<form class="sm-col-6">
<fieldset class="fieldset-reset">
<legend class="h3 bold">Fieldset Legend</legend>
<label>Hamburger</label>
<input type="text" class="block full-width field-light">
<label>Hot Dog</label>
<input type="text" class="block full-width field-light">
</fieldset>
<button type="sumbit" class="button-blue">Submit</button>
</form>
To customize base form field styles, use the following variables.
:root {
--form-field-font-size: 1rem;
--form-field-height: 2.25rem;
--form-field-padding-y: .5rem;
--form-field-padding-x: .5rem;
}
Default table styles are defined in base.
Use the table-light
color style from the basscss-color-tables
module
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 |
<div class="overflow-scroll">
<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>
</div>