<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>A front-end toolkit of classes, evented behaviours and custom elements.
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.
.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
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>.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>.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>.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>.grid<div class="grid" style="--column-gap: 0.9375rem; --row-gap: 0.9375rem; font-size: 0.875rem;">
<div class="button"> </div>
<div class="button"> </div>
<div class="button"> </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.
.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> button,
.button,
[type="button"]
<button type="button">Button</button>
<a class="button" href="#buttons">Link</a>.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
<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>.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>.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
<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>.message-block
<div class="message-block block active">
Nasty.
</div>.info-message-block
<div class="info-message-block message-block block active">
Information.
</div>.success-message-block
<div class="success-message-block message-block block active">
Success!
</div>.warn-message-block
<div class="warn-message-block message-block block active">
Warning!
</div>.error-message-block
<div class="error-message-block message-block block active">
Error.
</div>.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>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>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:
"linear""linear-logarithmic""logarithmic""quadratic""cubic"unit
The value’s unit, if it has one. The output value and all ticks are displayed in this unit. Possible values are:
"dB" – 0-1 is displayed as -∞dB to 0dB"Hz"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:
ticks, values may be listed with or without units."ticks". The values in the ticks attribute are used as steps.value
The initial value of the fader.
.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.
label
Style the label.
output
Style the display of the output value.
tick
Style the tick marks.
track-height
track-background
track-border
track-shadow
handle-width
handle-height
handle-shadow
bleed
value-color
handle-background
handle-border
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>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:
"linear""linear-logarithmic""logarithmic""quadratic""cubic"unit
The value’s unit, if it has one. The output value and all ticks are displayed in this unit. Possible values are:
"dB" – 0-1 is displayed as -∞dB to 0dB"Hz"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:
ticks, values may be listed with or without units."ticks". The values in the ticks attribute are used as steps.value
The initial value of the fader.
.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.
label
Style the label.
output
Style the display of the output value.
tick
Style the tick marks.
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
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.
loop
Boolean attribute. Makes the slideshow behave as a continuous loop.
autoplay
Boolean attribute.
prev
Style the ‘previous slide’ button.
next
Style the ‘next slide’ button.
link
Style the navigation links.
active-link
Style the navigation link for the currently active slide.
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.
link-top
Adjusts the vertical position of the list of links. Negative values make it appear over the slides.
link-gap
Adjusts the gap between links.