03 Formulářové prvky
Zdrojové CSS:
/src/css/atoms/forms/_input.scss,
/src/css/atoms/forms/_select.scss
a /src/css/atoms/_message.scss
Zdrojové JS:
/src/js/components/selectize.coffee
Pro různé typy inputů používejte různé type atributy (např. type="email" pro emailový input apod.). Jeden z důvodů proč: na touch zařízeních se pak zobrazí správná klávesnice a usnadníte tím použitelnost vašich stránek.
Každý input má svůj holder inp-fix, kvůli pozdějšímu použití ikonek, pozicování buttonů apod. Každý input / textarea má classu inp-text, od které se vše styluje.
Pro zvýraznění povinného políčka slouží span require, který se umísťuje do elementu label a má dvě možnosti použití viz. příklad.
<p>
<label for="text">Label pro textový input</label><br>
<span class="inp-fix">
<input type="text" name="text" id="text" class="inp-text">
</span>
</p>
<p>
<label for="required">Povinný textový input <span class="required">(povinné)</span></label><br>
<span class="inp-fix">
<input type="text" name="required" id="required" class="inp-text" value="Hodnota inputu">
</span>
</p>
<p>
<label for="required-star">Povinný textový input s hvězdičkou <span class="required required--asterisk">*</span></label><br>
<span class="inp-fix">
<input type="text" name="required" id="required-star" class="inp-text" value="Hodnota inputu">
</span>
</p>
<p>
<label for="disabled">Disabled input</label><br>
<span class="inp-fix">
<input type="text" name="disabled" id="disabled" class="inp-text" value="Hodnota inputu" disabled="disabled">
</span>
</p>
<p>
<label for="email">E-mail input</label><br>
<span class="inp-fix">
<input type="email" name="email" id="email" class="inp-text">
</span>
</p>
<p>
<label for="password">Heslo input</label><br>
<span class="inp-fix">
<input type="password" name="password" id="password" class="inp-text">
</span>
</p>
<p>
<label for="phone">Input pro zadání telefonního čísla</label><br>
<span class="inp-fix">
<input type="tel" name="phone" id="phone" class="inp-text">
</span>
</p>
<p>
<label for="number">Číselný input</label><br>
<span class="inp-fix">
<input type="number" name="number" id="number" class="inp-text">
</span>
</p>
<p>
<label for="placeholder" class="vhide">Input se skrytým labelem (placeholder)</label>
<span class="inp-fix">
<input type="text" name="placeholder" id="placeholder" class="inp-text" placeholder="Input se skrytým labelem (placeholder)">
</span>
</p>
<p>
<label for="textarea">Textarea</label><br>
<span class="inp-fix">
<textarea name="textarea" id="textarea" cols="50" rows="5" class="inp-text"></textarea>
</span>
</p>
<p>
<label for="text-big">Velký input</label><br>
<span class="inp-fix">
<input type="text" name="text-big" id="text-big" class="inp-text inp-text--big">
</span>
</p>
Inputy na řádku je možné skládat do klasického gridu nebo využít následující konstrukce.
Velikot buňek se řídí standardními třídami .size--[xs|s|m|l]--X-12, pro speciální případ, kdy se má nějakým prvkem vyplnit celý zbývající prostor je možno použít třídu .size--max.
Je možné také použít třídy .top a .bottom pro ovlivnění vertikálního zarovnání prvků.
S třídou .form-inline--force se prvky zobrazí vedle sebe i v mobilní verzi, kde se jinak už řadí pod sebe.
<div class="form-inline">
<p class="size--m--4-4 size--l--6-12">
<label for="email-1" class="vhide">E-mail input</label>
<span class="inp-fix">
<input type="email" name="email" id="email-1" class="inp-text" placeholder="Zadejte Váš e-mail">
</span>
</p>
<p>
<a href="#" class="btn btn-primary btn-s nowrap">
<span>Přihlásit k odběru</span>
</a>
</p>
</div>
<div class="form-inline">
<p class="size--max">
<label for="email-1" class="vhide">E-mail input</label>
<span class="inp-fix">
<input type="email" name="email" id="email-1" class="inp-text" placeholder="Zadejte Váš e-mail">
</span>
</p>
<p>
<a href="#" class="btn btn-primary btn-s nowrap">
<span>Přihlásit k odběru</span>
</a>
</p>
</div>
<div class="form-inline">
<p class="size--m--4-4 size--l--6-12">
<label for="email-1">E-mail input</label>
<span class="inp-fix">
<input type="email" name="email" id="email-1" class="inp-text" placeholder="Zadejte Váš e-mail">
</span>
</p>
<p class="bottom">
<a href="#" class="btn btn-primary btn-s nowrap">
<span>Přihlásit k odběru</span>
</a>
</p>
</div>
<div class="form-inline form-inline--force">
<p class="size--max">
<label for="email-1" class="vhide">E-mail input</label>
<span class="inp-fix">
<input type="email" name="email" id="email-1" class="inp-text" placeholder="Zadejte Váš e-mail">
</span>
</p>
<p class="bottom">
<a href="#" class="btn btn-primary btn-s nowrap">
<span>Přihlásit se</span>
</a>
</p>
</div>
<div class="form-inline form-inline--spaced">
<p>
<label for="email-1">E-mail input s velmi dlouhým popiskem s mezerou za</label>
<span class="inp-fix">
<input type="email" name="email" id="email-1" class="inp-text" placeholder="Zadejte Váš e-mail">
</span>
</p>
<p>
<label for="type">Nadpis pole delší než pole aby vedle něj byla vidět mezera která tam není</label>
<span class="inp-fix inp-fix--select">
<select name="type" id="type" class="inp-select">
<option value="0">Celá MUNI</option>
<option value="law">Právnická fakulta</option>
<option value="med">Lékařská fakulta</option>
<option value="sci">Přírodovědecká fakulta</option>
<option value="fi">Fakulta informatiky</option>
<option value="fss">Fakulta sociálnách studií</option>
<option value="fsps">Fakulta sportovních studií</option>
<option value="phil">Filozofická fakulta</option>
<option value="ped">Pedagogická fakulta</option>
<option value="econ">Ekonomicko-správní fakulta</option>
</select>
</span>
</p>
</div>Inputy na řádku je možné skládat do klasického gridu nebo využít následující konstrukce.
Velikot buňek se řídí standardními třídami .size--[xs|s|m|l]--X-12, pro speciální případ, kdy se má nějakým prvkem vyplnit celý zbývající prostor je možno použít třídu .size--max.
Je možné také použít třídy .top a .bottom pro ovlivnění vertikálního zarovnání prvků.
S třídou .form-inline--force se prvky zobrazí vedle sebe i v mobilní verzi, kde se jinak už řadí pod sebe.
Stejná jako atom Inputy inline na řádku. Pouze se na element .form-inline přidá modifikátor .form-inline--spaced
<div class="form-inline form-inline--spaced">
<p>
<label for="email-2" class="vhide">E-mail input</label>
<span class="inp-fix">
<input type="email" name="email" id="email-2" class="inp-text" placeholder="E-mail">
</span>
</p>
<p>
<label for="password-1" class="vhide">Heslo input</label>
<span class="inp-fix">
<input type="password" name="password" id="password-1" class="inp-text" placeholder="Heslo">
</span>
</p>
<p>
<label class="inp-item inp-item--checkbox">
<input type="checkbox" name="checkbox" value="1">
<span>Zapamatovat</span>
</label>
</p>
<p>
<a href="#" class="btn btn-primary btn-s">
<span>Přihlásit</span>
</a>
</p>
</div>Stejná jako atom Inputy inline na řádku. Pouze se na element .form-inline přidá modifikátor .form-inline--spaced
<div class="form-inline">
<p class="size--m--4-4 size--l--6-12">
<label for="type" class="vhide">Nadpis pole</label>
<span class="inp-fix inp-fix--select">
<select name="type" id="type" class="inp-select inp-select--big">
<option value="0">Celá MUNI</option>
<option value="law">Právnická fakulta</option>
<option value="med">Lékařská fakulta</option>
<option value="sci">Přírodovědecká fakulta</option>
<option value="fi">Fakulta informatiky</option>
<option value="fss">Fakulta sociálnách studií</option>
<option value="fsps">Fakulta sportovních studií</option>
<option value="phil">Filozofická fakulta</option>
<option value="ped">Pedagogická fakulta</option>
<option value="econ">Ekonomicko-správní fakulta</option>
</select>
</span>
</p>
<p>
<a href="#" class="btn btn-primary nowrap">
<span>Odeslat</span>
</a>
</p>
</div>Stejná jako atom Inputy inline na řádku. Pouze s jinými variantami obsahu.
Atom po zobrazení ikonky na začátku inputu nebo na konci inputu. Pro zobrazení je potřeba přidat modifikátor .inp-icon na element .inp-fix spolu s modifikátorem inp-icon--before / inp-icon--after, podle toho kde chceme aby se ikonka zobrazila. Lze vložit jakýkoliv atom ikonky.
Ikonka může být také buttonem, který bude odesílat formulář. Také ji lze obarvit pomocí class z SK mini frameworku.
<p>
<label for="icon-before">Ikonka před s modifikátorem oranžové barvy</label><br>
<span class="inp-fix inp-icon inp-icon--before">
<input type="text" name="icon-before" id="icon-before" class="inp-text">
<span class="icon icon-exclamation-triangle orange"></span>
</span>
</p>
<p>
<label for="btn-before">Ikonka před button</label><br>
<span class="inp-fix inp-icon inp-icon--before">
<input type="text" name="btn-before" id="btn-before" class="inp-text">
<button type="submit" class="btn-icon icon icon-envelope" title="Odeslat">
<span class="vhide">Odeslat</span>
</button>
</span>
</p>
<p>
<label for="icon-after">Ikonka za s modifikátorem červené barvy</label><br>
<span class="inp-fix inp-icon inp-icon--after">
<input type="text" name="icon-after" id="icon-after" class="inp-text">
<span class="icon icon-exclamation-triangle red"></span>
</span>
</p>
<p>
<label for="btn-after">Ikonka jako button</label><br>
<span class="inp-fix inp-icon inp-icon--after">
<input type="text" name="btn-after" id="btn-after" class="inp-text">
<button type="submit" class="btn-icon icon icon-envelope" title="Odeslat">
<span class="vhide">Odeslat</span>
</button>
</span>
</p>Atom po zobrazení ikonky na začátku inputu nebo na konci inputu. Pro zobrazení je potřeba přidat modifikátor .inp-icon na element .inp-fix spolu s modifikátorem inp-icon--before / inp-icon--after, podle toho kde chceme aby se ikonka zobrazila. Lze vložit jakýkoliv atom ikonky.
Ikonka může být také buttonem, který bude odesílat formulář. Také ji lze obarvit pomocí class z SK mini frameworku.
Popisek políčka je možné vložit jako element div.inp-field--description, políčko v tu chvíli ale nesmí být p, ale div.inp-field. Do popisu je možné vkládat odstavce a další prvky.
Nápověda či doplňující info k inputu se vkládá do elementu .inp-fix jako span.inp-info, který může mít ikonku dle pořeby.
Stavy se určují pomocí class .error, .warning, .success na obalující elementu p. Modifikátor způsobí přebarvení doplňujícího info inputu a případně borderu inputu.
<div class="inp-field">
<label for="help-inp">Input s nápovědou <span class="required">(povinné)</span></label>
<div class="inp-field--description">
<p>Popisek políčka</p>
</div>
<span class="inp-fix">
<input type="text" name="help-inp" id="help-inp" class="inp-text">
<span class="inp-info">Nápověda k inputu</span>
</span>
</div>
<div class="inp-field">
<label for="help-inp">Input s nápovědou <span class="required">(povinné)</span></label>
<div class="inp-field--description">
<div class="grid">
<div class="grid__cell size--s--1-2"><p>Popisek políčka</p></div>
<div class="grid__cell size--s--1-2"><p>Popisek políčka</p></div>
</div>
</div>
<span class="inp-fix">
<input type="text" name="help-inp" id="help-inp" class="inp-text">
<span class="inp-info">Nápověda k inputu</span>
</span>
</div>
<p>
<label for="help-inp-icon">Input s nápovědou <span class="required">(povinné)</span></label><br>
<span class="inp-fix">
<input type="text" name="help-inp-icon" id="help-inp-icon" class="inp-text">
<span class="inp-info">
<span class="icon icon-exclamation-triangle"></span>
Nápověda k inputu s ikonkou
</span>
</span>
</p>
<p class="error">
<label for="error">Error input <span class="required">(povinné)</span></label><br>
<span class="inp-fix">
<input type="text" name="error" id="error" class="inp-text">
<span class="inp-info">Popis nesprávně vyplněného pole</span>
</span>
</p>
<p class="error">
<label for="error-icon">Error input <span class="required">(povinné)</span></label><br>
<span class="inp-fix">
<input type="text" name="error-icon" id="error-icon" class="inp-text">
<span class="inp-info">
<span class="icon icon-exclamation-triangle"></span>
Popis nesprávně vyplněného pole
</span>
</span>
</p>
<p class="warning">
<label for="warning">Warning input <span class="required">(povinné)</span></label><br>
<span class="inp-fix">
<input type="text" name="warning" id="warning" class="inp-text">
<span class="inp-info">Popis pole</span>
</span>
</p>
<p class="warning">
<label for="warning-icon">Warning input <span class="required">(povinné)</span></label><br>
<span class="inp-fix">
<input type="text" name="warning-icon" id="warning-icon" class="inp-text">
<span class="inp-info">
<span class="icon icon-exclamation-triangle"></span>
Popis pole
</span>
</span>
</p>
<p class="success">
<label for="success">Success input <span class="required">(povinné)</span></label><br>
<span class="inp-fix">
<input type="text" name="success" id="success" class="inp-text">
<span class="inp-info">Popis pole</span>
</span>
</p>
<p class="success">
<label for="success-icon">Success input <span class="required">(povinné)</span></label><br>
<span class="inp-fix">
<input type="text" name="success-icon" id="success-icon" class="inp-text">
<span class="inp-info">
<span class="icon icon-check"></span>
Popis pole
</span>
</span>
</p>Popisek políčka je možné vložit jako element div.inp-field--description, políčko v tu chvíli ale nesmí být p, ale div.inp-field. Do popisu je možné vkládat odstavce a další prvky.
Nápověda či doplňující info k inputu se vkládá do elementu .inp-fix jako span.inp-info, který může mít ikonku dle pořeby.
Stavy se určují pomocí class .error, .warning, .success na obalující elementu p. Modifikátor způsobí přebarvení doplňujícího info inputu a případně borderu inputu.
Popisek políčka
Popisek políčka
Popisek políčka
Nápověda k inputu s ikonkou
Popis nesprávně vyplněného pole
Popis nesprávně vyplněného pole
Popis pole
Popis pole
Popis pole
Popis pole
Základní select bez použití JS se styluje classou .inp-select s obalem .inp-fix a modifikátorem .inp-fix--select.
K možnosti customizace vzhledu selectu a našeptávač pro standardní input se využívá plugin http://selectize.github.io/selectize.js/. JS se naváže classou js-select na selectu / inputu (pro našeptávač)
Pro našeptávač je potřeba nastavit atribut data-suggest dle příkladu. Více v dokumentaci pluginu výše.
<p>
<label for="select-0">Standardní select bez JS</label><br>
<span class="inp-fix inp-fix--select">
<select name="select" id="select-0" class="inp-select">
<option value="0">Aperiam, maxime, nulla</option>
<option value="1">Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</option>
<option value="2">Libero, at mollitia</option>
<option value="3">Eius, repellendus, nihil</option>
<option value="4">Omnis, fuga dolores</option>
<option value="5">Natus, dolorum harum</option>
<option value="6">Temporibus reiciendis, ipsa</option>
<option value="7">Vitae, officia, explicabo</option>
<option value="8">Delectus ad, rerum</option>
<option value="9">Ab, laborum dignissimos</option>
</select>
</span>
</p>
<p>
<label for="select-0-big">Standardní velký select bez JS</label><br>
<span class="inp-fix inp-fix--select">
<select name="select" id="select-0-big" class="inp-select inp-select--big">
<option value="0">Aperiam, maxime, nulla</option>
<option value="1">Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</option>
<option value="2">Libero, at mollitia</option>
<option value="3">Eius, repellendus, nihil</option>
<option value="4">Omnis, fuga dolores</option>
<option value="5">Natus, dolorum harum</option>
<option value="6">Temporibus reiciendis, ipsa</option>
<option value="7">Vitae, officia, explicabo</option>
<option value="8">Delectus ad, rerum</option>
<option value="9">Ab, laborum dignissimos</option>
</select>
</span>
</p>
<p>
<label for="select-1-selectized">Select s js</label><br>
<span class="inp-fix inp-fix--select">
<select name="select" id="select-1" class="js-select inp-select selectized" tabindex="-1" style="display: none;"><option value="0" selected="selected">Aperiam, maxime, nulla</option></select><div class="selectize-control js-select inp-select single"><div class="selectize-input items full has-options has-items"><div class="item" data-value="0">Aperiam, maxime, nulla</div><input type="select-one" autocomplete="off" tabindex="" id="select-1-selectized" style="width: 4px;"></div><div class="selectize-dropdown single" style="display: none;"><div class="selectize-dropdown-content"></div></div></div>
</span>
</p>
<p id="reload">
<label for="select-2-selectized">Select s reloadem na url</label><br>
<span class="inp-fix inp-fix--select">
<select name="select" id="select-2" class="js-select inp-select selectized" tabindex="-1" style="display: none;"><option value="0" selected="selected">Vyberte</option></select><div class="selectize-control js-select inp-select single"><div class="selectize-input items full has-options has-items"><div class="item" data-value="0">Vyberte</div><input type="select-one" autocomplete="off" tabindex="" id="select-2-selectized" style="width: 4px;"></div><div class="selectize-dropdown single" style="display: none;"><div class="selectize-dropdown-content"></div></div></div>
</span>
</p>
<form action="?">
<p>
<label for="suggest-selectized">Našeptávač</label><br>
<span class="inp-fix">
<input type="text" name="suggest" id="suggest" class="inp-text js-suggest selectized" data-suggest="{
"url":"../ajax/suggest.php",
"optgroups":[
{"id": "category", "name": "Kategorie"},
{"id": "item", "name": "Textové výsledky"}
]
}" tabindex="-1" value="" style="display: none;"><div class="selectize-control inp-text js-suggest single plugin-restore_on_backspace"><div class="selectize-input items not-full"><input type="text" autocomplete="off" tabindex="" id="suggest-selectized" style="width: 4px;"></div><div class="selectize-dropdown single plugin-restore_on_backspace" style="display: none;"><div class="selectize-dropdown-content"></div></div></div>
</span>
</p>
</form>Základní select bez použití JS se styluje classou .inp-select s obalem .inp-fix a modifikátorem .inp-fix--select.
K možnosti customizace vzhledu selectu a našeptávač pro standardní input se využívá plugin http://selectize.github.io/selectize.js/. JS se naváže classou js-select na selectu / inputu (pro našeptávač)
Pro našeptávač je potřeba nastavit atribut data-suggest dle příkladu. Více v dokumentaci pluginu výše.
Důležitá je struktura label.inp-item > input + span, která díky css3 selektorům dokáže přestylovat checkbox/radio pomocí pseudoelementu :before a :after. Pro .inp-item se používají modifikátory inp-item--checkbox pro checkbox a inp-item--radio pro radio.
Radia a checkboxy se mohou použí v různých souvislosech. Samostatně v elementu p. V elementu .inp--items jako výpis ul.inp-items__list > li nebo inlinově s modifikátorem inp-items--inline na elementu .inp-items.
Error stav se řeší stejně jako u klasických inputů, tedy vložením class error na obalující element. Pokud chceme zvýraznit celý výpis, pak error classu nevložíme na obalující li, ale na ul.
Disabled stav inputu se řeší pomocí atributu disabled="disabled". Checked stav se řeší pomocí atributu checked="checked"
<p>
<label class="inp-item inp-item--checkbox">
<input type="checkbox" name="checkbox" value="1">
<span>Samostatný checkbox</span>
</label>
</p>
<div class="inp-items">
<p class="inp-items__label">Blokové checkboxy</p>
<ul class="inp-items__list">
<li class="inp-items__item">
<label class="inp-item inp-item--checkbox">
<input type="checkbox" name="checkbox1" value="1">
<span>Checkbox 1</span>
</label>
</li>
<li class="inp-items__item">
<label class="inp-item inp-item--checkbox">
<input type="checkbox" name="checkbox1" value="2" checked="checked">
<span>Checkbox 2</span>
</label>
</li>
<li class="inp-items__item">
<label class="inp-item inp-item--checkbox">
<input type="checkbox" name="checkbox1" value="3" disabled="disabled">
<span>Checkbox 3</span>
</label>
</li>
<li class="inp-items__item">
<label class="inp-item inp-item--checkbox">
<input type="checkbox" name="checkbox1" value="4" disabled="disabled" checked="checked">
<span>Checkbox 4</span>
</label>
</li>
<li class="inp-items__item error">
<label class="inp-item inp-item--checkbox">
<input type="checkbox" name="checkbox1" value="5">
<span>Checkbox 5</span>
</label>
</li>
<li class="inp-items__item error">
<label class="inp-item inp-item--checkbox">
<input type="checkbox" name="checkbox1" value="6" checked="checked">
<span>Checkbox 6</span>
</label>
</li>
</ul>
</div>
<div class="inp-items inp-items--inline">
<p class="inp-items__label">Inlinové checkboxy</p>
<ul class="inp-items__list">
<li class="inp-items__item">
<label class="inp-item inp-item--checkbox">
<input type="checkbox" name="checkbox2" value="1">
<span>Checkbox 1</span>
</label>
</li>
<li class="inp-items__item">
<label class="inp-item inp-item--checkbox">
<input type="checkbox" name="checkbox2" value="2">
<span>Checkbox 2</span>
</label>
</li>
</ul>
</div>
<div class="inp-items inp-items--inline error">
<p class="inp-items__label">Error inline checkboxy <span class="required">(povinné)</span></p>
<ul class="inp-items__list">
<li class="inp-items__item">
<label class="inp-item inp-item--checkbox">
<input type="checkbox" name="checkbox2" value="1">
<span>Checkbox 1</span>
</label>
</li>
<li class="inp-items__item">
<label class="inp-item inp-item--checkbox">
<input type="checkbox" name="checkbox2" value="2">
<span>Checkbox 2</span>
</label>
</li>
</ul>
</div>
<p>
<label class="inp-item inp-item--radio">
<input type="radio" name="radio" value="1">
<span>Samostatný radio - nemělo by se používat samo -> nejde odškrtnout</span>
</label>
</p>
<div class="inp-items">
<p class="inp-items__label">Blokové radia</p>
<ul class="inp-items__list">
<li class="inp-items__item">
<label class="inp-item inp-item--radio">
<input type="radio" name="radio1" value="1">
<span>Radio 1</span>
</label>
</li>
<li class="inp-items__item">
<label class="inp-item inp-item--radio">
<input type="radio" name="radio1" value="2" disabled="disabled" checked="checked">
<span>Radio 2</span>
</label>
</li>
<li class="inp-items__item error">
<label class="inp-item inp-item--radio">
<input type="radio" name="radio1" value="3">
<span>Radio 3</span>
</label>
</li>
</ul>
</div>
<div class="inp-items inp-items--inline">
<p class="inp-items__label">Řádkové radia</p>
<ul class="inp-items__list">
<li class="inp-items__item">
<label class="inp-item inp-item--radio">
<input type="radio" name="radio2" value="1">
<span>Radio 1</span>
</label>
</li>
<li class="inp-items__item">
<label class="inp-item inp-item--radio">
<input type="radio" name="radio2" value="2">
<span>Radio 2</span>
</label>
</li>
</ul>
</div>Důležitá je struktura label.inp-item > input + span, která díky css3 selektorům dokáže přestylovat checkbox/radio pomocí pseudoelementu :before a :after. Pro .inp-item se používají modifikátory inp-item--checkbox pro checkbox a inp-item--radio pro radio.
Radia a checkboxy se mohou použí v různých souvislosech. Samostatně v elementu p. V elementu .inp--items jako výpis ul.inp-items__list > li nebo inlinově s modifikátorem inp-items--inline na elementu .inp-items.
Error stav se řeší stejně jako u klasických inputů, tedy vložením class error na obalující element. Pokud chceme zvýraznit celý výpis, pak error classu nevložíme na obalující li, ale na ul.
Disabled stav inputu se řeší pomocí atributu disabled="disabled". Checked stav se řeší pomocí atributu checked="checked"
Blokové checkboxy
Inlinové checkboxy
Error inline checkboxy (povinné)
Blokové radia
Řádkové radia
<div class="box-bg box-bg--primary white">
<p>
<label for="text2">Label pro textový input</label><br>
<span class="inp-fix">
<input type="text" name="text" id="text2" class="inp-text">
</span>
</p>
<p class="error">
<label for="error2">Error input <span class="required">(povinné)</span></label><br>
<span class="inp-fix">
<input type="text" name="error" id="error2" class="inp-text">
<span class="inp-info">Popis nesprávně vyplněného pole</span>
</span>
</p>
<p class="warning">
<label for="warning2">Warning input <span class="required">(povinné)</span></label><br>
<span class="inp-fix">
<input type="text" name="warning" id="warning2" class="inp-text">
<span class="inp-info">Popis pole</span>
</span>
</p>
<p class="success">
<label for="success2">Success input <span class="required">(povinné)</span></label><br>
<span class="inp-fix">
<input type="text" name="success" id="success2" class="inp-text">
<span class="inp-info">Popis pole</span>
</span>
</p>
<p>
<label for="type2">Label pro combobox</label>
<span class="inp-fix inp-fix--select">
<select name="type" id="type2" class="inp-select">
<option value="0">Celá MUNI</option>
<option value="law">Právnická fakulta</option>
<option value="med">Lékařská fakulta</option>
<option value="sci">Přírodovědecká fakulta</option>
<option value="fi">Fakulta informatiky</option>
<option value="fss">Fakulta sociálnách studií</option>
<option value="fsps">Fakulta sportovních studií</option>
<option value="phil">Filozofická fakulta</option>
<option value="ped">Pedagogická fakulta</option>
<option value="econ">Ekonomicko-správní fakulta</option>
</select>
</span>
</p>
<p>
<label class="inp-item inp-item--checkbox">
<input type="checkbox" name="checkbox" value="1">
<span>Samostatný checkbox</span>
</label>
</p>
<div class="inp-items inp-items--inline">
<p class="inp-items__label">Řádkové radia</p>
<ul class="inp-items__list">
<li class="inp-items__item">
<label class="inp-item inp-item--radio">
<input type="radio" name="radio2" value="1">
<span>Radio 1</span>
</label>
</li>
<li class="inp-items__item">
<label class="inp-item inp-item--radio">
<input type="radio" name="radio2" value="2">
<span>Radio 2</span>
</label>
</li>
</ul>
</div>
</div>Na oblaující prvek je potřeba umístit třídu .white.
Popis nesprávně vyplněného pole
Popis pole
Popis pole
Řádkové radia
Standardní atom pro hlášky je .message, který je dále modifikován dle potřeby zvýraznění:
message--error - červená
message--warning - oranžová
message--info - modrá
message--success - zelená
Ikonka lze použít kterákoliv z atomů ikonek.
Pokud nechcete možnost zavření hlášky, pak stačí odstranit .message__close
<div class="grid">
<div class="grid__cell size--l--6-12">
<div class="message message--common message--common-error" role="alert">
<a href="#" class="message__close icon icon-times" title="Zavřít">
<span class="vhide">Zavřít</span>
</a>
<span class="message__icon icon icon-exclamation-triangle"></span>
<h2 class="message__title">
Chyba
</h2>
<p class="message__desc">
Popis mollis laoreet nisl id tincidunt. Pellentesque mollis
</p>
<p class="message__link-close">
<a href="#">
Zavřít
</a>
</p>
</div>
</div>
<div class="grid__cell size--l--6-12">
<div class="message message--common message--common-warning" role="alert">
<a href="#" class="message__close icon icon-times" title="Zavřít">
<span class="vhide">Zavřít</span>
</a>
<span class="message__icon icon icon-exclamation-triangle"></span>
<h2 class="message__title">
Výstraha
</h2>
<p class="message__desc">
Popis mollis laoreet nisl id tincidunt. Pellentesque mollis
</p>
<p class="message__link-close">
<a href="#">
Zavřít
</a>
</p>
</div>
</div>
<div class="grid__cell size--l--6-12">
<div class="message message--common message--common-info" role="alert">
<a href="#" class="message__close icon icon-times" title="Zavřít">
<span class="vhide">Zavřít</span>
</a>
<span class="message__icon icon icon-info-circle"></span>
<h2 class="message__title">
Informace
</h2>
<p class="message__desc">
Popis mollis laoreet nisl id tincidunt. Pellentesque mollis
</p>
<p class="message__link-close">
<a href="#">
Zavřít
</a>
</p>
</div>
</div>
<div class="grid__cell size--l--6-12">
<div class="message message--common message--common-success" role="alert">
<a href="#" class="message__close icon icon-times" title="Zavřít">
<span class="vhide">Zavřít</span>
</a>
<span class="message__icon icon icon-check-circle"></span>
<h2 class="message__title">
OK
</h2>
<p class="message__desc">
Popis mollis laoreet nisl id tincidunt. Pellentesque mollis
</p>
<p class="message__link-close">
<a href="#">
Zavřít
</a>
</p>
</div>
</div>
<div class="grid__cell size--l--6-12">
<div class="message message--error" role="alert">
<a href="#" class="message__close icon icon-times" title="Zavřít">
<span class="vhide">Zavřít</span>
</a>
<span class="message__icon icon icon-exclamation-triangle"></span>
<h2 class="message__title">
Chyba
</h2>
<p class="message__desc">
Popis mollis laoreet nisl id tincidunt. Pellentesque mollis
</p>
<p class="message__link-close">
<a href="#">
Zavřít
</a>
</p>
</div>
</div>
<div class="grid__cell size--l--6-12">
<div class="message message--warning" role="alert">
<a href="#" class="message__close icon icon-times" title="Zavřít">
<span class="vhide">Zavřít</span>
</a>
<span class="message__icon icon icon-exclamation-triangle"></span>
<h2 class="message__title">
Výstraha
</h2>
<p class="message__desc">
Popis mollis laoreet nisl id tincidunt. Pellentesque mollis
</p>
<p class="message__link-close">
<a href="#">
Zavřít
</a>
</p>
</div>
</div>
<div class="grid__cell size--l--6-12">
<div class="message message--info" role="alert">
<a href="#" class="message__close icon icon-times" title="Zavřít">
<span class="vhide">Zavřít</span>
</a>
<span class="message__icon icon icon-info-circle"></span>
<h2 class="message__title">
Informace
</h2>
<p class="message__desc">
Popis mollis laoreet nisl id tincidunt. Pellentesque mollis
</p>
<p class="message__link-close">
<a href="#">
Zavřít
</a>
</p>
</div>
</div>
<div class="grid__cell size--l--6-12">
<div class="message message--success" role="alert">
<a href="#" class="message__close icon icon-times" title="Zavřít">
<span class="vhide">Zavřít</span>
</a>
<span class="message__icon icon icon-check-circle"></span>
<h2 class="message__title">
OK
</h2>
<p class="message__desc">
Popis mollis laoreet nisl id tincidunt. Pellentesque mollis
</p>
<p class="message__link-close">
<a href="#">
Zavřít
</a>
</p>
</div>
</div>
</div>
Standardní atom pro hlášky je .message, který je dále modifikován dle potřeby zvýraznění:
message--error - červená
message--warning - oranžová
message--info - modrá
message--success - zelená
Ikonka lze použít kterákoliv z atomů ikonek.
Pokud nechcete možnost zavření hlášky, pak stačí odstranit .message__close
Pro formuláře s přihlášením přes externí služby. Tlačíka se obalí .btn-wrap.btn-wrap--samewidth. Každé pak na .btn musí mít modifikátor .btn-extlogin.
Tlačítko pro přihlášení přes MUNI má ikonu .btn--extlogin__icon.btn--extlogin__icon--muni.font-muni bez obsahu.
Ostatní tlačítka mají ikonu .btn--extlogin__icon.btn--extlogin__icon--other, obsahem pak samotná ikona. Může být vlastní obrázek nebo ikona ze sady.
<p class="btn-wrap btn-wrap--samewidth u-mb-50">
<a href="#" class="btn btn-primary btn-s btn--extlogin">
<span class="no-uppercase">
<span class="btn--extlogin__icon btn--extlogin__icon--muni font-muni"></span>
Přihlásit se přes <span class="font-muni">MUNI</span>
</span>
</a>
<a href="#" class="btn btn-primary btn-s btn--extlogin">
<span class="no-uppercase">
<span class="btn--extlogin__icon btn--extlogin__icon--other">
<img src="../img/bg/google.svg" width="16" height="16">
</span>
Přihlásit se přes Google
</span>
</a>
<a href="#" class="btn btn-primary btn-s btn--extlogin">
<span class="no-uppercase">
<span class="btn--extlogin__icon btn--extlogin__icon--other">
<span class="icon icon-arrow-square-right"></span>
</span>
Přihlásit se přes icon-arrow-square-right
</span>
</a>
</p>Pro formuláře s přihlášením přes externí služby. Tlačíka se obalí .btn-wrap.btn-wrap--samewidth. Každé pak na .btn musí mít modifikátor .btn-extlogin.
Tlačítko pro přihlášení přes MUNI má ikonu .btn--extlogin__icon.btn--extlogin__icon--muni.font-muni bez obsahu.
Ostatní tlačítka mají ikonu .btn--extlogin__icon.btn--extlogin__icon--other, obsahem pak samotná ikona. Může být vlastní obrázek nebo ikona ze sady.
<p class="btn-wrap btn-wrap--samewidth">
<a href="#" class="btn btn-primary btn-s btn-border btn--extlogin">
<span class="no-uppercase">
<span class="btn--extlogin__icon btn--extlogin__icon--muni font-muni"></span>
Přihlásit se přes <span class="font-muni">MUNI</span>
</span>
</a>
<a href="#" class="btn btn-primary btn-s btn-border btn--extlogin">
<span class="no-uppercase">
<span class="btn--extlogin__icon btn--extlogin__icon--other">
<img src="../img/bg/google.svg" width="16" height="16">
</span>
Přihlásit se přes Google
</span>
</a>
<a href="#" class="btn btn-primary btn-s btn-border btn--extlogin">
<span class="no-uppercase">
<span class="btn--extlogin__icon btn--extlogin__icon--other">
<span class="icon icon-arrow-square-right"></span>
</span>
Přihlásit se přes icon-arrow-square-right
</span>
</a>
</p>Oproti předchozí variantě modifikátor .btn-border na tlačítka.
Tlačítko musí mít třídu .btn--with-state a dále potomka span.btn__state, který obsahuje samotný element s indikací stavu. Při načítání se jedná o span.loading-indicator, pro ostatní stavy je možné použít span.icon.icon-[název].
<p><a href="#" id="switch-state">Přepnout stav</a></p>
<p class="btn-wrap">
<a href="#" class="btn btn-primary btn--with-state btn--show-state">
<span>Mám zájem</span>
<span class="btn__state">
<span class="loading-indicator loading-indicator--white loading-indicator--medium"></span>
</span>
</a>
<a href="#" class="btn btn-primary btn--with-state btn--show-state">
<span>Mám zájem</span>
<span class="btn__state">
<span class="big icon icon-times"></span>
</span>
</a>
<a href="#" class="btn btn-primary btn--with-state btn--show-state">
<span>Mám zájem</span>
<span class="btn__state">
<span class="big icon icon-check"></span>
</span>
</a>
</p>
<p class="btn-wrap">
<a href="#" class="btn btn-primary btn--with-state btn-border btn--show-state">
<span>Mám zájem</span>
<span class="btn__state">
<span class="loading-indicator loading-indicator--medium"></span>
</span>
</a>
<a href="#" class="btn btn-primary btn--with-state btn-border btn--show-state">
<span>Mám zájem</span>
<span class="btn__state">
<span class="big icon icon-times"></span>
</span>
</a>
<a href="#" class="btn btn-primary btn--with-state btn-border btn--show-state">
<span>Mám zájem</span>
<span class="btn__state">
<span class="big icon icon-check"></span>
</span>
</a>
</p>
<p class="btn-wrap">
<a href="#" class="btn btn-primary btn-s btn--with-state btn--show-state">
<span>Mám zájem</span>
<span class="btn__state">
<span class="loading-indicator loading-indicator--white"></span>
</span>
</a>
<a href="#" class="btn btn-primary btn-s btn--with-state btn--show-state">
<span>Mám zájem</span>
<span class="btn__state">
<span class="big icon icon-times"></span>
</span>
</a>
<a href="#" class="btn btn-primary btn-s btn--with-state btn--show-state">
<span>Mám zájem</span>
<span class="btn__state">
<span class="big icon icon-check"></span>
</span>
</a>
</p>
<p class="btn-wrap">
<a href="#" class="btn btn-primary btn-s btn--with-state btn-border btn--show-state">
<span>Mám zájem</span>
<span class="btn__state">
<span class="loading-indicator"></span>
</span>
</a>
<a href="#" class="btn btn-primary btn-s btn--with-state btn-border btn--show-state">
<span>Mám zájem</span>
<span class="btn__state">
<span class="big icon icon-times"></span>
</span>
</a>
<a href="#" class="btn btn-primary btn-s btn--with-state btn-border btn--show-state">
<span>Mám zájem</span>
<span class="btn__state">
<span class="big icon icon-check"></span>
</span>
</a>
</p>
<script type="text/javascript">
var element = document.getElementById('switch-state');
var buttons = document.querySelectorAll('.btn--show-state');
element.addEventListener('click', function(event) {
buttons.forEach(function(button) {
button.classList.toggle('btn--show-state');
});
event.preventDefault();
event.stopPropagation();
});
</script>Tlačítko musí mít třídu .btn--with-state a dále potomka span.btn__state, který obsahuje samotný element s indikací stavu. Při načítání se jedná o span.loading-indicator, pro ostatní stavy je možné použít span.icon.icon-[název].
Pro různé typy inputů používejte různé type atributy (např. type="email" pro emailový input apod.). Jeden z důvodů proč: na touch zařízeních se pak zobrazí správná klávesnice a usnadníte tím použitelnost vašich stránek.
Každý input má svůj holder inp-fix, kvůli pozdějšímu použití ikonek, pozicování buttonů apod. Každý input / textarea má classu inp-text, od které se vše styluje.
Pro zvýraznění povinného políčka slouží span require, který se umísťuje do elementu label a má dvě možnosti použití viz. příklad.