Bolt 2.1.2

A front-end toolkit of classes, evented behaviours and custom elements.

Text.

h1, .text-01

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

Crunchum ipsum

h2, .text-02

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

Crunchum ipsum dolor sit coder void

h3, .text-03

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

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

h4, .text-04

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

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

h5, .text-05

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

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

h6, .text-06

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

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

code, .text-07

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

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

body, .text-08

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

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

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

.text-09

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

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

Colour.

.current-fg, .current-bg

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

Crunchum Ipsum

Current

.transparent-fg, .transparent-bg

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

Crunchum Ipsum

Transparent

.black-fg, .black-bg

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

Crunchum Ipsum

Black

.white-fg, .white-bg

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

Crunchum Ipsum

White

.info-fg, .info-bg

<p class="info-fg">Crunchum Ipsum</p>
<p class="thumb info-bg">Info colour</p>

Crunchum Ipsum

Info colour

.success-fg, .success-bg

<p class="success-fg">Crunchum Ipsum</p>
<p class="thumb success-bg">Success colour</p>

Crunchum Ipsum

Success colour

.warn-fg, .warn-bg

<p class="warn-fg">Crunchum Ipsum</p>
<p class="thumb warn-bg">Warn colour</p>

Crunchum Ipsum

Warn colour

.error-fg, .error-bg

<p class="error-fg">Crunchum Ipsum</p>
<p class="thumb error-bg">Error colour</p>

Crunchum Ipsum

Error colour

Forms.

input[type="text"]

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

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[required]

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

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>

Grid.

.2-columns

<div class="2-columns columns" style="--column-gap: 0.9375rem; font-size: 0.875rem;">
    Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident.
</div>
Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident.

.3-columns

<div class="3-columns columns" style="--column-gap: 0.9375rem; font-size: 0.875rem;">
    Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident.
</div>
Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident.

.grid

<div class="grid" style="--column-gap: 0.9375rem; --row-gap: 0.9375rem; font-size: 0.875rem;">
    <div class="button">&nbsp;</div>
    <div class="button">&nbsp;</div>
    <div class="button">&nbsp;</div>
</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; font-size: 0.875rem;">
    <div class="button x-1">x-1</div>
    <div class="button x-2">x-2</div>
    <div class="button x-3">x-3</div>
    <div class="button x-1 2x">2x</div>
    <div class="button x-1 3x">3x</div>
    <div class="button x-1 x-start y-4">x-start</div>
    <div class="button x-2 x-center y-4">x-center</div>
    <div class="button x-3 x-end y-4">x-end</div>
    <div class="button x-1 x-stretch y-5">x-stretch</div>
    <div class="button x-2 x-bleed y-5">x-bleed</div>
</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.

x-1
x-2
x-3
2x
3x
x-start
x-center
x-end
x-stretch
x-bleed

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

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

Button.

Link

button, .button, [type="button"]

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

font-size

height

line-height

border-width

Thumb.

.thumb

<a class="thumb" href="#" style="background-image: url('images/logo-64.png');">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.

.thumb-2:1

<a class="thumb thumb-2:1" href="#" style="background-image: url('images/wireframe.svg'); background-size: 100% 100%;">Thumb text</a>

.thumb-16:9

<a class="thumb thumb-16:9" href="#" style="background-image: url('images/wireframe.svg'); background-size: 100% 100%;">Thumb text</a>

.thumb-3:2

<a class="thumb thumb-3:2" href="#" style="background-image: url('images/wireframe.svg'); background-size: 100% 100%;">Thumb text</a>

.thumb-4:3

<a class="thumb thumb-4:3" href="#" style="background-image: url('images/wireframe.svg'); background-size: 100% 100%;">Thumb text</a>

.thumb-5:4

<a class="thumb thumb-5:4" href="#" style="background-image: url('images/wireframe.svg'); background-size: 100% 100%;">Thumb text</a>

.thumb-1:1

<a class="thumb thumb-1:1" href="#" style="background-image: url('images/wireframe.svg'); background-size: 100% 100%;">Thumb text</a>

Table.

123
EnglishOneTwoThree
FrançaisUnDeuxTrois
ItalianoUnoDueTre
NotesSmallMediumLarge

table

<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>
123
EnglishOneTwoThree
FrançaisUnDeuxTrois
ItalianoUnoDueTre
NotesSmallMediumLarge

.lined-table

<table class="lined-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>
123
EnglishOneTwoThree
FrançaisUnDeuxTrois
ItalianoUnoDueTre
NotesSmallMediumLarge

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

Bubble.

.bubble

<aside class="bubble active" style="position: relative; margin: 0; top:auto; left:auto;bottom:auto;right:auto;transform: none;">
Crunchum Ipsum.
</aside>

.top-bubble

<aside class="top-bubble bubble active" style="position: relative; margin: 0; top:auto; left:auto;bottom:auto;right:auto;transform: none;">
Crunchum Ipsum.
</aside>

.left-top-bubble

<aside class="left-top-bubble top-bubble bubble active" style="position: relative; margin: 0; top:auto; left:auto;bottom:auto;right:auto;transform: none;">
Crunchum Ipsum.
</aside>

.right-top-bubble

<aside class="right-top-bubble top-bubble bubble active" style="position: relative; margin: 0; top:auto; left:auto;bottom:auto;right:auto;transform: none;">
Crunchum Ipsum.
</aside>

.bottom-bubble

<aside class="bottom-bubble bubble active" style="position: relative; margin: 0; top:auto; left:auto;bottom:auto;right:auto;transform: none;">
Crunchum Ipsum.
</aside>

.left-bottom-bubble

<aside class="left-bottom-bubble bottom-bubble bubble active" style="position: relative; margin: 0; top:auto; left:auto;bottom:auto;right:auto;transform: none;">
Crunchum Ipsum.
</aside>

.right-bottom-bubble

<aside class="right-bottom-bubble bottom-bubble bubble active" style="position: relative; margin: 0; top:auto; left:auto;bottom:auto;right:auto;transform: none;">
Crunchum Ipsum.
</aside>

.left-bubble

<aside class="left-bubble bubble active" style="position: relative; margin: 0; top:auto; left:auto;bottom:auto;right:auto;transform: none;">
Crunchum Ipsum.
</aside>

.bottom-left-bubble

<aside class="bottom-left-bubble left-bubble bubble active" style="position: relative; margin: 0; top:auto; left:auto;bottom:auto;right:auto;transform: none;">
Crunchum Ipsum.
</aside>

.right-bubble

<aside class="right-bubble bubble active" style="position: relative; margin: 0; top:auto; left:auto;bottom:auto;right:auto;transform: none;">
Crunchum Ipsum.
</aside>

.bottom-right-bubble

<aside class="bottom-right-bubble right-bubble bubble active" style="position: relative; margin: 0; top:auto; left:auto;bottom:auto;right:auto;transform: none;">
Crunchum Ipsum.
</aside>

font-size

line-height

background

border-color

border-width

border-radius

color

pointer-y

Menu.

.menu-block, .menu-button

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

Message.

Nasty.

.message-block

<div class="message-block block active">
    Nasty.
</div>
Information.

.info-message-block

<div class="info-message-block message-block block active">
    Information.
</div>
Success!

.success-message-block

<div class="success-message-block message-block block active">
    Success!
</div>
Warning!

.warn-message-block

<div class="warn-message-block message-block block active">
    Warning!
</div>
Error.

.error-message-block

<div class="error-message-block message-block block active">
    Error.
</div>

Toggle.

Click to show

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.

.toggle-block

<a class="toggle-button button" href="#toggle-block">Click to show</a>
<div class="toggle-block block toggle" toggleable id="toggle-block">
  <p>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.</p>
</div>

<range-control>

Configure stylesheet path with:

window.customElementStylesheetPath = 'path/to/bolt/elements/';

Import <range-control> custom element. This also registers the custom element and upgrades instances already in the DOM.

<script type="module" src="range-control.rolled.js"></script>
<range-control name="ratio" min="-1" max="1" ticks="-1 -0.8 -0.6 -0.4 -0.2 0 0.2 0.4 0.6 0.8 1" value="0">Scale</range-control>
<range-control name="gain" min="-48dB" max="0dB" ticks="-∞dB -48dB -42dB -36dB -30dB -24dB -18dB -12dB -6dB 0dB" law="linear-logarithmic" unit="dB" value="-6dB">Volume</range-control>
<range-control name="frequency" min="20" max="20000" ticks="20Hz 100Hz 200Hz 1kHz 2kHz 10kHz 20kHz" law="logarithmic" unit="Hz" value="20Hz">Frequency</range-control>
<range-control name="rating" min="1" max="5" ticks="1 2 3 4 5" steps="ticks" law="linear" value="3">Rating</range-control>
Scale Volume Frequency Rating

Attributes

min =0

Value at lower limit of fader. Can interpret values with recognised units, eg. "0dB".

max =1

Value at upper limit of fader. Can interpret values with recognised units, eg. "0dB".

law =linear

Fader law. This is the name of a transform to be applied over the range of the fader travel. Possible values are:

unit

The value’s unit, if it has one. The output value and all ticks are displayed in this unit. Possible values are:

ticks

A space separated list of values at which to display tick marks. Values may be listed with or without units, eg:

ticks="0 0.2 0.4 0.6 0.8 1"
    ticks="-48dB -36dB -24dB -12dB 0dB"

steps

Steps is either:

value

The initial value of the fader.

Properties

.type

“number” A readonly property with the value "number" (provided for consistency with native form elements, which all have a type).

.min

0 Value at lower limit of fader, as a number.

.max

1 Value at lower limit of fader, as a number.

.value

0 Current value of the field, as a number.

Parts

label

Style the label.

output

Style the display of the output value.

tick

Style the tick marks.

Variables

track-height

track-background

track-border

track-shadow

handle-width

handle-height

handle-shadow

bleed

value-color

handle-background

handle-border

<rotary-control>

Configure stylesheet path with:

window.customElementStylesheetPath = 'path/to/bolt/elements/';

Import <rotary-control> custom element. This also registers the custom element and upgrades instances already in the DOM.

<script type="module" src="rotary-control.rolled.js"></script>
<rotary-control name="pan" min="-1" max="1" ticks="-1 -0.8 -0.6 -0.4 -0.2 0 0.2 0.4 0.6 0.8 1">Pan</rotary-control>
<rotary-control name="gain" min="-48dB" max="0dB" ticks="-∞dB -48dB -42dB -36dB -30dB -24dB -18dB -12dB -6dB 0dB" law="linear-logarithmic" unit="dB" value="-6dB">Volume</rotary-control>
Pan Volume

Attributes

min =0

Value at lower limit of fader. Can interpret values with recognised units, eg. "0dB".

max =1

Value at upper limit of fader. Can interpret values with recognised units, eg. "0dB".

law =linear

Fader law. This is the name of a transform to be applied over the range of the fader travel. Possible values are:

unit

The value’s unit, if it has one. The output value and all ticks are displayed in this unit. Possible values are:

ticks

A space separated list of values at which to display tick marks. Values may be listed with or without units, eg:

ticks="0 0.2 0.4 0.6 0.8 1"
    ticks="-48dB -36dB -24dB -12dB 0dB"

steps

Steps is either:

value

The initial value of the fader.

Properties

.type

“number” A readonly property with the value "number" (provided for consistency with native form elements, which all have a type).

.min

0 Value at lower limit of fader, as a number.

.max

1 Value at lower limit of fader, as a number.

.value

0 Current value of the field, as a number.

Parts

label

Style the label.

output

Style the display of the output value.

tick

Style the tick marks.

Variables

handle-width

handle-shadow

track-width

track-background

track-shadow

rotation-start

Angle (clockwise from south) at which to start rotational travel.

rotation-range

Angle (clockwise from south) through which handle travels.

touch-range

Vertical distance of mouse or touch movement that results in one full range of rotation of the handle.

value-color

handle-background

handle-border

<slide-show>

Configure stylesheet path with:

window.customElementStylesheetPath = 'path/to/bolt/elements/';

Import <slide-show> custom element. This also registers the custom element and upgrades instances already in the DOM.

<script type="module" src="slide-show.rolled.js"></script>
<slide-show loop autoplay>
   <img src="../images/lyngen-4.png" id="1" />
   <img src="../images/lyngen-2.png" id="2" />
   <img src="../images/lyngen-1.png" id="3" />
   <img src="../images/lyngen-3.png" id="4" />
</slide-show>

By default each element inside <slide-show> is interpreted as a slide, but content with the attribute slot="optional" is ignored, allowing for the insertion of fullscreen close buttons and the like.

Attributes

loop

Boolean attribute. Makes the slideshow behave as a continuous loop.

autoplay

Boolean attribute.

Parts

prev

Style the ‘previous slide’ button.

next

Style the ‘next slide’ button.

Variables

slide-duration

Set the duration that a slide is displayed for when the slideshow is in autoplay mode. May be a CSS time value in s or ms.

slide-align

Default vertical alignment of slides in their grid cells. (Individual slides can be aligned normally by applying align-self).

slide-justify

Default horizontal justification of slides in their grid cells. (Individual slides can be justified normally by applying justify-self).

slide-gap

Grid column gap between one slide and the next.