biscuit.css

Biscuit Docs

Typography

Some people say that...

Typography is the most important part of a web page.

...and their correct!

Biscuit.css uses two fonts, Clicker Script for headings and EB Garamond for body text and all other elements.

Usage

Simply use header tags (such as <h1> or <p>) and they will be styled.

Grid

Biscuit uses a 4-column grid, unlike other frameworks which use a 12-column grid. 12 columns is too many. You usually only use one for half of the screen, or for 3 quarters of the screen. Biscuit knows this and created it's simple grid around this fact.

Usage

<div class="row">
  <div class="col-1">One column wide (1/4)</div>
  <div class="col-3">Three columns wide (3/4)</div>
</div>
<div class="row">
  <div class="col-2">Two columns wide (2/4)</div>
  <div class="col-2">Two columns wide (2/4)</div>
</div>
<!-- Or with one row that wraps -->
<div class="row">
  <div class="col-1">One column wide (1/4)</div>
  <div class="col-3">Three columns wide (3/4)</div>
  <div class="col-4">Four columns wide (4/4)</div> <!-- On new line -->
</div>

Utilities

Biscuit puts a lot of emphasis on utilities because writing a tiny bit of CSS to fix that one annoying thing that wont stay in place is super annoying.

Usage

Spacing

.m-1 - Margin 1 all around .mt-2 - Margin 2 only on top .mr-3 - Margin 3 on right side .mb-4 - Margin 4 on bottom .ml-5 - Margin 5 on left side

.p-1 - Padding 1 all around .pt-2 - Padding 2 only on top .pr-3 - Padding 3 on right side .pb-4 - Padding 4 on bottom .pl-5 - Padding 5 on left side

You can also use m-auto to add margin: auto to left and right sides.

More

.text-display - Swirly font family .text-body - Open sans font family .text-white - White text .text-black - Black text .text-center - Align text center

.full-screen - Make height full screen .half-screen - Make height half screen .quarter-screen - Make height quarter screen

.full-height - Make height 100% .full-width - Make width 100%

.flex-center - Align content in the center.

Header

All websites need an awesome landing header. This component allows that to be super easy.

Usage

<div class="header">
  <img src="background-image.png">
  <div class="content">
    <!-- Content -->
    <h1 class="text-body">Biscuit.css</h1>
    <h3>Flash-design any website</h3>
  </div>
</div>