01 Typografie
Zdrojové CSS: /src/css/_typography.scss
Nadpisy
Nadpis 1
Nadpis 2
Nadpis 3
Nadpis 4
Nadpis 5
Nadpis 6
Seznamy
Odrážkový seznam
Klasický odrážkový seznam.
- Jablko
-
Hruška
- Odroda 1 lorem ipsum dolor sit amet conectetuer
-
Odroda 2
- Výrobky
-
Skladovanie
- Správné
- Nesprávné lorem ipsum
- Odkaz
- Pomaranč lorem ipsum dolor sit amet consectetuer
Číselný seznam
Klasický číselný seznam.
- Jablko
-
Hruška
- Odroda 1 lorem ipsum dolor sit amet conectetuer
-
Odroda 2
- Výrobky
-
Skladovanie
- Správné
- Nesprávné lorem ipsum
- Odkaz
- Pomaranč lorem ipsum dolor sit amet consectetuer
- Správné
- Nesprávné lorem ipsum
- Správné
- Nesprávné lorem ipsum
- Správné
- Nesprávné lorem ipsum
- Správné
- Nesprávné lorem ipsum
- Správné
- Nesprávné lorem ipsum
- Odroda 1 lorem ipsum dolor sit amet conectetuer
-
Odroda 2
- Výrobky
-
Skladovanie
- Správné
- Nesprávné lorem ipsum
- Odroda 1 lorem ipsum dolor sit amet conectetuer
-
Odroda 2
- Výrobky
-
Skladovanie
- Správné
- Nesprávné lorem ipsum
- Další
Ikonkový seznam
Speciální seznam s ikonkami. Využívá atomy ikonek.
- Jablko
- Hruška
- Jablko
- Hruška
- Odroda 1 lorem ipsum dolor sit amet conectetuer
- Odroda 2
- Pomaranč lorem ipsum dolor sit amet consectetuer
Tabulky
Doplňkové CSS: /src/css/atoms/_order-icons.scss
Doplňkové JS: /src/js/components/tr-clickable.coffee
Defaultní tabulka
Standardní tabulka s thead, tbody a tfoot. Zarovnání uvnitř buňky se řeší pomocí class z SK mini frameworku (horizontálně center, left, right a vertikálně top, bottom, middle). Defaultní zarovnání buněk je top.
V thead je použit atoms .order-icons, který slouží k řazení položek. Přidáním classy is-active na icon-caret-* se zaktivní položka.
Přidáním classy .tr-clickable se řádek tabulky udělá klikatelný. Pokud je více odkazů na řádku, tak bude řádek odkazovat na první nalezený odkaz - nedoporučuji vkládat více odkazů na řádek.
V případě rowspan na buňce v prvním sloupci je potřeba prvním buňkám v následujících řádcích postiženým rowspanem nastavit třídu .spanned-col, aby se opravilo odsazení zleva.
| Nadpis sloupce | Nadpis sloupce | Odkaz | Odkaz | Nadpis sloupce |
|---|---|---|---|---|
| Hodnota | Hodnota | Hodnota | Hodnota | Hodnota |
| Hodnota 2 | Hodnota 2 | Hodnota 2 | Hodnota 2 | Hodnota 2 |
| Hodnota 3 | Hodnota 3 | Hodnota 3 | Hodnota 3 | Hodnota 3 |
| Hodnota 4 | Odkaz | Hodnota 4 | Hodnota 4 | Hodnota 4 |
| Hodnota 5 | Hodnota 5 | Hodnota 5 | Hodnota 5 | Hodnota 5 |
| Klikatelný řádek | Hodnota 6 | Hodnota 6 | Hodnota 6 | Hodnota 6 |
| Hodnota 6-7 | Hodnota 6 | Hodnota 6 | Hodnota 6 | Hodnota 6 |
| Hodnota 7 .spanned-col | Hodnota 7 | Hodnota 7 | Hodnota 7 | |
| Hodnota 8 | Hodnota 8 | Hodnota 8 | Hodnota 8 | Hodnota 8 |
| Spolu: | Výsledek | Výsledek | Výsledek | Výsledek |
Tabulka s horizontálním scrollbarem
TO DO
| Nadpis sloupce | Nadpis sloupce | Odkaz | Odkaz | Nadpis sloupce |
|---|---|---|---|---|
| Hodnota | Hodnota | Hodnota | Hodnota | Hodnota |
| Hodnota 2 | Hodnota 2 | Hodnota 2 | Hodnota 2 | Hodnota 2 |
| Hodnota 3 | Hodnota 3 | Hodnota 3 | Hodnota 3 | Hodnota 3 |
| Hodnota 4 | Odkaz | Hodnota 4 | Hodnota 4 | Hodnota 4 |
| Hodnota 5 | Hodnota 5 | Hodnota 5 | Hodnota 5 | Hodnota 5 |
| Klikatelný řádek | Hodnota 6 | Hodnota 6 | Hodnota 6 | Hodnota 6 |
| Hodnota 7 | Hodnota 7 | Hodnota 7 | Hodnota 7 | Hodnota 7 |
| Spolu: | Výsledek | Výsledek | Výsledek | Výsledek |
Tabulka s velkými řádky
Přidáním classy .table-big vyrobíme tabulku s velkými řádky.
| Nadpis sloupce | Nadpis sloupce | Odkaz | Odkaz | Nadpis sloupce |
|---|---|---|---|---|
| Hodnota | Hodnota | Hodnota | Hodnota | Hodnota |
| Hodnota 2 | Hodnota 2 | Hodnota 2 | Hodnota 2 | Hodnota 2 |
| Hodnota 3 | Hodnota 3 | Hodnota 3 | Hodnota 3 | Hodnota 3 |
| Hodnota 4 | Odkaz | Hodnota 4 | Hodnota 4 | Hodnota 4 |
| Hodnota 5 | Hodnota 5 | Hodnota 5 | Hodnota 5 | Hodnota 5 |
| Klikatelný řádek | Hodnota 6 | Hodnota 6 | Hodnota 6 | Hodnota 6 |
| Hodnota 7 | Hodnota 7 | Hodnota 7 | Hodnota 7 | Hodnota 7 |
| Spolu: | Výsledek | Výsledek | Výsledek | Výsledek |
Tabulka s ohraničením
Atom vycházející z defaultního atomu tabulky. Atom je navíc obalen do div.table-wrap. Ostatní vlastnosti jsou stejné.
| Nadpis sloupce | Nadpis sloupce | Odkaz | Odkaz | Nadpis sloupce |
|---|---|---|---|---|
| Hodnota | Hodnota | Hodnota | Hodnota | Hodnota |
| Hodnota 2 | Hodnota 2 | Hodnota 2 | Hodnota 2 | Hodnota 2 |
| Hodnota 3 | Hodnota 3 | Hodnota 3 | Hodnota 3 | Hodnota 3 |
| Hodnota 4 | Odkaz | Hodnota 4 | Hodnota 4 | Hodnota 4 |
| Hodnota 5 | Hodnota 5 | Hodnota 5 | Hodnota 5 | Hodnota 5 |
| Klikatelný řádek | Hodnota 6 | Hodnota 6 | Hodnota 6 | Hodnota 6 |
| Hodnota 7 | Hodnota 7 | Hodnota 7 | Hodnota 7 | Hodnota 7 |
| Spolu: | Výsledek | Výsledek | Výsledek | Výsledek |
Tabulky odsazené
Atom vycházející z defaultního atomu tabulky. Přidáním classy table-padded na element table se odsadí první a poslední buňka řádku zleva a zprava. Ostatní vlastnosti jsou stejné.
| Nadpis sloupce | Nadpis sloupce | Odkaz | Odkaz | Nadpis sloupce |
|---|---|---|---|---|
| Hodnota | Hodnota | Hodnota | Hodnota | Hodnota |
| Klikatelný řádek | Hodnota 2 | Hodnota 2 | Hodnota 2 | Hodnota 2 |
| Spolu: | Výsledek | Výsledek | Výsledek | Výsledek |
| Nadpis sloupce | Nadpis sloupce | Odkaz | Odkaz | Nadpis sloupce |
|---|---|---|---|---|
| Hodnota | Hodnota | Hodnota | Hodnota | Hodnota |
| Hodnota 2 | Hodnota 2 | Hodnota 2 | Hodnota 2 | Hodnota 2 |
| Spolu: | Výsledek | Výsledek | Výsledek | Výsledek |
Tabulky s pozadím
V případě tmavě šedého pozadí je výchozí barva linek stejná jako barva pozadí, tabulka si linky sama přebarví.
U tmavého pozadí je potřeba na tabulku přidat třídu .white a na klikací řádky .tr-clickable-transparent.
| Nadpis sloupce | Nadpis sloupce | Odkaz | Odkaz | Nadpis sloupce |
|---|---|---|---|---|
| Hodnota | Hodnota | Hodnota | Hodnota | Hodnota |
| Klikatelný řádek | Hodnota 2 | Hodnota 2 | Hodnota 2 | Hodnota 2 |
| Spolu: | Výsledek | Výsledek | Výsledek | Výsledek |
| Nadpis sloupce | Nadpis sloupce | Odkaz | Odkaz | Nadpis sloupce |
|---|---|---|---|---|
| Hodnota | Hodnota | Hodnota | Hodnota | Hodnota |
| Klikatelný řádek | Hodnota 2 | Hodnota 2 | Hodnota 2 | Hodnota 2 |
| Spolu: | Výsledek | Výsledek | Výsledek | Výsledek |
Tabulky zahuštěné
Atom vycházející z defaultního atomu tabulky. Třída pro table je .table-condensed. Ostatní vlastnosti jsou stejné.
Úřední hodiny
| Pondělí | 9:00 – 12:00 | 13:00 – 17:00 |
|---|---|---|
| Úterý | 9:00 – 12:00 | 13:00 – 17:00 |
| Středa | 9:00 – 12:00 | |
| Čtvrtek | 10:00 – 12:00 | 13:00 – 17:00 |
| Pátek | 9:00 – 13:00 |
Ukázka typografie
Obecné styly - typografie
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ab debitis possimus, similique tempore voluptate minus amet esse nobis dolorum aperiam quasi quaerat porro rem omnis labore laborum officia, ex.
Nadpis h2
Suspendisse odkaz v textu vel nisi accumsan pretium. Etiam id massa ut neque iaculis auctor. Fermentum eu dictum risus consequat. Cras magna justo, iaculis non scelerisque eget, condimentum in tellus. Maecenas a sem quam. Suspendisse facilisis neque tempor enim imperdiet sodales. Vitae lobortis sapien vestibulum. Suspendisse vehicula libero vel nisi accumsan. Suspendisse vehicula libero vel nisi accumsan pretium. Etiam id massa ut neque iaculis auctor. Fermentum eu dictum risus consequat. Cras magna justo, iaculis non scelerisque eget, condimentum in tellus. Maecenas a sem quam. Suspendisse.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assuiber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Nadpis h3
Suspendisse odkaz v textu vel nisi accumsan pretium. Etiam id massa ut neque iaculis auctor. Fermentum eu dictum risus consequat. Cras magna justo, iaculis non scelerisque eget, condimentum in tellus. Maecenas a sem quam. Suspendisse facilisis neque tempor enim imperdiet sodales. Vitae lobortis sapien vestibulum. Suspendisse vehicula libero vel nisi accumsan. Suspendisse vehicula libero vel nisi accumsan pretium. Etiam id massa ut neque iaculis auctor. Fermentum eu dictum risus consequat. Cras magna justo, iaculis non scelerisque eget, condimentum in tellus. Maecenas a sem quam. Suspendisse.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assuiber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Bloková citace - Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta
Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Nadpis 4 úrovně
- Číslovaný seznam
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
- tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, uis nostrud exercitation ullamco laboris nisi ut iquip x 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.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
- Definiční seznam
- Hodnota definice
- Definiční seznam
- Hodnota definice
- Definiční seznam
- Hodnota definice
Nadpis 5 úrovně
Ext. odkazNadpis 6 úrovně
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Velikosti textů
Velikost textu se mění classami z SK mini frameworku (big, small).
Velký text - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime corporis dolorum pariatur quisquam dolorem praesentium, ipsum nemo excepturi cum hic voluptas doloribus blanditiis iure cupiditate dolores in vel sunt. Necessitatibus!
Normální - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime corporis dolorum pariatur quisquam dolorem praesentium, ipsum nemo excepturi cum hic voluptas doloribus blanditiis iure cupiditate dolores in vel sunt. Necessitatibus!
Malý text - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime corporis dolorum pariatur quisquam dolorem praesentium, ipsum nemo excepturi cum hic voluptas doloribus blanditiis iure cupiditate dolores in vel sunt. Necessitatibus!
Ukázka typografie v gridu
Velikost textu se mění classami z SK mini frameworku (big, small). Umístění do sloupců je obsluhováno atomem gridu.
Nadpis H1
Phasellus ultrices adipiscing turpis. Fusce dignissim neque vitae justo. Morbi lacinia sagittis mauris. Sed fermentum pellentesque nisi. Duis interdum nisi at ligula.
Nadpis H2
Phasellus ultrices adipiscing turpis. Fusce dignissim neque vitae justo. Morbi lacinia sagittis mauris. Sed fermentum pellentesque nisi. Duis interdum nisi at ligula.
Nadpis H3
Phasellus ultrices adipiscing turpis. Fusce dignissim neque vitae justo. Morbi lacinia sagittis mauris. Sed fermentum pellentesque nisi. Duis interdum nisi at ligula.
Nadpis H4
Phasellus ultrices adipiscing turpis. Fusce dignissim neque vitae justo. Morbi lacinia sagittis mauris. Sed fermentum pellentesque nisi. Duis interdum nisi at ligula.
Nadpis H5
Phasellus ultrices adipiscing turpis. Fusce dignissim neque vitae justo. Morbi lacinia sagittis mauris. Sed fermentum pellentesque nisi. Duis interdum nisi at ligula.
Nadpis H6
Phasellus ultrices adipiscing turpis. Fusce dignissim neque vitae justo. Morbi lacinia sagittis mauris. Sed fermentum pellentesque nisi. Duis interdum nisi at ligula.
Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien sagittis a eleifend sed tristique.
Cras quis neque at lectus tincidunt consectetuer. Proin volutpat, nisl ut tincidunt condimentum, neque justo tempus augue, id viverra lectus sem sed urna. Suspendisse potenti. Pellentesque lobortis rutrum purus.Pellentesque dictum augue. Aliquam sapien. Nulla condimentum sollicitudin lacus. Nullam et diam non dui consequat pulvinar. Fusce velit orci, aliquet et, condimentum sit amet, dapibus eget, odio. Etiam tempus, lectus vel posuere congue, nunc quam varius lectus, at rutrum diam sem sed turpis.
In hendrerit justo non nisl. Donec convallis elementum leo. Vivamus tortor. In vehicula elementum ligula. Mauris egestas interdum libero. Sed non metus. Phasellus commodo. Cras tempus dolor nec magna accumsan tempus. Cras elit massa, consectetuer quis, consequat aliquet, ullamcorper in, massa. Maecenas velit velit, posuere id, tempus sit amet, scelerisque eu, tortor.
Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien.
Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien.
In hac habitasse platea dictumst. In id dui. Curabitur sodales semper arcu. Quisque posuere suscipit massa. Maecenas vehicula magna quis pede. Phasellus aliquet lacus eget nulla. Aliquam erat volutpat. Integer tristique vestibulum erat. Curabitur tempor tempor mi. Praesent metus.
In hendrerit justo non nisl. Donec convallis elementum leo. Vivamus tortor. In vehicula elementum ligula. Mauris egestas interdum libero. Sed non metus. Phasellus commodo. Cras tempus dolor nec magna accumsan tempus.
In hendrerit justo non nisl. Donec convallis elementum leo. Vivamus tortor. In vehicula elementum ligula. Mauris egestas interdum libero. Sed non metus. Phasellus commodo. Cras tempus dolor nec magna accumsan tempus.
In hendrerit justo non nisl. Donec convallis elementum leo. Vivamus tortor. In vehicula elementum ligula. Mauris egestas interdum libero. Sed non metus. Phasellus commodo. Cras tempus dolor nec magna accumsan tempus.
In hendrerit justo non nisl. Donec convallis elementum leo. Vivamus tortor. In vehicula elementum ligula. Mauris egestas interdum libero. Sed non metus. Phasellus commodo. Cras tempus dolor nec magna accumsan tempus.
Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium.
Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium.
Typografie pro zákony
Text umístěný v div.act se chová jinak pro elementy ol, li, h2 a h3. Vypíše je tak, aby vypadaly jako části, odstavce a písmena zákona.
Článek 7
Předsednictvo
-
Předsednictvo je šestičlenné; jeho členy jsou:
- předseda,
- místopředseda pro oblast vzdělávání,
- místopředseda pro oblast tvůrčích činností,
- místopředseda pro záležitosti ekonomické a sociální,
- místopředseda pro vnější záležitosti,
- místopředseda pro záležitosti legislativní a organizační.
- V Předsednictvu musí být zastoupen nejméně jeden člen z každé Komory.
-
Předsednictvo ČKR ve smyslu zákona č. 111/1998 Sb., o vysokých školách, je výkonným orgánem reprezentace vysokých škol ČR, zastupujícím ČKR ve všech jednáních ve smyslu čl. 2 Statutu ČKR.
Předsednictvo ČKR:
- řeší aktuální problematiku ve všech oblastech působnosti ČKR,
- jedná jménem ČKR a jejích Komor v neodkladných záležitostech v době mezi zasedáními Pléna,
- schází se na svých zasedáních nejméně dvakrát za semestr; zápisy ze zasedání Předsednictva rozesílá Kancelář ČKR všem členům ČKR,
- zajišťuje zastupování předsedy svými členy.
- Předsednictvo je usnášeníschopné, zúčastní-li se jeho zasedání více než polovina jeho členů. Přijato je usnesení, pro které hlasuje nadpoloviční většina přítomných členů; při rovnosti hlasů rozhoduje hlas předsedy.
- Místopředsedové jsou voleni z členů ČKR na dvouleté funkční období začínající 1. srpnem a končící 31. červencem. Volba se koná v květnu nebo v červnu. Způsob volby upraví volební řád přijatý Plénem.
- V případě, že se uvolní místo předsedy nebo místopředsedů, koná se doplňující volba na zbytek funkčního období.
- K uvolnění funkce předsedy ČKR, resp. místopředsedů ČKR může dojít na základě odvolání Plénem ČKR nebo vzdáním se funkce formou písemného vyjádření.
Článek 8
Předseda
-
Předseda ČKR zastupuje ČKR navenek. Předseda zejména:
- jedná jménem ČKR v neodkladných záležitostech v době mezi zasedáními Pléna a Předsednictva,
- odpovídá za činnost ČKR mezi zasedáními Pléna,
- podává Plénu zprávy o činnosti Předsednictva a o své činnosti,
- svolává Výroční shromáždění, zasedání Pléna a Předsednictva a odpovídá za plnění jejich usnesení.
- Předseda je volen z členů ČKR na dvouleté funkční období začínající 1. srpnem a končící 31. červencem.
- Volba předsedy se koná v květnu nebo v červnu. Způsob volby upraví volební řád přijatý Plénem.
Pro nadpisy používejte adekvátní elementy h1-h6 ideálně ve správném zanoření (tz. pod nadpisem h2 by se měly na podúrovni objevit nadpisy h3 nikoliv h4 či h5 apod. - nadpisy fungují stejně jako zanořené seznamy). Pokud pro nadpisy chcete použít menší velikost, pak stačí přidat class .h1, .h2, .h3, .h4, .h5 nebo .h6.