Smidgen CSS - A Featherlight, Minimalist CSS Framework

The Grid

The grid is a 12-column fluid grid with a max width. It's designed to be mobile-first. Columns stack on small screens and expand as the viewport increases.

Containers

Use containers to constrain and center your content. Each is shown below within a full-width `.content-wrapper` to demonstrate its max-width.

.content-well-narrow (900px)

.content-well (1140px)

.content-well-wide (1320px)

More Features

Auto & Shrink Columns

Use .col-auto to have a column fill remaining space, and .col-shrink to have it only take up the space its content needs.

Shrink

Auto

sm-3

Alignment Utilities

Easily align columns horizontally and vertically. Below, we align three columns with space around them.

Item 1

Item 2

Item 3

You can also control vertical alignment for an entire row or for individual columns.

Self Top

Aligned Middle

Self Bottom

Quick Start

Just add the `smidgen.min.css` file and start building with this simple structure.

<!-- A full-width section with a centered container -->
<div class="content-wrapper">
  <div class="content-well">
    <!-- A responsive grid with gutters -->
    <div class="flex-grid with-gutters">
      <div class="flex-col sm-12 md-6">
        ...
      </div>
      <div class="flex-col sm-12 md-6">
        ...
      </div>
    </div>
  </div>
</div>