01 Typografie

Zdrojové CSS: /src/css/_typography.scss

Nadpisy

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.

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.

  1. Jablko
  2. Hruška
    1. Odroda 1 lorem ipsum dolor sit amet conectetuer
    2. Odroda 2
      1. Výrobky
      2. Skladovanie
        1. Správné
        2. Nesprávné lorem ipsum
  3. Odkaz
  4. Pomaranč lorem ipsum dolor sit amet consectetuer

Ikonkový seznam

Speciální seznam s ikonkami. Využívá atomy ikonek.

  • 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.

Nadpis sloupce Nadpis sloupce Sestupně Vzestupně Odkaz Odkaz Nadpis sloupce Sestupně Vzestupně
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 Sestupně Vzestupně Odkaz Odkaz Nadpis sloupce Sestupně Vzestupně
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
Hodnota 6 Hodnota 6 Hodnota 6 Hodnota 6 Tlačítko
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 Sestupně Vzestupně Odkaz Odkaz Nadpis sloupce Sestupně Vzestupně
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 Sestupně Vzestupně Odkaz Odkaz Nadpis sloupce Sestupně Vzestupně
Hodnota Hodnota Hodnota Hodnota Hodnota
Hodnota 2 Hodnota 2 Hodnota 2 Hodnota 2 Hodnota 2
Spolu: Výsledek Výsledek Výsledek Výsledek

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ě

  1. Číslovaný seznam
  2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  3. 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
  4. 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. odkaz
Nadpis 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.