<a href="/" class="">Home</a>
<a href="/docs" class="active">Docs</a>
<a href="/docs/guide" class="">Guide</a>
<a href="//github.com/jxnblk/basscss" class="">Github</a>

Docs

How to Use BASSCSS

Getting Started

Download Source or clone from Github:

git clone https://github.com/jxnblk/basscss.git

Vanilla CSS

Include basscss.min.css out-of-the-box or use the unminified basscss.css and edit it how you see fit. For lighter-weight projects use basscss-lite.min.css, which only includes base type and layout styles. Manually adjust the font stack and theme styles to customize the look and feel.

Sass

Include the files found in the /scss folder and adjust the variables and styles.

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>

Responsive type scale

Use the .h1.h6 classes to adjust type sizes that respond to large screen sizes. To turn off media-query-based responsive type styles, set the $responsive-type variable to false.

Hamburger 1

Hamburger 2

Hamburger 3

Hamburger 4

Hamburger 5

Hamburger 6

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

Type utilities

Bold

Regular

Italic

Caps

Left align

Center

Right align

Justified 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="justified">Justified Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>

Layout

Layout Utilities

Use these basic layout utilities to change the default document flow.

Class Description
.inlinedisplay: inline
.blockdisplay: block
.blockdisplay: inline-block
.ohoverflow: hidden
.clearfixClears floated child elements
.leftfloat: left
.rightfloat: right
.fitmax-width: 100%
.full-widthwidth: 100%
.half-widthwidth: 50%

White Space Scale

Use these styles to adjust white space around elements.

Shorthand Syntax

Shorthand Description
mmargin
ppadding
ttop
rright
bbottom
lleft
xx-axis (i.e. left and right)
yy-axis (i.e. top and bottom)
1 – 4White space scale from 1 to 4

Margins

Class Description
.m0margin: 0
.mb0margin-bottom: 0
.m1margin: 1
.mt1margin-top: 1
.mr1margin-right: 1
.mb1margin-bottom: 1
.ml1margin-left: 1
......
.m4margin: 4
.mt4margin-top: 4
.mr4margin-right: 4
.mb4margin-bottom: 4
.ml4margin-left: 4

Padding

Class Description
.p1padding: 1
.px1padding-right: 1; padding-left: 1
.py1padding-top: 1; padding-bottom: 1
.p2padding: 2
.px2padding-right: 2; padding-left: 2
.py2padding-top: 2; padding-bottom: 2
.p3padding: 3
.px3padding-right: 3; padding-left: 3
.py3padding-top: 3; padding-bottom: 3
.p4padding: 4
.px4padding-right: 4; padding-left: 4
.py4padding-top: 4; padding-bottom: 4

Responsive Utilities

Class Description
.mobile-showOnly visibile on mobile
.mobile-hideNot visibile on mobile
.mobile-blockFull width display block on mobile
.mobile-centerCenter aligned on mobile

Grid

Basic Usage

The default grid only switches to columns above the desktop breakpoint $breakpoint-desktop. Start with a .container to limit the width of the page. The .container is optional if you wish to span the full width of the viewport. Wrap each row of columns with the .row class. Use the .col to float columns left, then add a .col-X class to control width. Make sure the total number of columns in a row adds up to 12 or less.

Note: nested divs are added for demonstration only.

.col .col-6
.col .col-6
.col .col-4
.col .col-4
.col .col-4
<div class="container">
  <div class="row">
    <div class="col col-6"> <div>.col .col-6</div> </div>
    <div class="col col-6"> <div>.col .col-6</div> </div>
  </div>
  <div class="row">
    <div class="col col-4"> <div>.col .col-4</div> </div>
    <div class="col col-4"> <div>.col .col-4</div> </div>
    <div class="col col-4"> <div>.col .col-4</div> </div>
  </div>
</div>

Nesting

To nest grids, add another .row container within a column.

.col .col-4
.col .col-8
.col .col-6
.col .col-6
<div class="row">
  <div class="col col-4"> <div>.col .col-4</div> </div>
  <div class="col col-8">
    <div>.col .col-8</div>
    <div class="row">
      <div class="col col-6"> <div>.col .col-6</div> </div>
      <div class="col col-6"> <div>.col .col-6</div> </div>
    </div>
  </div>
</div>

Offset

Use the .col-offset-X classes to add margin to the left of a column.

.col .col-4
.col .col-6 .col-offset-2
<div class="row">
  <div class="col col-4"> <div>.col .col-4</div> </div>
  <div class="col col-6 col-offset-2"> <div>.col .col-6 .col-offset-2</div> </div>
</div>

Centered Columns

Use the .col-center in place of .col to center a column

.col-center .col-6
<div class="row">
  <div class="col-center col-6"> <div>.col-center .col-6</div> </div>
</div>

Reversed Ordering

Use the .col-right class in place of .col to reverse order of columns.

First
Second
<div class="row">
  <div class="col-right col-6"> <div>First</div> </div>
  <div class="col-right col-6"> <div>Second</div> </div>
</div>

Mobile Grid

Use the mobile grid classes to use the grid at all screen sizes.

.mobile-col .mobile-col-6
.mobile-col .mobile-col-6
<div class="row">
  <div class="mobile-col mobile-col-6"> <div>.mobile-col .mobile-col-6</div> </div>
  <div class="mobile-col mobile-col-6"> <div>.mobile-col .mobile-col-6</div> </div>
</div>

Combined Mobile and Desktop Grid

Use the mobile grid as a base, then add desktop grid width utilities to adjust the grid layout for desktop

Half width on mobile, 7 columns on desktop
Half width on mobile, 5 columns on desktop
<div class="row">
  <div class="mobile-col mobile-col-6 col-7"> <div>Half width on mobile, 7 columns on desktop</div> </div>
  <div class="mobile-col mobile-col-6 col-5"> <div>Half width on mobile, 5 columns on desktop</div> </div>
</div>

Mobile Only Rows

To split columns differently on mobile and desktop, use a .clearfix element with the .mobile-show state.

.mobile-col-6 .col-3
Resize the viewport to a small size to see how the mobile-show clearfix works.
.mobile-col-6 .col-3
.mobile-col-6 .col-3
.mobile-col-6 .col-3
<div class="row">
  <div class="mobile-col mobile-col-6 col-3">
    <div>.mobile-col-6 .col-3<br> Resize the viewport to a small size to see how the mobile-show clearfix works.</div>
  </div>
  <div class="mobile-col mobile-col-6 col-3"> <div>.mobile-col-6 .col-3</div> </div>
  <div class="clearfix mobile-show"></div>
  <div class="mobile-col mobile-col-6 col-3"> <div>.mobile-col-6 .col-3</div> </div>
  <div class="mobile-col mobile-col-6 col-3"> <div>.mobile-col-6 .col-3</div> </div>
</div>

Nested Mobile and Desktop Grid

A similar layout can also be acheived with nesting.

Nested mobile column
Nested mobile column
Nested mobile column
Nested mobile column
<div class="row">
  <div class="col col-6">
    <div class="row">
      <div class="mobile-col mobile-col-6"><div>Nested mobile column</div></div>
      <div class="mobile-col mobile-col-6"><div>Nested mobile column</div></div>
    </div>
  </div>
  <div class="col col-6">
    <div class="row">
      <div class="mobile-col mobile-col-6"><div>Nested mobile column</div></div>
      <div class="mobile-col mobile-col-6"><div>Nested mobile column</div></div>
    </div>
  </div>
</div>

Centered Containers

To aligned single centered columns with other grid elements, use the .container-col-X classes. These set a max-width based on 6, 8, and 10 columns.

.container-col-10
.container-col-8
.container-col-6
<div class="container-col-10">
  <div>.container-col-10</div>
</div>
<div class="container-col-8">
  <div>.container-col-8</div>
</div>
<div class="container-col-6">
  <div>.container-col-6</div>
</div>

Table Object

Use this to vertically center elements.

Basic Usage

Apply the .table class to an element, then add .table-cell to its children. The default table collapses on mobile.

.table-cell
This side is taller.

.table-cell
<div class="table">
  <div class="table-cell">
    <h1 class="mb0">.table-cell<br> This side is taller.</h1>
  </div>
  <div class="table-cell">.table-cell</div>
</div>

Widths

To control width, use the table object in conjunction with grid width utilities.

.table-cell

.table-cell
<div class="table">
  <div class="table-cell col-4"> <h1 class="mb0">.table-cell</h1> </div>
  <div class="table-cell col-8">.table-cell</div>
</div>

Evenly Spaced Cells

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

.table-cell

.table-cell
.table-cell
<div class="table table-fixed">
  <div class="table-cell"> <h1 class="mb0">.table-cell</h1> </div>
  <div class="table-cell">.table-cell</div>
  <div class="table-cell">.table-cell</div>
</div>

Padding

Add padding to any .table-cell.

.table-cell

.table-cell
<div class="table">
  <div class="table-cell p2"> <h1 class="mb0">.table-cell</h1> </div>
  <div class="table-cell p4">.table-cell</div>
</div>

Mobile Table Object

Use the .mobile-table and .mobile-table-cell classes for use at all breakpoints.

.mobile-table-cell

.mobile-table-cell
<div class="mobile-table">
  <div class="mobile-table-cell"> <h1 class="mb0">.mobile-table-cell</h1> </div>
  <div class="mobile-table-cell">.mobile-table-cell</div>
</div>

Flag Object

Replicate the flag object by adding .full-width to one of the cells.

Flag

.mobile-table-cell
<div class="mobile-table">
  <div class="mobile-table-cell p1"> <h1 class="mb0">Flag</h1> </div>
  <div class="mobile-table-cell full-width">.mobile-table-cell</div>
</div>

Forms

Basic Inline Form

Forms run inline by default. Use the .form class to set basic structural styles. Use the .form-light class to style the form's theme.

<form class="form form-light">
  <label class="mr1">Input:</label>
  <input type="text" class="input mr1">
  <input type="submit" class="button button-blue" value="Go">
</form>

Stacked Form

Use the .form-stacked class to make forms stack vertically.

<form class="form form-stacked form-light">
  <label>Email Address</label>
  <input type="text" class="input" placeholder="Email Address">
  <label>Password</label>
  <input type="text" class="input" placeholder="Password">
  <label class="checkbox">
    <input type="checkbox"> Remember Me
  </label>
  <input type="submit" class="button button-blue" value="Sign In">
</form>

Form Field Sizes

Use the .field-big and .field-small classes to adjust the size of form elements. These will align with button sizes.

<form class="form form-light">
  <label class="mr1">.field-big</label>
  <input type="text" class="input field-big mr1">
  <input type="submit" class="button button-big button-blue" value="Go">
</form>
<form class="form form-light">
  <label class="mr1">.field-small</label>
  <input type="text" class="input field-small mr1">
  <input type="submit" class="button button-small button-blue" value="Go">
</form>

Buttons

Themes

Use the base .button class, then extend with thematic extensions.

<a href="#!" class="button button-blue">Blue Button</a>
<a href="#!" class="button button-gray">Gray Button</a>

Sizes

Use the .button-big and .button-small extensions to change the button's size.

<a href="#!" class="button button-big button-blue">Big Button</a>
<a href="#!" class="button button-small button-blue">Small Button</a>

Tables

Basic Reset

Use the .table-reset style to set default structural styles. Add the .table-light thematic extension to add borders to the bottom of each row.

Artist Album Released
Phil Collins No Jacket Required 1985
Peter Gabriel So 1986
Huey Lewis and the News Sports 1983
<table class="table-reset table-light">
  <thead>
    <tr> <th>Artist</th> <th>Album</th> <th>Released</th> </tr>
  </thead>
  <tbody>
    <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>
    <tr> <td>Huey Lewis and the News</td> <td>Sports</td> <td>1983</td> </tr>
  </tbody>
</table>

Themes

Create custom theme extensions or use thematic utilities to adjust the look.

Artist Album Released
Phil Collins No Jacket Required 1985
Peter Gabriel So 1986
Huey Lewis and the News Sports 1983
<table class="table-reset table-light border">
  <thead class="bold bg-light-gray">
    <tr> <th>Artist</th> <th>Album</th> <th>Released</th> </tr>
  </thead>
  <tbody>
    <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>
    <tr> <td>Huey Lewis and the News</td> <td>Sports</td> <td>1983</td> </tr>
  </tbody>
</table>

Components

Create a variety of components without writing any new CSS.

Media Object

Use the media object for things like activity feeds.

Placeholder image

Username

Paragraph

<div data-component="media-object" class="clearfix">
  <img src="http://placehold.it/128x128" alt="Placeholder image" class="left mr2" />
  <div class="oh">
    <h2 class="h3">Username</h2>
    <p>Paragraph</p>
  </div>
</div>

Double Sided Media Object

You can also add an element to the right for a flexible center.

Placeholder image Placeholder image

Double Sided Media Object with a Flexible Center

<div data-component="double-media-object" class="clearfix">
  <img src="http://placehold.it/64x64" alt="Placeholder image" class="left mr2" />
  <img src="http://placehold.it/64x64" alt="Placeholder image" class="right ml2" />
  <div class="oh">
    <h2 class="h3">Double Sided Media Object with a Flexible Center</h2>
  </div>
</div>

Navbar

Create a basic navbar with a combination of layout and nav utilities.

<div data-component="navbar" class="clearfix white bg-dark-gray">
  <div class="left">
    <div class="bold nav mobile-nav-table nav-big nav-dark">
      <a href="#!">Home</a>
      <a href="#!">Categories</a>
    </div>
  </div>
  <div class="right">
    <div class="bold nav nav-big nav-dark">
      <a href="#!">Sign In</a>
    </div>
  </div>
  <div class="oh mobile-hide">
    <div class="nav nav-big">
      <form class="nav-item right-align form form-light">
        <input type="text" class="inline-block input" placeholder="Search">
      </form>
    </div>
  </div>
</div>

Theme

Adjust the Sass variables and theme files to customize colors, borders, and other non-structural styles.

Colors

.dark-gray .mid-gray .light-gray .white .blue .green .yellow .red
<span class="dark-gray">.dark-gray</span>
<span class="mid-gray">.mid-gray</span>
<span class="light-gray">.light-gray</span>
<span class="white">.white</span>
<span class="blue">.blue</span>
<span class="green">.green</span>
<span class="yellow">.yellow</span>
<span class="red">.red</span>

Background Colors

.bg-dark-gray
.bg-mid-gray
.bg-light-gray
.bg-white
.bg-blue
.bg-green
.bg-yellow
.bg-red
<div class="center white">
  <div class="bg-dark-gray">.bg-dark-gray</div>
  <div class="bg-mid-gray">.bg-mid-gray</div>
  <div class="bg-light-gray">.bg-light-gray</div>
  <div class="bg-white">.bg-white</div>
  <div class="bg-blue">.bg-blue</div>
  <div class="bg-green">.bg-green</div>
  <div class="bg-yellow">.bg-yellow</div>
  <div class="bg-red">.bg-red</div>
</div>

Borders

Adjust the $border-color, $border-width, and $border-radius variables to customize default border styles.

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

Border Radii

.rounded
.circle
<div class="p2 mb2 white bg-blue rounded">.rounded</div>
<div class="center p2 mb2 white bg-blue circle" style="width:64px;height:64px">.circle</div>

Customizing and Extending

Add new styles to build upon BASSCSS. Creating reusable styles and keeping a separation of structure and skin will help keep code readable, scalable, and generally easier to maintain.

Guide

To learn more about web design with BASSCSS, read the guide.

Read the Guide