2.1.1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<input type="radio" class="masked" id="radio-2" />
<label class="right-radio-label radio-label" for="radio-2">Choose me</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';

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

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

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

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

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

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

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

<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.

<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.

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

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

<div class="menu-block block">
    <a class="menu-button button" href="#">Menu button</a>
    <a class="menu-button button" href="#">Menu button</a>
    <a class="menu-button button" href="#">Menu button</a>
</div>

<ul class="menu-index index">
    <li><a class="menu-button button" href="#">Menu button</a></li>
    <li><a class="menu-button button" href="#">Menu button</a></li>
    <li><a class="menu-button button" href="#">Menu button</a></li>
</ul>

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

<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.

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

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

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

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

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

Navigation thumbs for slideshows.

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

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

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

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

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>

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

<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 value="0.6125"></progress>

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

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

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

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.

<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';

Slides navigation container.

Slides navigation dot.

Hide an element on printed page.

Hide an element when inside an element in fullscreen mode.

Hide an element when not in fullscreen mode.

Add ::after content representing a loading animation.

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

Prohibit user selection.

Cancel transitions on an element and all descendents.

The clearfix hack.

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>

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>

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>

Hide element on printed page.

<nav class="print-hidden">...</nav>

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

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

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