StyleDoc :: Example 1 :: FS/NodeJS showcase

Buttons

button [:disabled]

Normal button
<button>Button text</button>
<button disabled="disabled">Button text</button>

button.bright [:disabled]

Bright variation of button
<button class="bright">Button text</button>
<button class="bright" disabled="disabled">Button text</button>

button.large [:disabled]

Large-sized button
<button class="large">Button text</button>
<button class="large" disabled="disabled">Button text</button>

button.large.bright [:disabled]

Large-sized bright button
<button class="large bright">Button text</button>
<button class="large bright" disabled="disabled">Button text</button>

Checkboxes

Using label::before to apply custom box style

input[type="checkbox"] [:checked] [:disabled] [:disabled:checked]

Normal checkbox
<input type="checkbox" id="unique_id">
<label for="unique_id">Checkbox label</label>
<input type="checkbox" id="unique_id_checked" checked="checked">
<label for="unique_id_checked">Checkbox label</label>
<input type="checkbox" id="unique_id_disabled" disabled="disabled">
<label for="unique_id_disabled">Checkbox label</label>
<input type="checkbox" id="unique_id_disabled_checked" disabled="disabled" checked="checked">
<label for="unique_id_disabled_checked">Checkbox label</label>

input[type="checkbox"].large [:checked] [:disabled] [:disabled:checked]

Large-sized checkbox
<input type="checkbox" id="unique_id" class="large">
<label for="unique_id">Checkbox label</label>
<input type="checkbox" id="unique_id_checked" class="large" checked="checked">
<label for="unique_id_checked">Checkbox label</label>
<input type="checkbox" id="unique_id_disabled" class="large" disabled="disabled">
<label for="unique_id_disabled">Checkbox label</label>
<input type="checkbox" id="unique_id_disabled_checked" class="large" disabled="disabled" checked="checked">
<label for="unique_id_disabled_checked">Checkbox label</label>