Skip to content
STYLESCAPE

Control grid

Examples for the ss-c-control-grid module: a property inspector with labels in one column and controls in the other, and ss-c-control-row for a single line of buttons. Below 30em the grid stacks (opt out with --fixed).

Property inspector

Cursor

24 px

Behaviour

Magnetic
ms
HTML 
<form class="ss-c-control-grid" style="max-width: 440px" data-ss="range-output">
            <h3 class="ss-c-control-grid__heading">Cursor</h3>
            <label class="ss-c-control-grid__label" for="cg-size">Size</label>
            <div class="ss-c-control-grid__control">
                <div class="ss-c-range-field ss-c-range-field--inline" style="flex: 1">
                    <input id="cg-size" type="range" class="ss-c-range ss-c-range--sm" min="8" max="64" value="24" style="--ss-range-progress: 28.6%">
                    <output for="cg-size" class="ss-c-range-field__output" data-ss-output-suffix=" px">24 px</output>
                </div>
            </div>
            <label class="ss-c-control-grid__label" for="cg-colour">Colour</label>
            <div class="ss-c-control-grid__control">
                <input id="cg-colour" type="color" class="ss-c-color-input ss-c-color-input--sm" value="#287192">
            </div>
            <label class="ss-c-control-grid__label" for="cg-blend">Blend</label>
            <div class="ss-c-control-grid__control">
                <select id="cg-blend" class="ss-c-select ss-c-select--sm">
                    <option>Normal</option><option>Difference</option><option>Multiply</option>
                </select>
            </div>
            <h3 class="ss-c-control-grid__heading">Behaviour</h3>
            <div class="ss-c-control-grid__row">
                <span class="ss-c-control-grid__label" id="cg-magnetic">Magnetic</span>
                <div class="ss-c-control-grid__control">
                    <input type="checkbox" role="switch" class="ss-c-switch__input" aria-labelledby="cg-magnetic" checked>
                </div>
            </div>
            <label class="ss-c-control-grid__label" for="cg-delay">Delay</label>
            <div class="ss-c-control-grid__control">
                <input id="cg-delay" type="number" class="ss-c-input ss-c-input--sm" style="width: 8ch" value="120">
                <span class="ss-c-control-grid__value">ms</span>
            </div>
            <div class="ss-c-control-grid__full ss-c-control-row">
                <button type="reset" class="ss-c-button">Reset</button>
                <button type="button" class="ss-c-button">Apply</button>
            </div>
        </form>

Compact

Position
412, 96
Velocity
0.84 px/ms
State
hover
HTML 
<dl class="ss-c-control-grid ss-c-control-grid--compact" style="max-width: 320px">
            <dt class="ss-c-control-grid__label">Position</dt>
            <dd class="ss-c-control-grid__control" style="margin: 0"><span class="ss-c-control-grid__value">412, 96</span></dd>
            <dt class="ss-c-control-grid__label">Velocity</dt>
            <dd class="ss-c-control-grid__control" style="margin: 0"><span class="ss-c-control-grid__value">0.84 px/ms</span></dd>
            <dt class="ss-c-control-grid__label">State</dt>
            <dd class="ss-c-control-grid__control" style="margin: 0">hover</dd>
        </dl>

Control row

Toggle all
HTML 
<div class="ss-c-control-row">
            <span class="ss-c-control-row__label">Toggle all</span>
            <button type="button" class="ss-c-button">On</button>
            <button type="button" class="ss-c-button">Off</button>
            <label for="cr-filter" class="ss-u-visually-hidden">Filter events</label>
            <select id="cr-filter" class="ss-c-select" style="width: auto">
                <option>All events</option><option>Errors only</option>
            </select>
        </div>