B

BASSCSS

Part reset
Part boilerplate
Part framework
All minimal*

BASSCSS is a small reset and collection of simple type and layout classes that can be used as the basis for any web project. Use it out of the box or as a base for a larger SASS project.

Get started:

View on Github

Examples

Mobile-First Responsive Type

Any .h1, .h2, .p, or .small class with the .responsive class applied to its parent will resize at certain breakpoints.

Heading 1

Heading 2

Paragraph

Small Type

<div class="responsive">
  <h1 class="h1">Heading 1</h1>
  <h2 class="h2">Heading 2</h2>
  <p class="p">Paragraph</p>
  <p><small class="small">Small Type</small></p>
</div>

Selectively Responsive Type

Selectively applying the .responsive class will only affect that element.

Responsive

Unresponsive

Unresponsive paragraph

<div>
  <h1 class="h1 responsive">Responsive Heading 1</h1>
  <h2 class="h2">Unresponsive Heading 2</h2>
  <p class="p">Unresponsive paragraph</p>
</div>

Type Margins

By default all type element's margins are reset to 0. For blocks of copy apply the .type-margins class to automatically add margins to child text elements.

Type Utilities

Use the type utilities to quickly change the default styling of type elements.

.bold
font-weight: bold;
.regular
font-weight: normal;
.caps
text-transform: uppercase; letter-spacing: .2em;
.center
text-align: center;
.right-align
text-align: right;

Margin Utilities

BASSCSS includes a suite of margin utilities to control whitespace. The base unit of spacing can be customized with the $space variable.

.m1
margin: 1x
.mt1
margin-top: 1x
.mr1
margin-right: 1x
.mb1
margin-bottom: 1x
.ml1
margin-left: 1x
.m2
margin: 2x
…
.ml4
.margin-left: 4x

Padding Utilities

The padding utilities are similar to margin utilities, but only include symmetrical directions.

.p1
padding: 1x;
.px1
padding-right: 1x; padding-left: 1x;
.py1
padding-top: 1x; padding-bottom: 1x;

Float Utilities

The set of float utilities are great for common layout cases.

.left
float: left;
.right
float: right;
.clearfix
Used to clear floats

Display Utilities

Useful for changing display properties of elements

.inline
display: inline;
.block
display: block;
.inline-block;
display: inline-block;

Media Object

Using .clearfix, .left, and .mr1, you can create the media object without writing any new CSS.

Placeholder Image

Media Object

With no new CSS written

<div class="clearfix">
  <img src="//placehold.it/128" class="left mr1" />
  <div class="clearfix">
    <h2 class="p">Media Object</h2>
    <p class="p">With no new CSS written</p>
  </div>
</div>

Ready to dive in?

View on Github