Size: Theme: Gridlines:

Cutestrap

A strong, independent CSS Framework. Only 2.7KB minified & gzipped.

npm install cutestrap (Release Candidate)

Download | GitHub

Why Cutestrap?

Cutestrap is a progressive CSS Framework built with modern techniques and an eye towards the future with a simple API and robust customization options.

Customize
Learn More

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

Browser Support

Cutestrap is supported by modern browsers with a global market share of 85% (Chrome + Firefox + Edge + Safari + Opera), but you should cross-reference caniuse with your user base to determine how much and where you should progressively enhance your project.

The two constraints for browser support are Custom Properties and CSS Grid.

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.