Toggle Gridlines


A sassy, opinionated CSS Framework. A tiny alternative to Bootstrap.

npm install cutestrap

Download | GitHub


Beautiful, consistent form controls that don't compromise browser accessibility.


An "Implicit Grid" created using flexbox. Just a single class to create a grid.


All elements and components align perfectly to the baseline grid.


Easily customize the default variables and include only the files you need.


The BEM Methodology is used for naming conventions, because it's simple and flexible.


Documentation is generated using KSS, making cutestrap a simple launching point for your styleguide.

Another framework?

There are plenty of amazing front end frameworks already, such as, Bootstrap and Foundation. If you're looking for something feature rich with loads of components, those are both great choices.

However, if you're looking for something in between normalize.css and a full blown framework, meet Cutestrap. Cutestrap is only 8kb of CSS.


Form controls are unified in both their display and in their semantic markup. Because they are modified using only CSS, accessibility doesn't suffer.

  <label class="textfield">
    <input type="text" />
    <span class="textfield__label">Your Name</span>
  <label class="select">
      <option disabled="disabled" selected="selected">Flavors</option>
    <span class="select__label" for="select">Flavor</span>
  <label class="radio">
    <input type="radio" name="example" />
    <span class="radio__label">Cone</span>
  <label class="radio">
    <input type="radio" name="example" />
    <span class="radio__label">Bowl</span>
  <label class="textfield">
    <span class="textfield__label">Special Requests</span>
  <label class="checkbox">
    <input type="checkbox" />
    <span class="checkbox__label">Sprinkles</span>
  <input type="submit" value="Place Order" />


A default button is applied with the .btn class or automatically on button tags or button/submit inputs.


<button class="btn--secondary">Secondary</button>
<a class="btn btn--link" href="#">Link</a>


The grid is completely implicit, so columns will size themselves to be equal width to their siblings.

<section class="grid">
  <div>25% Column</div>
  <div>25% Column</div>
  <div>25% Column</div>
  <div>25% Column</div>

Grid Modifiers

The grid will display on all screens by default. If you'd like the grid to only start on larger screens, you can use these modifier classes. Columns will be stacked on smaller screens.


The grid will start 600px screen width.


The grid will start at 960px screen width.

Column Modifiers

By adding these modifier classes, you will change the flex-grow property that the columns use to size themselves, effectively changing the "weight" of the column. Heavier weighted columns will be wider than lighter columns. If all the weights are equal, the column widths will be equal.


Half the weight of the default column.


Twice the weight of the default column.


Wrappers are classes that have a max-width and padding. The size of the wrapper, determines max-width and the padding.

Class Effect
.wrapper-small Max width of 640 with top/bottom padding equal to the baseline.
.wrapper Max width of 960 with top/bottom padding of twice the baseline.
.wrapper-large Max width of 1200 with top/bottom padding of three times the baseline.


All the typography is sized using rems (based on 62.5% by default, going up to 78.125% on screens larger than 960px), to a baseline of 2.4rem by default. Every element adheres to this baseline grid with perfect vertical rhythm.

Headline 1


Headline 2

Headline 3

  1. Ordered item
  2. Ordered item

Headline 4

Headline 5
Headline 6
Table Header Table Header
Table Cell Table Cell


Class Effect
.disabled Disables pointer events and lowers the opacity
.clearfix Force an element to self clear its children
.f-none Set the float property to none
.f-left Set the float property to left
.f-right Set the float property to right
.ta-left Left align the text
.ta-center Center align the text
.ta-right Right align the text
.fw-light Light (300) font weight
.fw-normal Normal (400) font weight
.fw-semibold Semibold (500) font weight
.fw-bold Bold (600) font weight
.fs-small Small font size
.fs-base Default font size
.fs-large Large font size


If you notice something is broken or would like to request a feature, please open an issue on Github. You can also fork the repo and open pull requests, just check the README for guidelines.

If you want to chat, Shoot me an email.