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.

Base Reset

basscss-base-reset v0.0.3

This lightweight reset for base elements sets margin 0 for the body and button elements, sets font-family inherit for form elements, and sets max-width 100% for images.


CSS Source

4 Rules
8 Selectors
5 Declarations
5 Properties
body,
button {
  margin: 0;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
}

img {
  max-width: 100%;
}

svg {
  max-height: 100%;
}

Base Typography

basscss-base-typography v0.0.3

Base type scale

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.

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

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>

Lists

By default, lists have bullets or numbers and padding left.

  • Half-Smoke
  • Kielbasa
  • Bologna
  1. Prosciutto
  2. Andouille
  3. Bratwurst
  4. Chorizo
<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.

  • List Reset
  • Removes bullets
  • Removes numbers
  • Removes padding
<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.

  • Half-Smoke
  • Kielbasa
  • Bologna
  • Prosciutto
<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>

CSS Source

17 Rules
35 Selectors
51 Declarations
27 Properties
/* Basscss Base Typography */

body {
  font-family: var(--font-family);
  line-height: var(--line-height);
  font-size: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-line-height);
  margin-top: 1em;
  margin-bottom: .5em;
}

p,
dl,
ol,
ul {
  font-size: var(--h4);
  margin-top: 0;
  margin-bottom: var(--space-2);
}

ol,
ul {
  padding-left: var(--space-3);
}

pre,
code,
samp {
  font-family: var(--monospace-font-family);
  font-size: inherit;
}

pre {
  margin-top: 0;
  margin-bottom: var(--space-2);
  overflow-x: scroll;
}

hr {
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}

blockquote {
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
  margin-left: 0;
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

blockquote,
blockquote p {
  font-size: var(--h3);
  font-style: italic;
}

h1,
.h1 {
  font-size: var(--h1);
}

h2,
.h2 {
  font-size: var(--h2);
}

h3,
.h3 {
  font-size: var(--h3);
}

h4,
.h4 {
  font-size: var(--h4);
}

h5,
.h5 {
  font-size: var(--h5);
}

h6,
.h6 {
  font-size: var(--h6);
}

.list-reset {
  list-style: none;
  padding-left: 0;
}

:root {
  --font-family: 'Helvetica Neue', Helvetica, sans-serif;
  --line-height: 1.5;
  --heading-font-family: var(--font-family);
  --heading-font-weight: bold;
  --heading-line-height: 1.25;
  --monospace-font-family: 'Source Code Pro', Consolas, monospace;
  --h1: 2rem;
  --h2: 1.5rem;
  --h3: 1.25rem;
  --h4: 1rem;
  --h5: .875rem;
  --h6: .75rem;
  --bold-font-weight: bold;
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 4rem;
}

Base Forms

basscss-base-forms v1.0.6

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.

<form>
  <label>Search</label>
  <input type="text" class="mb0 field-light">
  <button class="button">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 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">Sign In</button>
  <button type="reset" class="button bg-gray">Cancel</button>
</form>

Fieldsets

Fieldsets can be reset with .fieldset-reset to allow for easier styling of the fieldset and legend.

Fieldset 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">Submit</button>
</form>

CSS Source

8 Rules
22 Selectors
25 Declarations
16 Properties
/* Basscss Base Forms */

input,
select,
textarea,
fieldset {
  font-size: var(--form-field-font-size);
  margin-top: 0;
  margin-bottom: var(--space-1, .5rem);
}

input[type=text],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=time],
input[type=url],
input[type=week] {
  box-sizing: border-box;
  height: var(--form-field-height);
  padding: var(--form-field-padding-y) var(--form-field-padding-x);
  vertical-align: middle;
  -webkit-appearance: none;
}

select {
  box-sizing: border-box;
  line-height: 1.75;
  padding: var(--form-field-padding-y) var(--form-field-padding-x);
}

select:not([multiple]) {
  height: var(--form-field-height);
  vertical-align: middle;
}

textarea {
  box-sizing: border-box;
  line-height: 1.75;
  padding: var(--form-field-padding-y) var(--form-field-padding-x);
}

.fieldset-reset {
  padding: 0;
  margin-left: 0;
  margin-right: 0;
  border: 0;
}

.fieldset-reset legend {
  padding: 0;
}

:root {
  --form-field-font-size: 1rem;
  --form-field-height: 2.25rem;
  --form-field-padding-y: .5rem;
  --form-field-padding-x: .5rem;
}

Base Buttons

basscss-base-buttons v1.0.6

Structural styles and resets for buttons are set in this base element styles module. All buttons share common padding and height, well suited for tap targets on touchscreen displays.

Link Button
<div class="mb1">
  <button>Button</button>
  <a href="#!" class="button">Link Button</a>
  <input type="button" class="button" value="Input Button">
</div>

Color style modules and other custom extensions adjust their surface-level appearance.

<div class="mb1">
  <button class="button mb1">Button</button>
  <button class="button-outline blue mb1">Button Outline</button>
  <button class="button black bg-silver mb1">Silver Button</button>
  <button class="button bg-red mb1">Button Red</button>
  <button class="button-transparent mb1">Transparent Button</button>
</div>

Note: adjusting the line-height and padding variables may require adjustments to form element variables to maintain vertical alignment.


CSS Source

5 Rules
9 Selectors
22 Declarations
18 Properties
/* Basscss Base Buttons */

button,
.button {
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  box-sizing: border-box;
  line-height: var(--button-line-height);
  padding: var(--button-padding-y) var(--button-padding-x);
  margin: 0;
  height: auto;
  border: 1px solid transparent;
  vertical-align: middle;
  -webkit-appearance: none;
}

button:after,
button:before,
.button:after,
.button:before {
  box-sizing: border-box;
}

::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.button:hover {
  text-decoration: none;
}

:root {
  --button-font-size: inherit;
  --button-font-weight: var(--bold-font-weight, bold);
  --button-line-height: 1.125rem;
  --button-padding-y: .5rem;
  --button-padding-x: 1rem;
}

Base Tables

basscss-base-tables v0.1.1

basscss.com

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>

CSS Source

6 Rules
7 Selectors
18 Declarations
17 Properties
/* Basscss Base Tables */

table {
  border-collapse: separate;
  border-spacing: 0;
  max-width: 100%;
  width: 100%;
}

th {
  text-align: left;
  font-weight: var(--table-header-font-weight);
}

th,
td {
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  line-height: inherit;
}

th {
  vertical-align: bottom;
}

td {
  vertical-align: top;
}

:root {
  --bold-font-weight: bold;
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 4rem;
  --table-header-font-weight: var(--bold-font-weight);
  --table-cell-padding-x: var(--space-2);
  --table-cell-padding-y: .25rem;
}