storyteller.io CSS Styleguide

Controls

UI Blocks

13.1

Button

Example Markup
<button class="ui-button">Save Changes</button>
Modifiers  
:active

Depressed button.

:hover

Futuristic button.

ui-button--submit

Button that will submit data somewhere. [type="disabled"] also looks like this.

ui-button--disabled

Button that won’t do anything. [type="disabled"] also looks like this.

13.2

Switch

Enhance simple radio buttons to prominently communicate a boolean state.

Example Markup
<form name="switch" method="post" action="#">
    <fieldset class="ui-switch">
        <input type="radio" id="switch_on" name="switch" value="on" checked />
        <label class="ui-switch__label" for="switch_on">On</label>
        <input type="radio" id="switch_off" name="switch" value="on" />
        <label class="ui-switch__label" for="switch_off">Off</label>
    </fieldset>
</form>
Modifiers  
input:checked

Indicates current selection.

13.3

Text Input

Overrides browser default styling for single line inputs and multiline textareas.

Example Markup
<form name="signup" method="post" action="#">
    <input class="ui-text --fill --scale-4x" type="text" placeholder="Please enter your name" />
</form>
Modifiers  
:focus

Ready for some input

:disabled

No input allowed in the input

--error

Something isn’t right with the input

13.4

Annotation

Example Markup
<form method=POST action="#">
    <fieldset class="ui-annotation">
        <textarea class="ui-annotation__text" rows=3>Terry Richardson direct trade polaroid kale chips artisan selfies. Swag twee small batch, polaroid lomo chillwave Banksy. Single-origin coffee High Life bitters, Bushwick gastropub skateboard Vice bicycle rights kogi food truck whatever Carles. Umami pork belly.</textarea>
        <button type="submit" class="ui-annotation__save js-annotation__save"><span>Save</span></button>
    </fieldset>
</form>
Modifiers  
:active

Editing mode.