Text.

h1
.text-01

Crunchum ipsum

<p class="text-01">Crunchum ipsum</p>

h2
.text-02

Crunchum ipsum dolor sit coder void

<p class="text-02">Crunchum ipsum dolor sit coder void</p>

h3
.text-03

Crunchum ipsum dolor sit coder void, constructor function, sed do while loop

<p class="text-03">Crunchum ipsum dolor sit coder void, constructor function, sed do while loop</p>

h4
.text-04

Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident.

<p class="text-04">Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident.</p>

h5
.text-05

Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident.

<p class="text-05">Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident.</p>

h6
.text-06

Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident.

<p class="text-06">Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident.</p>

code
.text-07

Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident.

<p class="text-07">Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident.</p>

body
.text-08

Crunchum ipsum dolor sit coder void, constructor function, sed do while loop.

Crunchum ipsum dolor sit coder void, constructor function, sed do while loop.

<p class="text-08">Crunchum ipsum dolor sit coder void, constructor function, sed do while loop.</p>
<p>Crunchum ipsum dolor sit coder void, constructor function, sed do while loop.</p>

.text-09

Crunchum ipsum dolor sit coder void, constructor function, sed do while loop.

<p class="text-09">Crunchum ipsum dolor sit coder void, constructor function, sed do while loop.</p>

Colour.

.transparent-bg

Transparent

<p class="thumb transparent-bg">Transparent</p>

.current-bg

Current

<p class="thumb current-bg">Current</p>

.black-bg

Black

<p class="thumb black-bg">Black</p>

.white-bg

White

<p class="thumb white-bg">White</p>

.red-bg

Red

<p class="thumb red-bg">Red</p>

Forms.

input[type="text"]

<label for="text-input">Text</label>
<input type="text" placeholder="Enter text" id="text-input" />

<label class="required-after after" for="required-input">Required</label>
<input type="text" required placeholder="Enter text" id="required-input" />
<label class="help-label text-11" for="required-input">Help text</label>

<label class="required-after after" for="error-input">Error</label>
<input type="text" required placeholder="Enter text" id="error-input" />
<label class="error-label text-11" for="error-input">This field is required</label>

input[type="number"]

<label for="number-input">Number</label>
<input type="number" placeholder="100" id="number-input" />

input[type="password"]

<label for="password-input">Password</label>
<input type="password" placeholder="Enter password" id="password-input" />

input[type="search"]

<label for="search">Search</label>
<input type="search" id="search" name="search" />

input[type="tel"]

<label for="tel">Tel</label>
<input type="tel" id="tel" name="tel" />

input[type="url"]

<label for="url-input">URL</label>
<input type="url" placeholder="http://cruncher.ch/" id="url-input" />

input[type="range"]

<label for="range-input">Range</label>
<input type="range" value="0" id="range-input" />

textarea

<label for="textarea">textarea</label>
<textarea id="textarea" name="textarea"></textarea>

.masked

.check-label

<input type="checkbox" class="masked" id="checkbox-1" />
<label class="check-label" for="checkbox-1">Choose me</label>

.radio-label

<input type="radio" class="masked" id="radio-1" />
<label class="radio-label" for="radio-1">Choose me</label>

.right-check-label

<input type="checkbox" class="masked" id="checkbox-2" />
<label class="right-check-label check-label" for="checkbox-2">Choose me</label>

.right-radio-label

<input type="radio" class="masked" id="radio-2" />
<label class="right-radio-label radio-label" for="radio-2">Choose me</label>

.switch-label

<input class="masked" type="checkbox" value="something" id="switch-input" />
<label class="switch-label" for="switch-input">Turn me on</label>

To make switches swipeable:

import './components/switch-label.js';

.right-switch-label

<input class="masked" type="checkbox" value="something" id="switch-input-2" />
<label class="right-switch-label switch-label" for="switch-input-2">Turn me on</label>

.check-button

<input class="masked" type="checkbox" value="something" id="check-button-input" />
<label class="check-button button" for="check-button-input">Turn me on</label>

.radio-button

<input class="masked" type="radio" name="radio-button" value="on" id="radio-button-on" />
<label class="radio-button button" for="radio-button-on">Turn me on</label>
<input class="masked" type="radio" name="radio-button" value="off" id="radio-button-off" />
<label class="radio-button button" for="radio-button-off">Turn me off</label>

.right-check-button

<input class="masked" type="checkbox" value="something" id="right-button-input" />
<label class="right-check-button check-button button" for="right-button-input">Turn me on</label>

.right-radio-button

<input class="masked" type="radio" name="right-radio-button" value="on" id="right-radio-button-on" />
<label class="right-radio-button radio-button button" for="right-radio-button-on">Turn me on</label>
<input class="masked" type="radio" name="right-radio-button" value="off" id="right-radio-button-off" />
<label class="right-radio-button radio-button button" for="right-radio-button-off">Turn me off</label>

.select-button

<label class="select-button button">
  <select>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</label>

range-control

Range
<range-control min="0" max="1" ticks="0 0.25 0.5 0.75 1" unit="s" transform="quadratic">Range</range-control>

rotary-control

Rotary
<rotary-control name="rotary" max="3" ticks="0 0.5 1 1.5 2 2.5 3" transform="cubic" unit="s">Rotary</rotary-control>
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;

Grid.

.grid

<div class="grid" style="--column-gap: 0.9375rem; --row-gap: 0.9375rem;">
    <button>&nbsp;</button>
    <button>&nbsp;</button>
    <button>&nbsp;</button>
</div>

Creates a grid with horizontal flow and equal width columns.

.x-1 … x-12
.2x … .12x
.x-start
.x-center
.x-end
.x-stretch
.x-bleed

<div class="grid" style="--column-gap: 0.9375rem; --row-gap: 0.9375rem;">
    <button class="x-1">x-1</button>
    <button class="x-2">x-2</button>
    <button class="x-3">x-3</button>
    <button class="x-1 2x">2x</button>
    <button class="x-1 3x">3x</button>
    <button class="x-1 x-start y-4">x-start</button>
    <button class="x-2 x-center y-4">x-center</button>
    <button class="x-3 x-end y-4">x-end</button>
    <button class="x-1 x-stretch y-5">x-stretch</button>
    <button class="x-2 x-bleed y-5">x-bleed</button>
</div>

Note that .x-bleed, which stretches an element half the way over the grid gap, depends on column-gap having been set via the custom property --column-gap.

.y-1 … .y-18
.2y … .12y
.y-start
.y-center
.y-end
.y-stretch
.y-baseline

<div class="grid" style="--column-gap: 0.9375rem; --row-gap: 0.9375rem;">
    <button class="x-1 y-1">y-1</button>
    <button class="x-1 y-2">y-2</button>
    <button class="x-1 y-3">y-3</button>
    <button class="x-2 y-1 2y">2y</button>
    <button class="x-3 y-1 3y">3y</button>
    <button class="x-1 y-4 y-start">y-start</button>
    <button class="x-1 y-5 y-center">y-center</button>
    <button class="x-1 y-6 y-end">y-end</button>
    <button class="x-2 y-4 y-stretch">y-stretch</button>
    <button class="x-3 y-4 y-baseline">y-baseline</button>
</div>
;
;

Elements.

Buttons.

.button
button
[type="button"]

Link
<button type="button">Button</button>
<a class="button" href="#buttons">Link</a>

.menu-block
.menu-button

.menu-index
.menu-button

.toggle-button

<a class="toggle-button button" href="#id">Open</a>

Thumbs.

.thumb

<a class="thumb" href="#" style="background-image: url('//source.unsplash.com/category/nature/128x80')">Thumb text</a>

Base class for thumbnails, avatars, icons and other cases where an image replaces some semantic text. Text is hidden by pushing it outside the hidden overflow, and only the background-image, centered and ‘cropped’ via background-size and background-position, remains.

.burger-thumb

<a class="burger-thumb thumb" href="#">Navigation</a>

.close-thumb

<a class="close-thumb thumb" href="#">Close</a>

.add-thumb

<button type="button" class="add-thumb thumb">Add</button>

.subtract-thumb

<button type="button" class="subtract-thumb thumb">Subtract</button>

.remove-thumb

<button type="button" class="remove-thumb thumb" href="#">Remove</button>

.prev-thumb
.next-thumb

Navigation thumbs for slideshows.

<a class="prev-thumb thumb">Previous</a>
<a class="next-thumb thumb">Next</a>

.thumb-2:1

<a class="thumb thumb-2:1" href="#" style="background-image: url('images/scotland-3.jpg')">Thumb text</a>

.thumb-16:9

<a class="thumb thumb-16:9" href="#" style="background-image: url('images/scotland-4.jpg')">Thumb text</a>

.thumb-3:2

<a class="thumb thumb-3:2" href="#" style="background-image: url('images/scotland-2.jpg')">Thumb text</a>

Lists.

.index

  • One
  • Two

Applied to ul, ol and dl elements to zero their default typographic style. Child lis are blocks, but they are set up to play nice as inline-blocks too.

<ul class="index">
  <li>One</li>
  <li>Two</li>
</ul>

.inline-index

<ul class="inline-index index">
   <li><a class="button" href="#">One</a></li
  ><li><a class="button" href="#">Two</a></li
  ><li><a class="button" href="#">Three</a></li
  ><li><a class="button" href="#">Four</a></li>
</ul>

.crumbs-index

<ul class="crumbs-index index">
     <li><a href="#path">path</a></li
    ><li><a href="#to">to</a></li
    ><li><a href="#document">document</a></li>
</ul>

progress

<progress value="0.6125"></progress>

table

123
EnglishOneTwoThree
FrançaisUnDeuxTrois
ItalianoUnoDueTre
NotesSmallMediumLarge
<table>
  <thead>
    <tr><th></th><th>1</th><th>2</th><th>3</th></tr>
  </thead>
  <tbody>
    <tr><th>English</th><td>One</td><td>Two</td><td>Three</td></tr>
    <tr><th>Français</th><td>Un</td><td>Deux</td><td>Trois</td></tr>
    <tr><th>Italiano</th><td>Uno</td><td>Due</td><td>Tre</td></tr>
  </tbody>
  <tfoot>
    <tr><th>Notes</th><td>Small</td><th>Medium</td><td>Large</td></tr>
  </tfoot>
</table>

.striped-table

123
EnglishOneTwoThree
FrançaisUnDeuxTrois
ItalianoUnoDueTre
NotesSmallMediumLarge
<table class="striped-table">
  <thead>
    <tr><th></th><th>1</th><th>2</th><th>3</th></tr>
  </thead>
  <tbody>
    <tr><th>English</th><td>One</td><td>Two</td><td>Three</td></tr>
    <tr><th>Français</th><td>Un</td><td>Deux</td><td>Trois</td></tr>
    <tr><th>Italiano</th><td>Uno</td><td>Due</td><td>Tre</td></tr>
  </tbody>
  <tfoot>
    <tr><th>Notes</th><td>Small</td><th>Medium</td><td>Large</td></tr>
  </tfoot>
</table>

Badges.

.badge

3
<span class="badge">3</span>
;
;
;
;
;
;
;
;
;
;
;
;
;

Blocks.

.block

For layout. There are two ways a .block can be styled: as a block, for a vertical layout, or as inline-block, for a horizontal layout. block by default, obviously.

Applied to a media tag like img, svg, video and canvas, .block will scale the element to fill the available width.

.inline-block

.slides-block
.slides-grid

title
Slide 1
title
Slide 2
title
Slide 3
title
Slide 4
1 2 3 4
<section class="slides-block block no-scroll" fullscreenable id="slides-1">
    <div class="slides-grid grid" swipeable>
        <figure class="block active y-stretch" id="slides-1-slide-1" switchable>
            <img src="images/scotland-2.jpg" alt="title" draggable="false" />
            <figcaption class="text-09">Slide 1</figcaption>
        </figure>

        <figure class="block active y-stretch" id="slides-1-slide-2" switchable>
            <img src="images/scotland-3.jpg" alt="title" draggable="false" />
            <figcaption class="text-09">Slide 2</figcaption>
        </figure>

        <figure class="block active y-stretch" id="slides-1-slide-3" switchable>
            <img src="images/scotland-4.jpg" alt="title" draggable="false" />
            <figcaption class="text-09">Slide 3</figcaption>
        </figure>

        <figure class="block active y-stretch" id="slides-1-slide-4" switchable>
            <img src="images/glacier-de-moiry.jpg" alt="title" draggable="false" />
            <figcaption class="text-09">Slide 4</figcaption>
        </figure>
    </div>

    <div class="slides-dots-block dots-block block">
        <a class="x-1 dot-thumb thumb" href="slides-1-slide-1">1</a>
        <a class="x-2 dot-thumb thumb" href="slides-1-slide-2">2</a>
        <a class="x-3 dot-thumb thumb" href="slides-1-slide-3">3</a>
        <a class="x-4 dot-thumb thumb" href="slides-1-slide-4">4</a>
    </div>
</section>

Slides require some JS:

import './components/slides.js';

.dots-block

Slides navigation container.

.dot-thumb

Slides navigation dot.

Before and After.

.required-before
.required-after

.triangle-before
.right-after

.right-before
.right-after

Modifiers.

.print-hidden

.fullscreen-hidden

Hide an element when inside an element in fullscreen mode.

.fullscreen-shown

Hide an element when not in fullscreen mode.

.disabled

.requested

Add ::after content representing a loading animation.

<div class="requested" style="height: 7.5rem;">

.no-select

Prohibit user selection.

.no-transition

Cancel transitions on an element and all descendents.

.clear

The clearfix hack.

.hidden-scroll

Crunchum ipsum dolor sit coder void, constructor function,
sed do while loop python orientation semi colon incident.
Duis aute irure indent tabs or spaces velit esse cilium
buntum how crunchy duntum. Excepteur tranquilis syntax
error memorandum qui officia nostrud operating system
alertus. Standards code est pulchra on chromium et foxus
sed souvent suckum in internet explorum.

Attempts to hide scrollbars where possible (Chrome, Safari, Opera).

<pre class="hidden-scroll scroll" style="height: 7.5rem;">
Crunchum ipsum dolor sit coder void, constructor function,
sed do while loop python orientation semi colon incident.
Duis aute irure indent tabs or spaces velit esse cilium
buntum how crunchy duntum. Excepteur tranquilis syntax
error memorandum qui officia nostrud operating system
alertus. Standards code est pulchra on chromium et foxus
sed souvent suckum in internet explorum.
</pre>

.no-scroll

Crunchum ipsum dolor sit coder void, constructor function,
sed do while loop python orientation semi colon incident.
Duis aute irure indent tabs or spaces velit esse cilium
buntum how crunchy duntum. Excepteur tranquilis syntax
error memorandum qui officia nostrud operating system
alertus. Standards code est pulchra on chromium et foxus
sed souvent suckum in internet explorum.

Hides overflow.

<pre class="no-scroll" style="height: 7.5rem;">
Crunchum ipsum dolor sit coder void, constructor function,
sed do while loop python orientation semi colon incident.
Duis aute irure indent tabs or spaces velit esse cilium
buntum how crunchy duntum. Excepteur tranquilis syntax
error memorandum qui officia nostrud operating system
alertus. Standards code est pulchra on chromium et foxus
sed souvent suckum in internet explorum.
</pre>

.hidden

Forces display: none. This class is also available with breakpoint prefixes (@1-, @2-, …).

<a class="hidden" href="...">Link</a>
<a class="@2-hidden" href="...">Link</a>

.print-hidden

.shown

Forces display: none below a given breakpoint. This class is only available with breakpoint prefixes (@1-, @2-, …).

<a class="@1-shown" href="...">Link</a>

.flex

Applies display: flex. This class may also be used with a breakpoint prefix.