--- --- BASSCSS
B

BASSCSS

Next-level CSS Toolkit

7KB minified

View on Github

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.

{% highlight css %} .m1 { margin: 1rem; } .mt1 { margin-top: 1rem; } .mr1 { margin-right: 1rem; } .mb1 { margin-bottom: 1rem; } .ml1 { margin-left: 1rem; } {% endhighlight %}
{% highlight css %} .p1 { padding: 1rem; } .px1 { padding-right: 1rem; padding-left: 1rem; } .py1 { padding-top: 1rem; padding-bottom: 1rem; } {% endhighlight %}
{% highlight css %} .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; } } {% endhighlight %}
{% highlight css %} .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .t0 { top: 0; } .r0 { right: 0; } .b0 { bottom: 0; } .l0 { left: 0; } {% endhighlight %}

Buttons

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

Anchor Link Button
.button-big .button-small
.button-gray .button-dark

Forms

Structural styles keep everything lined up

Inline Form (with .mobile-block state)

Stacked Form

Components

Create a variety of components without writing any new CSS

.oh

Media Object

Using simple layout utilities

{% highlight html %}
.oh

Media Object

With no new CSS written

{% endhighlight %}
Left
Right
Flexible center
{% highlight html %}
Left
Right
Flexible center
{% endhighlight %}
Nav bar
Right Button
{% highlight html %}
Nav bar
Right Button
{% endhighlight %}

Box

Useful for organizing asides and interstitial messaging

{% highlight html %}

Box

Useful for organizing asides and interstitial messaging

{% endhighlight %}

Pagination

{% highlight html %} {% endhighlight %}

Position anything

Top left

Bottom right

{% highlight html %}

Position anything

Top left

Bottom right

{% endhighlight %}

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