Size: Theme: Gridlines:

Cutestrap Two

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

Soon npm install cutestrap

Download | GitHub

Themes

Built from the ground up to easily support theme customization and sub-themes

Forms

Consistent form controls styles and syntax that don't compromise accessibility

Typography

Adhears to a Baseline Grid to seamlessly provide rhythm throughout your design

Styleguide

Leverages KSS to automatically generate documentation from CSS code comments

A La Carte

Choose only the parts you need for your project, all that's required is core.css

Popsicle

A new way of naming CSS selectors with high readability and low-enough specificity

Why Cutestrap?

There are a wide variety of CSS Frameworks available. Cutestrap stands out with a tiny footprint (< 3kb gzipped), simple API, robust customization, and a strict baseline grid.

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="field">
    <input type="text" />
    <span class="label">Your Name</span>
  </label>
  <label class="field">
    <select>
      <option disabled="disabled" selected="selected">
        Flavors
      </option>
      <option>Chocolate</option>
      <option>Vanilla</option>
    </select>
    <span class="label" for="select">Flavor</span>
  </label>
  <label class="field -inline">
    <input type="radio" name="example" />
    <span class="label">Cone</span>
  </label>
  <label class="field -inline">
    <input type="radio" name="example" />
    <span class="label">Bowl</span>
  </label>
  <label class="field">
    <textarea></textarea>
    <span class="label">Special Requests</span>
  </label>
  <label class="field">
    <input type="checkbox" />
    <span class="label">Add Sprinkles</span>
  </label>
  <input type="submit" class="button" value="Place Order" />
</form>

Buttons

A default button is applied with the .button class. Popsicle modifiers can be used for different button variations.

Link

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

Complete list of modifiers are available in the Buttons Documentation


Grid

The default grid creates equal width columns for every child.

<section class="grid">
  <p>Column</p>
  <p>Column</p>
  <p>Column</p>
</section>
Class Effect
.grid Grid will display at all screen sizes
.grid.-medium Grid will start at 45rem
.grid.-large Grid will start at 80rem

Columns

Columns can be fine tuned with the `--columns` custom property by setting it to the number of desired columns

<section class="grid" style="--columns: 3;">
  <p>Column</p>
  <p>Column</p>
  <p>Column</p>
  <p>Column</p>
  <p>Column</p>
  <p>Column</p>
</section>

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.-thin Max width of 45rem with top/bottom padding equal to the baseline.
.wrapper Max width of 60rem with top/bottom padding of twice the baseline.
.wrapper.-wide Max width of 80rem with top/bottom padding of three times the baseline.

Typography

All typography and base styles are set to use a Baseline Grid to provide consistent Vertical Rhythm. The foundation of this is the --rhythm CSS Custom Property. All typography hinges on this single variable. If you want to customize the baseline grid, this is the single variable you will change.

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
.m-zero No margins
.mt-zero No top margin
.mb-zero No bottom margin

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.