Cutestrap

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

npm install [email protected]

Download | GitHub

Forms

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

Grid

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

Typography

All elements and components align perfectly to the baseline grid.

Sass

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

BEM

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

KSS

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.

Forms

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


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

Buttons

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

Link 

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

Grid

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>
    </section>

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.

.grid--medium

The grid will start 600px screen width.

.grid--large

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.

.column--light

Half the weight of the default column.

.column--heavy

Twice the weight of the default column.

Wrappers

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.

Typography

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

Paragraph

Headline 2

Headline 3

  1. Ordered item
  2. Ordered item

Headline 4

      Preformatted
Headline 5
Blockquote
Headline 6
Table Header Table Header
Table Cell Table Cell

Utilities

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

Feedback

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.