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.

Default Secondary Outlined 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>

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.

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

• Unordered item
• Unordered item

Headline 3

1. Ordered item
2. Ordered item

Headline 4

  Preformatted

Headline 5

Blockquote

Headline 6

Utilities

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.