Kitchen Sink

Demo page for elements and default styles.

Modules

Base Reset

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.


Base Typography

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>

Base 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.

<form>
  <label>Search</label>
  <input type="text" class="mb0 field-light">
  <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 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

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

Default Variables

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;
}

Base Buttons

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-blue mb1">Button Blue</button>
  <button class="button-blue-outline mb1">Button Blue Outline</button>
  <button class="button-light-gray mb1">Button Light Gray</button>
  <button class="button-red mb1">Button Red</button>
</div>

Default Variables

To customize base button styles, use the following variables.

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

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


Base Tables

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>

Utility Layout

basscss.com

Change the default document flow with display, float, and other utilities.

.inline       { display: inline }
.block        { display: block }
.inline-block { display: inline-block }

.overflow-hidden { overflow: hidden }
.overflow-auto   { overflow: auto }
.overflow-scroll { overflow: scroll }

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table
}
.clearfix:after { clear: both }

.left  { float: left }
.right { float: right }

.fit { max-width: 100% }

.half-width { width: 50% }
.full-width { width: 100% }

Media Object

Create a media object using basic utilities.

Image

Body Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.

<div class="clearfix mb2 outline-blue">
  <div class="left p2 mr1">Image</div>
  <div class="overflow-hidden">
    <p><b>Body</b> Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
  </div>
</div>

Double-Sided Media Object

For a container with a flexible center, use a double-sided media object.

Image
Image

Body Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.

<div class="clearfix mb2 outline-blue">
  <div class="left p2 mr1">Image</div>
  <div class="right p2 ml1">Image</div>
  <div class="overflow-hidden">
    <p><b>Body</b> Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
  </div>
</div>

Utility Typography

basscss.com

Change typographic styles and defaults with these utilities.

Bold

Regular

Italic

Caps

Left align

Center

Right align

Justify Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.

<p class="bold">Bold</p>
<p class="regular">Regular</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>
<p class="justify">Justify Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>

Utility White Space

basscss.com

Margin and padding utilities are based on a global white space scale defined with variables. These utilities use a shorthand naming convention.

Shorthand Description
m Margin
p Padding
t Top
r Right
b Bottom
l Left
x X-axis (left and right)
y Y-axis (top and bottom)
n Negative (margin only)
1 --space-1 (default .5rem)
2 --space-2 (default 1rem)
3 --space-3 (default 2rem)
4 --space-4 (default 4rem)

Margins

Change or reset default margins using the global white space scale. Negative x-axis margins are used to offset padding. Margin auto is used to horizontally center block-level elements with a set width.

.m0  { margin:        0 }
.mt0 { margin-top:    0 }
.mr0 { margin-right:  0 }
.mb0 { margin-bottom: 0 }
.ml0 { margin-left:   0 }

.m1  { margin:        var(--space-1) }
.mt1 { margin-top:    var(--space-1) }
.mr1 { margin-right:  var(--space-1) }
.mb1 { margin-bottom: var(--space-1) }
.ml1 { margin-left:   var(--space-1) }

.m2  { margin:        var(--space-2) }
.mt2 { margin-top:    var(--space-2) }
.mr2 { margin-right:  var(--space-2) }
.mb2 { margin-bottom: var(--space-2) }
.ml2 { margin-left:   var(--space-2) }

.m3  { margin:        var(--space-3) }
.mt3 { margin-top:    var(--space-3) }
.mr3 { margin-right:  var(--space-3) }
.mb3 { margin-bottom: var(--space-3) }
.ml3 { margin-left:   var(--space-3) }

.m4  { margin:        var(--space-4) }
.mt4 { margin-top:    var(--space-4) }
.mr4 { margin-right:  var(--space-4) }
.mb4 { margin-bottom: var(--space-4) }
.ml4 { margin-left:   var(--space-4) }

.mxn1 { margin-left: -var(--space-1); margin-right: -var(--space-1); }
.mxn2 { margin-left: -var(--space-2); margin-right: -var(--space-2); }
.mxn3 { margin-left: -var(--space-3); margin-right: -var(--space-3); }
.mxn4 { margin-left: -var(--space-4); margin-right: -var(--space-4); }

.mx-auto { margin-left: auto; margin-right: auto; }

Padding

Padding utilities are only available in symmetrical orientations. This is to normalize the spacing used around elements.

.p1  { padding:       var(--space-1) }
.py1 { padding-top:   var(--space-1); padding-bottom: var(--space-1) }
.px1 { padding-left:  var(--space-1); padding-right:  var(--space-1) }

.p2  { padding:       var(--space-2) }
.py2 { padding-top:   var(--space-2); padding-bottom: var(--space-2) }
.px2 { padding-left:  var(--space-2); padding-right:  var(--space-2) }

.p3  { padding:       var(--space-3) }
.py3 { padding-top:   var(--space-3); padding-bottom: var(--space-3) }
.px3 { padding-left:  var(--space-3); padding-right:  var(--space-3) }

.p4  { padding:       var(--space-4) }
.py4 { padding-top:   var(--space-4); padding-bottom: var(--space-4) }
.px4 { padding-left:  var(--space-4); padding-right:  var(--space-4) }

Margins and padding should never be declared outside of these utilities. This is meant to help create consistent rhythm and avoid magic numbers. If, for some reason, the default white space scale does not accomodate your design, customize and extend it before implementation.


Utility Responsive States

basscss.com

These styles allow for conditionally showing and hiding elements using a mobile-first approach.

Prefix Naming Convention

Prefix Description
(no prefix) Not scoped to a breakpoint
sm- --breakpoint-sm (default: min-width 40em)
md- --breakpoint-md (default: min-width 52em)
lg- --breakpoint-lg (default: min-width 64em)

To adjust the default breakpoints, declare custom media queries after importing the file via Rework, or manually adjust them in CSS.

.sm-show, .md-show, .lg-show {
  display: none !important
}
@media (--breakpoint-sm) {
  .sm-show { display: block !important }
}
@media (--breakpoint-md) {
  .md-show { display: block !important }
}
@media (--breakpoint-lg) {
  .lg-show { display: block !important }
}
@media (--breakpoint-sm) {
  .sm-hide { display: none !important }
}
@media (--breakpoint-md) {
  .md-hide { display: none !important }
}
@media (--breakpoint-lg) {
  .lg-hide { display: none !important }
}
.display-none { display: none !important }
.hide {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

Example

Resize the browser window to see the effect.

Visible from --breakpoint-sm and up.

Hidden from --breakpoint-sm and up.

<h3 class="sm-show">Visible from <code>--breakpoint-sm</code> and up.</h3>
<h3 class="sm-hide red">Hidden from <code>--breakpoint-sm</code> and up.</h3>

Responsive Line Break

Control wrapping at different screen widths.

Responsive Line Break
To Control Wrapping

<h1>
  Responsive Line Break
  <br class="md-show">
  To Control Wrapping
</h1>

UI Utility Button Sizes

These utilities extend the basscss-base-buttons styles. To change the line-height and padding but leave the font-size the same, use button size extensions.

<button type="button" class="button-big button-blue">Burgers</button>
<button type="button" class="button-blue">Fries</button>
<div class="mb1 md-hide"></div>
<button type="button" class="button-narrow button-blue">Onion Rings</button>
<button type="button" class="button-small button-blue">Shakes</button>

UI Utility Groups

Use group utilities for fine-grained control over visually grouping buttons, form fields, and other elements.

Button Groups

Button groups allow for more flexibility in establishing gestalt and controlling information density. Use a combination of layout utilities and color extensions to create button groups. The utilities .rounded-left, .rounded-right, and .not-rounded can be used to override button and form field border radii.

<div class="inline-block clearfix">
  <button type="button" class="left button-blue rounded-left is-active">Burgers</button>
  <button type="button" class="left button-blue border-left not-rounded">Fries</button>
  <button type="button" class="left button-blue border-left rounded-right">Shakes</button>
</div>

Normally, buttons with borders would double up when placed next to each other. The .x-group-item utility adjusts negative margins and focus states to visually collapse borders. Functionally, this is similar to how other frameworks handle button and form input groups, but with more direct control over styling.

<div class="inline-block clearfix">
  <button type="button" class="left button-blue-outline x-group-item rounded-left is-active">Burgers</button>
  <button type="button" class="left button-blue-outline x-group-item not-rounded">Fries</button>
  <button type="button" class="left button-blue-outline x-group-item rounded-right">Shake</button>
</div>

Use .y-group-item to group elements vertically.

<div class="inline-block">
  <button type="button" class="block full-width button-blue-outline y-group-item rounded-top is-active">Burgers</button>
  <button type="button" class="block full-width button-blue-outline y-group-item not-rounded">Fries</button>
  <button type="button" class="block full-width button-blue-outline y-group-item rounded-bottom">Shake</button>
</div>

Input Groups

Input groups can be created by removing margins, adjusting border radii, and using the group utilities. The .hide utility visually hides labels, while keeping them accessible to screen readers.

<form class="sm-col-6">
  <label class="hide">Pancakes</label>
  <input type="text" class="block full-width mb0 field-light rounded-top y-group-item" placeholder="Pancakes">
  <label class="hide">Making</label>
  <input type="password" class="block full-width mb0 field-light not-rounded y-group-item" placeholder="Making">
  <label class="hide">Bacon</label>
  <input type="text" class="block full-width field-light rounded-bottom y-group-item" placeholder="Bacon">
  <button type="submit" class="button-blue">Pancake</button>
</form>

The grid system can be used to control button or input group widths.

<form class="clearfix">
  <label class="hide">Bacon</label>
  <input type="text" class="col col-4 md-col-5 mb0 field-light rounded-left x-group-item" placeholder="Bacon">
  <label class="hide">Pancakes</label>
  <input type="password" class="col col-4 md-col-5 mb0 field-light not-rounded x-group-item" placeholder="Pancakes">
  <button type="submit" class="col col-4 md-col-2 button-blue rounded-right">Pancake</button>
</form>

Positions

basscss.com

These styles alter the default document flow.

Use positions with caution. They are often unnecessary and commonly misused.
See the Guide to Basics for more info.

.relative { position: relative }
.absolute { position: absolute }
.fixed    { position: fixed }

.top-0    { top: 0 }
.right-0  { right: 0 }
.bottom-0 { bottom: 0 }
.left-0   { left: 0 }

.z1 { z-index: 1 }
.z2 { z-index: 2 }
.z3 { z-index: 3 }
.z4 { z-index: 4 }

.absolute-center {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: table;
}

Grid

basscss.com

The utility-based grid allows a lot of flexibility in creating complex layouts. Start by using a .clearfix container.

Optionally use a .container to set a max-width. Adjust the container width with the --container-width variable.

<div class="container">
  <div class="clearfix">
  </div>
</div>

Add columns using the .col and grid width .col-N classes. .col floats elements left and sets box-sizing to border-box. .col-N sets width according to a 12 column grid. The total number of columns in a row should add up to 12.

.col.col-6
.col.col-6
<div class="clearfix outline-blue">
  <div class="col col-6">.col.col-6</div>
  <div class="col col-6">.col.col-6</div>
</div>

Responsive Grid

Use breakpoint-prefixed column utilities to change the grid at different screen widths. Each breakpoint applies to that screen width and up. Unprefixed styles apply to all screen widths.

.sm-col.sm-col-6.md-col-5.lg-col-4
.sm-col.sm-col-6.md-col-7.lg-col-8
<div class="clearfix outline-blue">
  <div class="sm-col sm-col-6 md-col-5 lg-col-4">.sm-col.sm-col-6.md-col-5.lg-col-4</div>
  <div class="sm-col sm-col-6 md-col-7 lg-col-8">.sm-col.sm-col-6.md-col-7.lg-col-8</div>
</div>

Gutters

Use padding and negative margin utilities to create gutters based on the white space scale. When using negative margin, be sure to compensate for the extra width created with a padded parent element or by using overflow hidden. Otherwise, horizontal scrolling may occur.

.px2
.px2
<div class="clearfix mxn2 outline-blue">
  <div class="sm-col sm-col-6 md-col-5 lg-col-4 px2"><div>.px2</div></div>
  <div class="sm-col sm-col-6 md-col-7 lg-col-8 px2"><div>.px2</div></div>
</div>

Nesting

Nest whole grid structures within columns to created nested grids.

Unnested
Nested
Nested
<div class="clearfix mxn2 outline-blue">
  <div class="sm-col sm-col-6 md-col-5 lg-col-4 px2"><div>Unnested</div></div>
  <div class="sm-col sm-col-6 md-col-7 lg-col-8 px2">
    <div class="clearfix mxn2">
      <div class="col col-6 px2"><div>Nested</div></div>
      <div class="col col-6 px2"><div>Nested</div></div>
    </div>
  </div>
</div>

Reversed

To reverse the order of columns, use the .col-right class to float right

.col-right.col-6
.col.col-6
<div class="clearfix outline-blue">
  <div class="col-right col-6">.col-right.col-6</div>
  <div class="col col-6">.col.col-6</div>
</div>

Centering Columns

Use the .mx-auto class to center columns within their containers.

Centered Column
<div class="clearfix mxn2 outline-blue">
  <div class="col-8 px2 mx-auto">
    <div>Centered Column</div>
  </div>
</div>

Table Object

basscss.com

Use the table object to vertically center content. These styles can be combined with grid width and white-space utilities for a wide range of layout options. Apply padding to .table-cell elements to contol spacing.

.table-cell

For vertically centered content

.table-cell
<div class="table outline-blue">
  <div class="table-cell">
    <h1 class="m0">.table-cell</h1>
    <p class="m0">For vertically centered content</p>
  </div>
  <div class="table-cell">.table-cell</div>
</div>

Flag Object

The flag object can be emulated by adding .full-width to one of the cells. To add padding to the body, nest another div within the full-width cell.

Image

Flag Body

The full-width utility makes the table object behave like the flag object.

<div class="table outline-blue">
  <div class="table-cell p2">Image</div>
  <div class="table-cell full-width">
    <h1 class="m0">Flag Body</h1>
    <p class="m0">The full-width utility makes the table object behave like the flag object.</p>
  </div>
</div>

Equal width cells

Use the .table-fixed extension to create equal-width cells.

.table-cell

For vertically centered content

.table-cell
.table-cell
<div class="table table-fixed outline-blue">
  <div class="table-cell">
    <h1 class="m0">.table-cell</h1>
    <p class="m0">For vertically centered content</p>
  </div>
  <div class="table-cell">.table-cell</div>
  <div class="table-cell">.table-cell</div>
</div>

Responsive Table Object

Use breakpoint prefixes to keep table objects stacked at smaller screen sizes. This is useful for things like navigation.

.sm-table-cell

Only kicks in above the small breakpoint

.sm-table-cell

.lg-table-cell

Only kicks in above the large breakpoint

.lg-table-cell
<div class="sm-table mb1 outline-blue">
  <div class="sm-table-cell">
    <h1 class="m0">.sm-table-cell</h1>
    <p class="m0">Only kicks in above the small breakpoint</p>
  </div>
  <div class="sm-table-cell">.sm-table-cell</div>
</div>
<div class="lg-table outline-blue">
  <div class="lg-table-cell">
    <h1 class="m0">.lg-table-cell</h1>
    <p class="m0">Only kicks in above the large breakpoint</p>
  </div>
  <div class="lg-table-cell">.lg-table-cell</div>
</div>

Table Grid

The table object can be combined with grid width utilities to create vertically centered columns.

.table-cell.col-7

For vertically centered content

.table-cell.col-5
<div class="table outline-blue">
  <div class="table-cell col-7">
    <h1 class="m0">.table-cell.col-7</h1>
    <p class="m0">For vertically centered content</p>
  </div>
  <div class="table-cell col-5">.table-cell.col-5</div>
</div>

MIT License


Color Base

basscss.com

Sets color styles for the body tag, links, pre, code, and hr tags.

Default Variables

:root {
  --blue: #0076df;
  --dark-gray: #333;
  --light-gray: #ccc;
  --lighter-gray: #eee;
  --border-radius: 3px;
  --border-width: 1px;
  --border-color: var(--light-gray);
}

Color Buttons

basscss.com

Includes the following basic button modules: .button-blue, .button-blue-outline, .button-light-gray, .button-red, .button-nav-light, and .button-nav-dark.

Use these styles on button elements, or with the basscss-base-buttons module for links and input buttons.

Link Button
<div class="mb1">
  <button>Button</button>
  <a href="#!" class="button">Link Button</a>
  <input type="button" class="button" value="Input Button">
</div>
<div class="mb1">
  <button class="button-blue mb1">Button Blue</button>
  <button class="button-blue-outline mb1">Button Blue Outline</button>
  <button class="button-light-gray mb1">Button Light Gray</button>
  <button class="button-red mb1">Button Red</button>
</div>

Button styles can be used for navigation. The .button-nav-light style adds a subtle hover effect for links on a light background.

<div class="mxn1">
  <a href="#!" class="button button-narrow button-nav-light">Burgers</a>
  <a href="#!" class="button button-narrow button-nav-light">Fries</a>
  <a href="#!" class="button button-narrow button-nav-light">Shakes</a>
  <a href="#!" class="button button-narrow button-nav-light">Onion Rings</a>
</div>

For dark backgrounds, use the .button-nav-dark style.

<div class="bg-dark-gray">
  <a href="#!" class="button button-narrow button-nav-dark">Burgers</a>
  <a href="#!" class="button button-narrow button-nav-dark">Fries</a>
  <a href="#!" class="button button-narrow button-nav-dark">Shakes</a>
  <a href="#!" class="button button-narrow button-nav-dark">Onion Rings</a>
</div>

Color Forms

basscss.com

Basic color styles for form elements on a light background.

Input Fields

To style the color, background, and border styles for form fields, use the .field-light style.

<label>Input</label>
<input type="text" class="block full-width field-light">
<label>Select</label>
<select class="block full-width field-light">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<label>Textarea</label>
<textarea class="block full-width field-light"></textarea>

The .field-light style includes states for disabled and read-only fields, as well as success, warning, and error states.

<label>Normal</label>
<input type="text" class="block full-width field-light">
<label>Disabled</label>
<input type="text" class="block full-width field-light" disabled value="This is disabled">
<label>Read Only</label>
<input type="text" class="block full-width field-light" readonly value="This is read-only">
<label>Required</label>
<input type="text" class="block full-width field-light" required>
<label>Success</label>
<input type="text" class="block full-width field-light is-success">
<label>Warning</label>
<input type="text" class="block full-width field-light is-warning">
<label>Error</label>
<input type="text" class="block full-width field-light is-error">

Style radio buttons and checkboxes with the .radio-light and .checkbox-light styles. These add focus states that are consistent with the other form elements.

<label class="block">
  <input type="checkbox" class="checkbox-light">
  Checkbox
</label>
<label class="block">
  <input type="radio" class="radio-light">
  Radio
</label>

Color Forms Dark

basscss.com

Color styles for form elements on dark backgrounds.

Input Fields

To style the color, background, and border styles for form fields on dark backgrounds, use the .field-dark style.

<form class="p2 white bg-dark-gray">
  <label>Input</label>
  <input type="text" class="block full-width field-dark">
  <label>Select</label>
  <select class="block full-width field-dark">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <label>Textarea</label>
  <textarea class="block full-width field-dark"></textarea>
</form>

The .field-dark style includes states for disabled and read-only fields, as well as success, warning, and error states.

<form class="p2 white bg-dark-gray">
  <label>Normal</label>
  <input type="text" class="block full-width field-dark">
  <label>Disabled</label>
  <input type="text" class="block full-width field-dark" disabled value="This is disabled">
  <label>Read Only</label>
  <input type="text" class="block full-width field-dark" readonly value="This is read-only">
  <label>Required</label>
  <input type="text" class="block full-width field-dark" required>
  <label>Success</label>
  <input type="text" class="block full-width field-dark is-success">
  <label>Warning</label>
  <input type="text" class="block full-width field-dark is-warning">
  <label>Error</label>
  <input type="text" class="block full-width field-dark is-error">
</form>

Color Tables

basscss.com

Use the .table-light style as a starting point, then apply color utilities to style tables.

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>
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 overflow-hidden bg-white border rounded">
    <thead class="bg-light-gray">
      <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>

Button Blue

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

Button Blue Outline

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

Button Gray

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

Basscss

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

Button Red

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

Button Nav Light

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

Button Nav Dark

Link Button
<div class="mb1 bg-dark-gray">
  <button class="button-nav-dark">Button</button>
  <a href="#!" class="button button-nav-dark">Link Button</a>
  <input type="button" class="button button-nav-dark" value="Input Button">
</div>
Link Button
<div class="mb1 bg-blue">
  <button class="button-nav-dark">Button</button>
  <a href="#!" class="button button-nav-dark">Link Button</a>
  <input type="button" class="button button-nav-dark" value="Input Button">
</div>

Button Nav Tab

<div class="clearfix mb1">
  <button class="left button-nav-tab">Button</button>
  <a href="#!" class="left button button-nav-tab">Link Button</a>
  <input type="button" class="left button button-nav-tab" value="Input Button">
  <a href="#!" class="left button button-nav-tab is-active">Active</a>
</div>

Colors

basscss.com

Use this suite of color and background color utilities to directly style elements.

.dark-gray .mid-gray .light-gray .lighter-gray .white .blue .red .yellow .green

<h3 class="center">
  <span class="dark-gray">.dark-gray</span>
  <span class="mid-gray">.mid-gray</span>
  <span class="light-gray">.light-gray</span>
  <span class="lighter-gray">.lighter-gray</span>
  <span class="white">.white</span>
  <span class="blue">.blue</span>
  <span class="red">.red</span>
  <span class="yellow">.yellow</span>
  <span class="green">.green</span>
</h3>
.bg-dark-gray
.bg-mid-gray
.bg-light-gray
.bg-lighter-gray
.bg-white
.bg-blue
.bg-red
.bg-yellow
.bg-green
.bg-darken-1
.bg-darken-2
.bg-darken-3
.bg-darken-4
<div class="center p1 white bg-dark-gray">.bg-dark-gray</div>
<div class="center p1 bg-mid-gray">.bg-mid-gray</div>
<div class="center p1 bg-light-gray">.bg-light-gray</div>
<div class="center p1 bg-lighter-gray">.bg-lighter-gray</div>
<div class="center p1 bg-white">.bg-white</div>
<div class="center p1 bg-blue">.bg-blue</div>
<div class="center p1 bg-red">.bg-red</div>
<div class="center p1 bg-yellow">.bg-yellow</div>
<div class="center p1 bg-green">.bg-green</div>
<div class="center p1 bg-darken-1">.bg-darken-1</div>
<div class="center p1 bg-darken-2">.bg-darken-2</div>
<div class="center p1 bg-darken-3">.bg-darken-3</div>
<div class="center p1 bg-darken-4">.bg-darken-4</div>

Color Borders

basscss.com

.border
.border-top
.border-right
.border-bottom
.border-left
<div class="p1 m1 border bg-lighter-gray">.border</div>
<div class="p1 m1 border-top bg-lighter-gray">.border-top</div>
<div class="p1 m1 border-right bg-lighter-gray">.border-right</div>
<div class="p1 m1 border-bottom bg-lighter-gray">.border-bottom</div>
<div class="p1 m1 border-left bg-lighter-gray">.border-left</div>

Utility styles for border radii can be used to style images and other elements.

<img src="/docs/placeholder-square.svg" class="rounded" width="64" height="64" />
<img src="/docs/placeholder-square.svg" class="circle" width="64" height="64" />
<img src="/docs/placeholder-square.svg" class="rounded-top" width="64" height="64" />
<img src="/docs/placeholder-square.svg" class="rounded-right" width="64" height="64" />
<img src="/docs/placeholder-square.svg" class="rounded-bottom" width="64" height="64" />
<img src="/docs/placeholder-square.svg" class="rounded-left" width="64" height="64" />

The .not-rounded utility can be used to override default radii. This is useful for things like input and button groups.

<button class="button-blue not-rounded">Not Rounded</button>

Flex Object

CSS layout module using flexbox

jxnblk.com/flex-object

The flex-object is a powerful suite of utilities based on the flexible box layout module. These utilities can replace the need for a grid system in many instances, but can also be combined with the Basscss grid for even more possibilities.

Note: browser support for the flexible box layout module is limited. See http://caniuse.com/#feat=flexbox

.flex

To begin, add the .flex class to a parent element. This sets the element to display: flex and enables a flex context for all direct child elements.

<div class="flex">
  <a href="#" class="button">Link</a>
  <a href="#" class="button">Link</a>
</div>

.flex-wrap

To wrap elements, use the .flex-wrap utility.

<div class="flex flex-wrap">
  <a href="#" class="button">Home</a>
  <a href="#" class="button">Nav Item</a>
  <a href="#" class="button">Nav Item</a>
  <a href="#" class="button">Nav Item</a>
  <a href="#" class="button">Nav Item</a>
  <a href="#" class="button">Nav Item</a>
  <a href="#" class="button">Nav Item</a>
  <a href="#" class="button">Nav Item</a>
</div>

.flex-column

To arrange items vertically, use the .flex-column utility.

Row
Row
Row
<div class="flex flex-column">
  <div class="p1 blue border">Row</div>
  <div class="p1 blue border">Row</div>
  <div class="p1 blue border">Row</div>
</div>

Alignment

Use these utilities to control vertical alignment of child elements.

.flex-center

To vertically center child elements, add the .flex-center class to the parent element.

Big

Small
<div class="flex flex-center">
  <div class="flex-auto px2 py4 blue border">
    <h1 class="m0">Big</h1>
  </div>
  <div class="px2 blue border">Small</div>
</div>

.flex-stretch

To stretch all elements to fill the height of the parent, use the .flex-stretch utility.

Big

Small
<div class="flex flex-stretch">
  <div class="flex-auto px2 py4 blue border">
    <h1 class="m0">Big</h1>
  </div>
  <div class="px2 blue border">Small</div>
</div>

.flex-stretch with nested content

To ensure nested elements stretch as well, add the .flex class to relevant elements.

Big

Small
<div class="flex flex-stretch">
  <div class="flex-auto px2 py4 blue border">
    <h1 class="m0">Big</h1>
  </div>
  <div class="flex blue border">
    <div class="px2 white bg-blue">
      Small
    </div>
  </div>
</div>

.flex-baseline

To align child elements to their baseline, use the .flex-baseline utility.

Big

Small
<div class="flex flex-baseline blue border-bottom">
  <div class="flex-auto px2">
    <h1 class="m0">Big</h1>
  </div>
  <div class="px2">Small</div>
</div>

.flex-start

To align child elements to the top, use the .flex-start utility.

Big

Small
<div class="flex flex-start blue border-top">
  <div class="flex-auto px2">
    <h1 class="m0">Big</h1>
  </div>
  <div class="px2">Small</div>
</div>

.flex-end

To align child elements to the bottom, use the .flex-end utility.

Big

Small
<div class="flex flex-end blue border-bottom">
  <div class="flex-auto px2">
    <h1 class="m0">Big</h1>
  </div>
  <div class="px2">Small</div>
</div>

Responsive Utilities

To set display flex only at certain breakpoints and up, use the breakpoint-prefixed versions of .flex. All other utilities will only work at the set breakpoint.

.sm-flex

Div
Div

.md-flex

Div
Div

.lg-flex

Div
Div
<div class="sm-flex flex-center mb2 blue">
  <div class="border">
    <h2 class="m0">.sm-flex</h2>
  </div>
  <div class="flex-auto border">Div</div>
  <div class="border">Div</div>
</div>
<div class="md-flex flex-center mb2 blue">
  <div class="border">
    <h2 class="m0">.md-flex</h2>
  </div>
  <div class="flex-auto border">Div</div>
  <div class="border">Div</div>
</div>
<div class="lg-flex flex-center mb2 blue">
  <div class="border">
    <h2 class="m0">.lg-flex</h2>
  </div>
  <div class="flex-auto border">Div</div>
  <div class="border">Div</div>
</div>

Child elements

To control the size and behavior of child elements, use these utilities.

.flex-auto

To make an element grow or shrink as needed, use the .flex-auto utility.

<div class="flex">
  <a href="#" class="button button-nav-light">Nav Item</a>
  <a href="#" class="button button-nav-light">Nav Item</a>
  <div class="flex-auto blue border"></div>
  <a href="#" class="button button-nav-light">Nav Item</a>
</div>

.flex-grow

To make an element grow, but not shrink, use the .flex-grow utility.

<div class="flex">
  <a href="#" class="button button-nav-light">Nav Item</a>
  <a href="#" class="button button-nav-light">Nav Item</a>
  <div class="flex-grow blue border"></div>
  <a href="#" class="button button-nav-light">Nav Item</a>
</div>

.flex-none

To prevent an element from growing or shrinking, use the .flex-none utility.

<div class="flex">
  <a href="#" class="flex-auto m1 button button-blue">Nav Item</a>
  <a href="#" class="flex-auto m1 button button-blue">Nav Item</a>
  <a href="#" class="flex-none m1 button button-blue">Nav Item</a>
</div>

Ordering

To change the order of child elements, use the .flex-first and .flex-last utilities.

.flex-first

<div class="flex">
  <a href="#" class="button button-blue">Nav Item</a>
  <a href="#" class="flex-first button button-blue">Nav Item First</a>
  <a href="#" class="button button-blue">Nav Item</a>
</div>

.flex-last

<div class="flex">
  <a href="#" class="button button-blue">Nav Item</a>
  <a href="#" class="flex-last button button-blue">Nav Item Last</a>
  <a href="#" class="button button-blue">Nav Item</a>
</div>

Parent Element Utilities

.flex { display: flex }
.flex-column  { flex-direction: column }
.flex-wrap    { flex-wrap: wrap }
.flex-center   { align-items: center }
.flex-baseline { align-items: baseline }
.flex-stretch  { align-items: stretch }
.flex-start    { align-items: flex-start }
.flex-end      { align-items: flex-end }

Child Element Utilities

.flex-first { order: -1 }
.flex-last  { order: 1024 }
.flex-auto { flex: 1 1 auto }
.flex-grow { flex: 1 0 auto }
.flex-none { flex: none }

Custom Media Queries

Adjust these custom media query values to change the breakpoints.

@custom-media --breakpoint-sm (min-width: 40em);
@custom-media --breakpoint-md (min-width: 52em);
@custom-media --breakpoint-lg (min-width: 64em);

Utility Headings

basscss.com

Use .h0 and .h00 to create headings larger than the default h1. Add .h0-responsive or h00-responsive to use vw based sizes at larger viewports. Adjust the width of the browser to see the difference.

Hamburger 00

Hamburger 0

Hamburger 1

<h1 class="h00 h00-responsive">Hamburger 00</h1>
<h1 class="h0 h0-responsive">Hamburger 0</h1>
<h1 class="h1 h1-responsive">Hamburger 1</h1>

Background Images

Use the .bg-cover or .bg-contain utilities to control background size.

.bg-cover
<div class="p4 bg-cover" style="background-image: url(/docs/placeholder.svg)">
  <code>.bg-cover</code>
</div>

Use background position utilities to control position.

.bg-center

.bg-center
<div class="p4 bg-cover bg-center" style="background-image: url(/docs/placeholder.svg)">
  <code>.bg-center</code>
</div>

.bg-top

.bg-top
<div class="p4 bg-cover bg-top" style="background-image: url(/docs/placeholder.svg)">
  <code>.bg-top</code>
</div>

.bg-right

.bg-right
<div class="p4 bg-cover bg-right" style="background-image: url(/docs/placeholder.svg)">
  <code>.bg-right</code>
</div>

.bg-bottom

.bg-bottom
<div class="p4 bg-cover bg-bottom" style="background-image: url(/docs/placeholder.svg)">
  <code>.bg-bottom</code>
</div>

.bg-left

.bg-left
<div class="p4 bg-cover bg-left" style="background-image: url(/docs/placeholder.svg)">
  <code>.bg-left</code>
</div>