Styleguide
Barvy
<div class="colorbox--@color"></div>
Boxy
<div class="colorbox--white border">Border box</div> <div class="colorbox--primary radius--small">Border box with small radius</div> <div class="colorbox--primary radius">Border box with normal radius</div> <div class="colorbox--primary radius--large">Border box with large radius</div>
Texty
H1 Nadpis
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim elit, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
H2 Nadpis
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
H3 Nadpis
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
H4 Nadpis
H5 Nadpis
H6 Nadpis
Large
Small
<p class="large"></p> <p class="small"></p>
Oddělovací čára
<hr>
Tabulka
Table Header 1 | Table Header 2 |
---|---|
Table cell 1 | Table cell 2 |
Table cell 3 | Table cell 4 |
Table cell 5 | Table cell 6 |
Table cell 7 | Table cell 8 |
<table class="table"></table>
Tlačítka
Button Button default Button primary Button secondary Button green<a class="btn"></a> <a class="btn btn--default"></a> <a class="btn btn--primary"></a> <a class="btn btn--secondary"></a> <a class="btn btn--green"></a>
Velikosti
Button large Button normal Button small<a class="btn btn--primary btn--large"></a> <a class="btn btn--primary"></a> <a class="btn btn--primary btn--small"></a>
Reset
Všechny by měi vypadat jako odkaz
odkaz Button default Button primary Button secondary<a>odkaz</a> <a class="btn btn--default btn--reset"></a> <a class="btn btn--primary btn--reset"></a> <a class="btn btn--secondary btn--reset"></a>
Toggle
Toggle<a class="btn btn--toggle">Toggle</a>
Block
<a class="btn btn-default btn--block">Block</a> <a class="btn btn--primary btn--block">Block</a>
Disabled
Button disabled Button disabled Button disabled<a class="btn btn--primary btn--disabled"></a>
Ikony
Button primary Button secondary Button small Button large Button reset<a class="btn btn--primary"><i class="icon icon-home"></i>Button primary</a> <a class="btn btn--secondary"><i class="icon icon-home icon--after"></i>Button secondary</a> <a class="btn btn--primary btn--small"><i class="icon icon-home"></i>Button small</a> <a class="btn btn--secondary btn--large"><i class="icon icon-home icon--after"></i>Button large</a> <a class="btn btn--primary btn--reset"><i class="icon icon-home"></i>Button reset</a> <a class="btn btn--primary btn--block"><span class="inline-block"><i class="icon icon-home"></i>Icon stick on text</span></a>
Seznamy
Běžný seznam
- Lorem ipsum dolor sit amet
- consectetur adipisicing elit
- quis nostrud exercitation
<ul> <li></li> <li></li> <li></li> </ul>
Stylovaný seznam
- Lorem ipsum dolor sit amet
- consectetur adipisicing elit
- quis nostrud exercitation
<ul class="ul"></ul>
Stylovaný seznam - vlastní ikony
- Lorem ipsum dolor sit amet
- consectetur adipisicing elit
- consectetur adipisicing elit
- quis nostrud exercitation
<ul class="ul--myicon"> <li><i class="icon icon-home"></i>Lorem ipsum dolor sit amet</li> <li><i class="icon icon-mail"></i>consectetur adipisicing elit</li> <li>consectetur adipisicing elit</li> <li><i class="icon icon-phone"></i>quis nostrud exercitation</li> </ul>
Stylovaný seznam s odstavcem
- consectetur adipisicing elit
- consectetur adipisicing elit
- consectetur adipisicing elit
- consectetur adipisicing elit
<ul class="ul--myicon ul--indent"></ul> <ul class="ul--myicon ul--indent ul--indent--large"></ul>
Číslovaný seznam
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
<ol> <li></li> <li></li> <li></li> </ol>
Vertikální seznam
- Moje objednávky
- Změnit osobní informace
- Změnit heslo
- Odhlásit se
<ul class="ul--vertical"></ul>
Záložky
Běžné záložky
Tab 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Tab 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Tab 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Tab 4
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Tab 5
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<div class="tabs tabs--default"> <div class="tabs-tab"> <input class="tab-radio" type="radio" id="tab-normal-1" name="tab-group-1" checked> <label class="tab-label" for="tab-normal-1">Tab 1</label> <div class="tab-panel"> <div class="tab-content"> Content </div> </div> </div> <div class="tabs-tab"> <input class="tab-radio" type="radio" id="tab-normal-2" name="tab-group-1"> <label class="tab-label" for="tab-normal-2">Tab 1</label> <div class="tab-panel"> <div class="tab-content"> Content </div> </div> </div> </div>
Menší záložky
Tab 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Tab 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Tab 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Tab 4
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Tab 5
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<div class="tabs tabs--default tabs--small"></div>
Fake záložky
<div class="tabs--default tabs--fake"> <div class="tab-label tab-label--active"></div> <div class="tab-label"></div> <div class="tab-label"></div> <div class="tab-label"></div> </div>
Formuláře
<div class="form--default form--formatted"> {control loginForm} </div>
Inputy - velikosti
<input class="form-control text" type="text" /> <input class="form-control text text--small" type="text" /> <input class="form-control text text--large" type="text" />
Input boxy
<div class="input-box"> <input type="checkbox" id="check-1" class="input-box-input"> <label for="check-1" class="input-box-label"> <span>{_'Checkbox'}</span> </label> </div> <div class="input-box"> <input type="radio" name="styleguide-radio" id="radio-1" class="input-box-input"> <label for="radio-1" class="input-box-label"> <span>{_'Radio'}</span> </label> </div>
Selectbox
JS automaticky obalí všechny select tagy.
<select> <option selected></option> <option></option> <option></option> </select>
Ikony
<i class="icon icon-@icon"></i>
Použití ikon
<i class="icon icon-arrow-right"></i> <i class="icon icon-arrow-right icon--reverse"></i> <i class="icon icon-home icon--after"></i> <i class="icon icon-home icon--primary"></i> <i class="icon icon-home icon--secondary"></i> <i class="icon icon-home icon--large"></i> <i class="icon icon-arrow-down icon--primary icon--large icon--reverse icon--after"></i> <i class="icon icon-home icon--after icon--before"></i>