StyleDoc :: Example 1 :: FS/NodeJS + PhantomJS 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>