Simple, responsive type & layout

BASSCSS is a lightweight collection of base styles and simple type and layout utilities designed for speed, performance, and scalability. Use it out of the box for simple sites and prototypes or as the base for a larger SASS project.

1rem

Beautifully Mathematical

Based on multiples of 1rem and aligned to a baseline grid for a consistent visual rhythm

Show Baseline

Mobile-First Responsive Type

More contrast at larger screen widths.

Hand claps

Polyrhythmic Percussion

Step sequencers, low frequency oscillators & lasers

It is based on the same principle as sampling. However, the samples are not played back conventionally, but are instead split into small pieces of around 1 to 50 ms. These small pieces are called grains. Multiple grains may be layered on top of each other, and may play at different speeds, phases, volume, and frequency, among other parameters.

At low speeds of playback, the result is a kind of soundscape, often described as a cloud, that is manipulatable in a manner unlike that for natural sound sampling or other synthesis techniques. At high speeds, the result is heard as a note or notes of a novel timbre. By varying the waveform, envelope, duration, spatial position, and density of the grains, many different sounds can be produced.

Caps Italic Bold Regular

Layout Utilities

Control whitespace, floats, display, positioning and more.

.m1  { margin: 1rem; }
.mt1 { margin-top: 1rem; }
.mr1 { margin-right: 1rem; }
.mb1 { margin-bottom: 1rem; }
.ml1 { margin-left: 1rem; }

.p1  { padding: 1rem; }
.px1 { padding-right: 1rem; padding-left: 1rem; }
.py1 { padding-top: 1rem; padding-bottom: 1rem; }

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

.oh    { overflow: hidden; }
.left  { float: left; }
.right { float: right; }

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

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

.t0 { top: 0; }
.r0 { right: 0; }
.b0 { bottom: 0; }
.l0 { left: 0; }

Buttons

Three sizes for anchor links, submit inputs, and button elements

.button-big .button-small

.button-gray .button-dark

Forms

Structural styles keep everything lined up

Components

Create a variety of components without writing any new CSS

.oh

Media Object

Using simple layout utilities

<div class="oh mb1">
  <div class="h2 left p2 mr2 bold white bg-blue rounded">.oh</div>
  <div class="oh bg-light-gray p1">
    <h2 class="p mb1">Media Object</h2>
    <p class="p">With no new CSS written</p>
  </div>
</div>

Left

Right

Flexible center

<div class="clearfix mb1">
  <div class="left p1 bg-light-gray">Left</div>
  <div class="right p1 bg-light-gray">Right</div>
  <div class="oh bold p1 bg-mid-gray">Flexible center</div>
</div>

Nav bar

Right Button

<div class="clearfix leading-3 mb1 bg-light-gray">
  <div class="left px1 p bold leading-3">Nav bar</div>
  <div class="right px1">
    <a href="#!">Right</a>
    <a href="#!" class="button button-small button-gray ml1">Button</a>
  </div>
</div>

Box

Useful for organizing asides and interstitial messaging

<div class="p1 mb1 bg-light-gray rounded">
  <h2 class="h2">Box</h2>
  <p class="p mb0">Useful for organizing asides and interstitial messaging</p>
</div>

Pagination

<ul class="list-simple list-inline center leading-3">
  <li><a href="#!" class="inline-block px1">Previous</a></li>
  <li><a href="#!" class="inline-block px1 mid-gray">1</a></li>
  <li><a href="#!" class="inline-block px1">2</a></li>
  <li><a href="#!" class="inline-block px1">3</a></li>
  <li><a href="#!" class="inline-block px1">4</a></li>
  <li><a href="#!" class="inline-block px1">5</a></li>
  <li><a href="#!" class="inline-block px1">Next</a></li>
</ul>

Position anything

Top left

Bottom right

<div class="relative p2 mb1 bg-light-gray rounded">
  <h2 class="h3 p4 center">Position anything</h2>
  <p class="absolute t0 l0 p1 mid-gray">Top left</p>
  <p class="absolute r0 b0 p1 mb0 mid-gray">Bottom right</p>
</div>

Themes

Separation of structure and skin to quickly customize the look and feel

.blue

.dark-gray

.mid-gray

.light-gray

.red

.green

.orange

Customizing and Extending

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

Ready to rock?

Read the documentation and download the source to get started.

View on Github

BASSCSS