Hero Box Image

Manuál komponent jednotného vizuálního stylu MU

Přehled značek

Viz také další fakultně specifické značky.

Použití komponentů a rozšíření

Komponenty fakultní nadstavby jsou HTML značky začínající fi-, kterých cílem je zjednodušit zápis složitějších struktur z oficiálního katalogu. Poskytujeme však zkratky pouze pro komponenty, u kterých se očekává časté použití ve fakultní Wiki.

Nadstavbu lze proto kombinovat s dalšími komponenty JVS. Navíc lze komponenty, které reprezentují text, upravit pomocí atributu class. Oficiální katalog poskytuje několik základních tříd, kterými lze upravit vlastnosti nejenom čistého textu, ale třeba i nadpisu v Hero Box.

Obal obsahu

fi-row ( dokumentace JVS)
Tato komponenta je jednou z nejdůležitějších, protože tvaruje obsah stránky. Není přímo viditelná, ale omezuje šířku textu nebo jiného grafického obsahu přidáním okrajů z obou stran.

Nepovinné atributy

box-content
Omezí šířku na dvě třetiny původní hodnoty.

Výchozí hodnota atributu box-content závisí od obsahu. Pokud obsah tvoří pouze textové uzly (tj. čistý text, nebo značky strong, em atd)., pak se box-content automaticky zapne, jinak se neuplatní.

Příklady

První příklad je pouze obyčejný odstavec pro porovnání.

<p>text...</p>

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 

<fi-row><p>text...</p></fi-row>

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Pozor, tento příklad slouží pouze pro ilustraci obecného případu, pokud by se v odstavci vyskytovali i netextové značky (např. img). Pro čistý text se automaticky zapne box-content. 
<fi-row box-content><p>text...</p></fi-row>

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Tip: pro bloky textu můžete taky použít justified 

<fi-row box-content><p class="justified">text...</p></fi-row>

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Grid

fi-grid, fi-cell ( dokumentace JVS)
Komponenta fi-grid umožňuje rozdělit obsah na více "buněk" (fi-cell). Celá šířka stránky je rozdělena na 12 sloupců. Každá buňka pak zabírá jeden nebo více sloupců, což lze nastavit atributem size. 

<fi-grid>
    <fi-cell size="6">buňka 1</fi-cell>
    <fi-cell size="4">buňka 2</fi-cell>
    <fi-cell size="2">buňka 3</fi-cell>
</fi-grid>

Nepovinné atributy pro fi-grid

default-size="(L,M,S,XS|N|default|twocols)"
Výchozí velikost buněk. Zadává se jako čtyři čísla 1 až 12 oddělená čárkou (,). Tato čísla postupně reprezentují velikost buňky na počítači (L), tabletu (M), mobilu na výšku (S) a mobilu na šířku (XS). Lze zadat i jen jedno číslo, N, které se pak použije pro všechny čtyři zmíněné šířky/typy zobrazení.
Hodnota default reprezentuje 3,6,12,6, twocols znamená 6,6,12,6.
Buňky fi-cell můžou tuto hodnotu překrýt vlastní hodnotou atributu size.

Nepovinné atributy pro fi-cell

size="(L,M,S,XS|N|default|twocols)"
Vlastní velikost buňky. Pokud rodičovský element fi-grid nemá atribut default-size, pak je zde atribut size povinný. Ostatní hodnoty (default, twocols, ...) mají stejný význam jako u default-size.
size="12"
size="6"
size="4"
size="2"
A
B
C
D
E
F
G
H
I
J
K
L

Automatické sloupce

fi-cols, fi-cols-sep
fi-cols rozdělí obsah uvnitř na sloupce, přičemž oddělovačem do sloupců je značka fi-cols-sep. Šířka sloupců se určí automaticky. Pokud chcete sloupce různých šířek, použijte grid (fi-grid).

Sloupce jsou implementovány jako buňky gridu, proto je možné vytvořit pouze 1, 2, 3, 4 nebo 6 sloupců.

Příklady

<fi-cols>
    jeden sloupec
</fi-cols>
jeden sloupec
<fi-cols>
    první sloupec
    <fi-cols-sep></fi-cols-sep>
    druhý sloupec
</fi-cols>
první sloupec
druhý sloupec
<fi-cols>
    první sloupec
    <fi-cols-sep></fi-cols-sep>
    druhý sloupec
    <fi-cols-sep></fi-cols-sep>
    třetí sloupec
</fi-cols>
první sloupec
druhý sloupec
třetí sloupec

Hero box

fi-hero, fi-hero-img ( dokumentace JVS)
Vytvoří velký nadpis s odkazem, pozadím, orámováním nebo obrázkem. Pro vložení obrázku na okraj použijte komponent fi-hero-img se stejnými atributy, jako má standardní img. Pro vložení obrázku na pozadí celého komponentu použijte atribut bg.

Nepovinné atributy

href="ADRESA"
Nadpis bude mít odkaz na zadanou adresu.
bordered
Kolem nadpisu se vytvoří okraj.
bg="(fi|muni|URL)"
Nastaví barvu pozadí, fi pro fakultní a muni pro univerzitní. Hodnotou může být i URL obrázku, který se použije jako pozadí.
bg-gradient
V kombinaci s bg="URL" překryje obrázek gradientem pro lepší čitelnost.
particles="(fi|muni)"
Zobrazí částice, fi pro jedničky a nuly, muni pro draky v barvách univerzity a jednotlivých fakult.

Tuto komponentu nepoužívejte uvnitř fi-row!

Není doporučeno kombinovat atribut bg s hodnotou typu URL a fi-hero-img.

Rozšiřující třídy ze standardní stavebnice JVS lze zadat v atributu class, viz dokumentaci stavebnice JVS.

Nastavení nadpisu

Pro pohodlnost se prvnímu nadpisu v obsahu fi-hero přidá třída box-hero__title automaticky.

Navíc se třída light pro nadpis automaticky přepíše na box-hero__title--light.

Příklady

<fi-hero>
    <h2>Základní nadpis</h2>
</fi-hero>

<fi-hero bordered="1">
    <h2>Nadpis s okrajem</h2>
</fi-hero>

<fi-hero href="https://www.fi.muni.cz/">
    <h2>Nadpis s odkazem</h2>
</fi-hero>

Základní nadpis

Nadpis s okrajem

Nadpis s odkazem

 
<fi-hero bg="fi">
    <h2>Nadpis s fakultním pozadím</h2>
</fi-hero>

<fi-hero bg="muni">
    <h2>Nadpis s univerzitním pozadím</h2>
</fi-hero>

<fi-hero>
    <h2>Nadpis s obrázkem</h2>
    <fi-hero-img alt="obrázek nadpisu"
        src="https://fadmin.fi.muni.cz/noauth/gallery_data/fi_udalosti/01300172.004.cust.jpg"></fi-hero-img>
</fi-hero>

<fi-hero bg="https://fadmin.fi.muni.cz/noauth/gallery_data/fi_udalosti/01300260.005.cust.jpg">
    <h2>Nadpis s obrázkem v pozadí</h2>
</fi-hero>

<fi-hero bg="https://fadmin.fi.muni.cz/noauth/gallery_data/fi_udalosti/01300260.005.cust.jpg"
        bg-gradient>
    <h2>Nadpis s obrázkem v pozadí a gradientem</h2>
</fi-hero>

Nadpis s fakultním pozadím

Nadpis s univerzitním pozadím

obrázek nadpisu

Nadpis s obrázkem

Nadpis s obrázkem v pozadí

Nadpis s obrázkem v pozadí a gradientem

<fi-hero particles="fi">
    <h2>Nadpis s fakultními částicemi</h2>
</fi-hero>

<fi-hero particles="muni">
    <h2>Nadpis s univerzitními částicemi</h2>
</fi-hero>

Nadpis s fakultními částicemi

Nadpis s univerzitními částicemi

<fi-hero class="box-hero--size-m">
    <h2 class="light">Nadpis s vlastní třídou pro změnu výšky</h2>
    <p>Navíc s třídou pro jiný typ nadpisu.</p>
</fi-hero>

Nadpis s vlastní třídou pro změnu výšky

Navíc s třídou pro jiný typ nadpisu.

Tlačítka

fi-buttons, fi-button ( dokumentace JVS)
První komponenta vytvoří obal pro tlačítka, do kterého lze pak tlačítka vkládat. Obal je důležitý pro více tlačítek při sobě, aby nebyly příliš blízko sebe.

Povinné atributy pro fi-button

href="ADRESA"
Odkaz tlačítka.
title="POPIS"
Text v popisu tlačítka.

Nepovinné atributy pro fi-button

small
Menší tlačítko.
bordered
Tlačítko s barevným okrajem místo pozadí.
bg="(fi|muni)"
Barva tlačítka, fi pro fakultní (výchozí), muni pro univerzitní.

Příklady

<fi-buttons>
    <fi-button title="Domů" href="/"></fi-button>
    <fi-button title="Domů" href="/" bg="muni"></fi-button>
    <fi-button title="Domů" href="/" bordered></fi-button>
    <fi-button title="Domů" href="/" bg="muni" bordered></fi-button>
</fi-buttons>

Domů Domů Domů Domů

To samé co výše a navíc atribut small:

Domů Domů Domů Domů

Zdrojový kód

fi-code ( dokumentace JVS)
Vloží do dokumentu barevně zvýrazněný zdrojový kód. Používá zvýrazňovač highlight.js. Pokud je zadaný atribut commented, pak se očekává obsah značky v komentáři.

Nepovinné atributy

commented
Umožňuje jednodušší zápis kódu obsahujícího více znaků se speciálním významem v HTML (např. < nebo >). Očekává se, že obsah bude obalen HTML komentářem (<!-- ... -->), ve kterém je pak možné přímo psát třeba < místo &lt;.
syntax="LANGUAGE"
Nastaví zvýrazňování na zadaný jazyk. Pokud není zadaný, zvýrazňovač se pokusí jazyk heuristicky uhodnout sám.

Příklady

Jednoduchá ukázka kódu
<fi-code>
    # limit available resources
    help ulimit
    # cap the size of virtual memory to 20000 kB
    ulimit -v 20000
</fi-code>
# limit available resources
help ulimit
# cap the size of virtual memory to 20000 kB
ulimit -v 20000
Ukázka kódu v komentáři s nastavením jazyka na HTML
<fi-code commented syntax="html"><​!--
    <fi-element attribute="value">
        inner contents
    </fi-element>
--​></fi-code>
<fi-element attribute="value">
    inner contents
</fi-element>

Časová osa

fi-timeline, fi-timeline-item ( dokumentace JVS)
Vytvoří časovou osu, kde jednotlivé položky osy jsou popsané značkou fi-timeline-item.

Atributy pro fi-timeline

type="(default|center|boxes)"
Typ časové osy, viz příklady. Pokud není zadaný, použije se default

Povinné atributy pro fi-timeline-item

title="POPIS"
Krátký popis bodu časové osy.

Nepovinné atributy pro fi-timeline-item

bg
Bod osy zvýrazní fakultním pozadím.
end
Indikuje poslední bod osy.
date="TEXT"
Datum.
href="ADRESA"
Bod bude odkazovat na zadanou adresu, v popisu se však nesmí vyskytovat jiný odkaz.

Příklady

Výchozí typ (type="default" nebo nic)
<fi-timeline>
    <fi-timeline-item title="První bod"></fi-timeline-item>
    <fi-timeline-item title="Nějaký důležitý bod" date="19. ledna 2038"></fi-timeline-item>
    <fi-timeline-item title="Bod s odkazem" href="https://www.fi.muni.cz"></fi-timeline-item>
    <fi-timeline-item title="Poslední bod" end></fi-timeline-item>
</fi-timeline>
  • První bod
  • Nějaký důležitý bod19. ledna 2038
  • Bod s odkazem
  • Poslední bod
Zarovnání na střed (type="center")
<fi-timeline type="center">
    <fi-timeline-item title="První bod"></fi-timeline-item>
    <fi-timeline-item title="Nějaký důležitý bod" date="19. ledna 2038"></fi-timeline-item>
    <fi-timeline-item title="Bod s odkazem" href="https://www.fi.muni.cz"></fi-timeline-item>
    <fi-timeline-item title="Poslední bod" end></fi-timeline-item>
</fi-timeline>
  • První bod
  • Nějaký důležitý bod19. ledna 2038
  • Bod s odkazem
  • Poslední bod
Obdelníkový typ (type="boxes")
<fi-timeline type="boxes">
    <fi-timeline-item title="Začátek">
        Popis začátku.
    </fi-timeline-item>
    <fi-timeline-item title="Nějaký důležitý bod" date="19. ledna 2038"></fi-timeline-item>
    <fi-timeline-item title="Bod s odkazem" href="https://www.fi.muni.cz"></fi-timeline-item>
    <fi-timeline-item title="Jiný důležitý bod" bg></fi-timeline-item>
    <fi-timeline-item title="Konec" end></fi-timeline-item>
</fi-timeline>

  • Začátek

    Popis začátku.

  • 19. ledna 2038

    Nějaký důležitý bod

  • Bod s odkazem

  • Jiný důležitý bod

  • Konec