OpenLab CSS

CSS softvérový rámec pre informačné obrazovky prispôsobený pre displeje v OpenLab na Technickej Univerzite v Košiciach.

Cieľom OpenLab CSS je priniesť jednotný štýl HTML elementov použivaných v OpenLab s tým, že rámec sa postará, aby sa elementy zobrazili v správnej veľkosti nehľadiac na panel, na ktorom je obsah práve zobrazený

Pridajte si náš stylesheet do projektu alebo si pozrite SCSS zdrojové súbory na školskom Gitlabe.

Openlab CSS na Gitlabe

Nižšie nájdete dokumentáciu.

HTML Štartér

Snippet prinašajúci náš CSS a JS súbor do vášho projektu pre OpenLab.

  1. Najprv normalizujeme nastavenia tvojho prehliadača
  2. Potom sa spojíme s Google Fonts, kvôli typografii
  3. Nakoniec pridáme náš OpenLab CSS

JS skript sa stará o korektné nastavenie mierky HTML elementov podľa panelu, resp. podľa toho, akú mriežku na stránke použijete. Viac o mriežkach.


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>OpenLab CSS</title>

        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css"
        />

        <link rel="preconnect" href="https://fonts.gstatic.com" />
        <link
            href="https://unpkg.com/openlab-css/dist/css/style.min.css"
            rel="stylesheet"
            type="text/css"
        />
        <script src="https://unpkg.com/openlab-css/dist/js/main.js"></script>
    </head>
    <body></body>
</html>
                

Koncepty OpenLab CSS

OpenLab CSS umožňuje ako rýchlo vyvíjať informačné obrazovky pre OpenLab. Stačí pochopiť zopár konceptov.

Panel je jedna stránka.

Na paneloch 3x3 alebo 3x3 je vždy zobrazená jedná webová stránka. Pripravili sme grids, ktoré vám pomôžu s umiestnením informačných obrazoviek do displejov.

Každá informačná obrazovka má u nás predpísaný dizajn pomocou hierarchie.

V rámci displeja centrujeme obsah informačnej obrazovky pomocou container. Do kontajnera vkladáme box s naším dizajnom. A do boxu už ide váš obsah informačnej obrazovky.

Každá informačná obrazovka má svoj názov.

Prvá vec v boxe je názov obrazovky, ktorý voláme topic

Pozor na pretekanie obsahu.

Kreativite sa medze nekladú, ale pri vkladaní obsahu do boxu musíte brať ohľad na veĺkosť displeja a elementov. HTML elementy sú zväčšené, aby boli na displejoch dobré čitateľné. Pozrite si tipy pri vývoji.

OpenLab CSS má vlastnú typografiu.

Dali sme si záležať, aby sme s typografiou pokryli čo najviac prípadov použitia. Nadpisy, podnadpisy, popisy, sekundárna farba, monospace... We have it all. Pre informačné obrazovky s veľkým množstvom obsahu existuje ku každej verzii typografie aj jej menší variant small.

OpenLab CSS má vlastný spacing.

Ak potrebujete elementu pridať viac priestoru, ktorý by sa automaticky nastavoval podľa veľkosti panela, máme to. Pozri dokumentáciu ku spacing.

Používame BEM naming convention.

OpenLab CSS je založené na BEM naming convention. Block, element, modifier. Všetko, čo o tom potrebujete vedieť si môžete prečítať tu.

That's it! Overwhelmed?

Ukážky v živej veľkosti

Pozrite si všetky element v živej veľkosti, v ktorej budú zobrezené na OpenLab displeji.

Ukážky HTML elementov

Pozrite si typografiu v živej veľkosti, ktorú OpenLab CSS ponúka.

Ukážka typografie

Tieto informačné obrazovky boli vytvorené použitím tohto CSS softvérové rámca.

Pozor! Tieto ukážky sú prispôsobené displejom v OpenLab, preto je nutné zobraziť ich na monitore s 4K rozlíšením. Odporúčania pre zobrazenie na monitoroch s menším rozlíením sú v sekcii Typy pri vývoji.

Hierarchia

Možno predchadzajúce koncepty vyzerali zložito, no ozaj je to jednoduché. Stačí dodržať predpísanú hierarchiu a môžete začať tvoriť svoju informačnú obrazovku. Aha:

Mriežka > kontajner > box > názov > obsah


<body>    
    <div class="grid grid--small">
        <div class="container">
            <div class="box box__layout box__glow">
                <p class="text text__topic">Oznam</p>
                <p class="text">
                    Moja nová informačná obrazovka.
                </p>
            </div>
        </div>
    </div>
</body>
                

S týmto kuskom kódu máte hotovú prvú informáčnú obrazovku, ktorú môžete zobraziť v OpenLab.


Oznam

Moja nová informačná obrazovka.

Tipy pri vývoji

HTML Elementy pre OpenLab sú veĺké a ak vyvíjame na monitore s rozlíšením menším ako 4K, nevidíme celý výsledok. Odporúčame preto vyvíjať vo Firefoxe, kde sa podmienky OpenLabu simulujú najlepšie. Otvorte si developerskú konzolu a zapnite device view, kde nastavte rozlíšenie 4K (3840x2160px). Ak sa vám daná obrazovka nezmestí na monitor, použíte lupe prehliadača a zmenšite ho. Celý čierna obrazovka potom predstavuje panel v OpenLab.

Poznámka

Hoci sú panely rôzne veľké, oba majú 4K rozlíšenie. OpenLab CSS nastaví HTML elementy podľa mierky zväčšenia.

Grids

Mriežky sú zodpovedné za rozmiestnenie informačných obrazoviek na paneli. Podľa panelu máme small a big variant. Okrem toho vieme mriežku zmenšiť a vytvoriť priestor pre hlavičku alebo aj pätičku.

Použitie

Mriežka grid by mala byť potomok elementu <body>. Zároveň je <body> holder mriežky, ktorý ju centruje v rámci stránky.


<body class="grid__holder">
    <div class="grid grid--small"></div>
</body>
                
Typ Popis CSS triedy
Small Mriežka pre panel 2x2
grid grid--small
Small with header Mriežka pre panel 2x2 s hlavičkou
grid grid--small
grid__header--small
Small with footer Mriežka pre panel 2x2 s pätičkou
grid grid--small
grid__footer--small
Small with header and footer Mriežka pre panel 2x2 s hlavičkou aj pätičkou
grid grid--small
grid__header_footer--small
Big Mriežka pre panel 3x3
grid grid--big
Big with header Mriežka pre panel 3x3 s hlavičkou
grid grid--big
grid__header--big
Big with footer Mriežka pre panel 3x3 s pätičkou
grid grid--big
grid__footer--big
Big with header and footer Mriežka pre panel 3x3 s hlavičkou aj pätičkou
grid grid--big
grid__header_footer--big
Grid holder Vycentruje mriežku do stredu stránky. Umiestňuje sa na rodičovský element, zväčša <body>
grid__holder

Container

Úlohou kontajnera je centrovať obsah informačných obrazoviek v rámci displeja.

Použitie


<div class="grid grid--big">
    <div class="container"></div>
</div>
                
Popis CSS triedy
Kontajner
container

Boxes

Úlohou boxu je vytvoriť priestor pre obsah informačnej obrazovky a zaobaliť ho do jednotného dizajnu.

Použitie


<div class="grid grid--big">
    <div class="container">
        <div class="box box__layout box__glow"></div>
    </div>
</div>
                
Typ Popis CSS triedy
Box Základný box
box
Box layout Vytvorí layout v boxe pre obsah a názov v informačnej obrazovke
box box__layout
Box glow Vytvorí modrý pruh naľavo, pričom toto správanie je odporúčané
box box__glow
Box iFrame Box sa roztiahne do maximálnych rozmerov a vytvorí priestor pre vloženie iFrame
box box__iframe
Box expand Box sa roztiahne do maximálnych rozmerov
box box__expand

Layout

Layout prináša možnosti Flexbox upraveného pre potreby OpenLab.

Pozor!

Zároveň sa obsah vkladá do flex boxov, pričom každý priamy potomok predstavuje takýto box, ak má byť v jednom flex boxe viacero elementov, treba ich zaobaliť, napr <div>.

Použitie


<div class="layout layout__row">
                
Typ Popis CSS triedy
Layout Zapne Flexbox
layout
Layout Row Vytvorí FLexbox v smere riadka a zarovná flex boxy do stredu
layout layout__row
Layout Column Vytvorí Flexbox v smere stĺpca. Niekedy potrebné, ak chceme zmenšiť niektorý z vložených flex boxov
layout layout__column
Layout Gap Medzi flex boxami vznikne medzera. Ak veľkosť medzery nevyhovuje, odporúčame použiť margin.
layout layout__gap
Same size item layout Ak chceme, aby flex boxy mali rovnakú veľkosť, napríklad rozdelit info. obrazovku na 2 polovice. Nie je potrebné uvádzať triedu layout. Trieda sa ukladá na flex boxy, teda potomkov elementu vytvárajúci layout
layout__item--same-size

Príklad na same size item layout


<div class="layout layout__row">
    <div class="layout__item--same-size">1 flex box</div>
    <div class="layout__item--same-size">2 flex box</div>
</div>
                

Spacing

OpenLab CSS má triedy pre margin a padding. Používame relatívne jednotky rem.


mh3 - margin horizontálny 3 rem
pv03 -  padding vertikálny 0,3 rem
m5 - margin všade 5 rem
mt1 - margin top 1 rem
pl2 - padding left 2 rem

Skladenie tried

Reťazenie tried

mvX/mhX prepisuje mtX/mrX/mbX/mlX, tieto prepisujú mX. Teda vertikálne/horizontálne smery prepisujú jednosmerné a jednosmerné prepisujú všetko. Rovnake je správanie pri padding.


m1 mt3 - výsledný margin všade 1 rem, hore 3 rem
p1 pt3 pv2 - výsledný padding vertikálne 2 rem, horizontálne 1 rem

Typografia

Nadpisy


<h1>Heading h1</h1>

Heading h1

<h2>Heading h2</h2>

Heading h2

<h3>Heading h3</h3>

Heading h3

<h4>Heading h4</h4>

Heading h4

<h5>Heading h5</h5>
Heading h5
<h6>Heading h6</h6>
Heading h6

Typy textov

Text


<p class="text">Text</p>

Text

<p class="text text--shade">Text shade</p>

Text shade

<p class="text text--bold">Text bold</p>

Text bold

<p class="text text--small">Text small</p>

Text small

Topic


<p class="text text__topic">Topic</p>

Topic

Title


<p class="text text__title">Title</p>

Title

<p class="text text__title text__title--shade">Title shade</p>

Title shade

<p class="text text__title text__title--bold">Title bold</p>

Title bold

<p class="text text__title text__title--small">Title small</p>

Title small

Subtitle


<p class="text text__subtitle">Subtitle</p>

Subtitle

<p class="text text__subtitle text__subtitle--shade">Subtitle shade</p>

Subtitle shade

<p class="text text__subtitle text__subtitle--bold">Subtitle bold</p>

Subtitle bold

<p class="text text__subtitle text__subtitle--small">Subtitle small</p>

Subtitle small

Overline


<p class="text text__overline">Overline</p>

Overline

<p class="text text__overline text__overline--shade">Overline shade</p>

Overline shade

<p class="text text__overline text__overline--bold">Overline bold</p>

Overline bold

<p class="text text__overline text__overline--small">Overline small</p>

Overline small

Caption


<p class="text text__caption">Caption</p>

Caption

<p class="text text__caption text__caption--shade">Caption shade</p>

Caption shade

<p class="text text__caption text__caption--bold">Caption bold</p>

Caption bold

<p class="text text__caption text__caption--small">Caption small</p>

Caption small

Tiny


<p class="text text__tiny">Tiny</p>

Tiny

Zarovnanie

Pomocné triedy

Tabuľky

Základná tabuľka


<table class="table">
    <thead>
        <tr>
            <th>Head 1</th>
            <th>Head 2</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Footer 1</th>
            <th>Footer 2</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Description 1</td>
            <td>Description 2</td>
        </tr>
        <tr>
            <td>Description 1</td>
            <td>Description 2</td>
        </tr>
    </tbody>
</table>

Head 1 Head 2
Footer 1 Footer 2
Description 1 Description 2
Description 1 Description 2

Tabuľka s veľkým spacing


<table class="table table--big-spacing">
    <thead>
        <tr>
            <th>Head 1</th>
            <th>Head 2</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Footer 1</th>
            <th>Footer 2</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Description 1</td>
            <td>Description 2</td>
        </tr>
        <tr>
            <td>Description 1</td>
            <td>Description 2</td>
        </tr>
    </tbody>
</table>

Head 1 Head 2
Footer 1 Footer 2
Description 1 Description 2
Description 1 Description 2

Tabuľka s malým spacing


<table class="table table--small-spacing">
    <thead>
        <tr>
            <th>Head 1</th>
            <th>Head 2</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Footer 1</th>
            <th>Footer 2</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Description 1</td>
            <td>Description 2</td>
        </tr>
        <tr>
            <td>Description 1</td>
            <td>Description 2</td>
        </tr>
    </tbody>
</table>

Head 1 Head 2
Footer 1 Footer 2
Description 1 Description 2
Description 1 Description 2

Tabuľka so zvýraznením


<table class="table table--highlight">
    <thead>
        <tr>
            <th>Head 1</th>
            <th>Head 2</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Footer 1</th>
            <th>Footer 2</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Description 1</td>
            <td>Description 2</td>
        </tr>
        <tr>
            <td>Description 1</td>
            <td>Description 2</td>
        </tr>
    </tbody>
</table>

Head 1 Head 2
Footer 1 Footer 2
Description 1 Description 2
Description 1 Description 2

Tabuľka so zvýrazením a farebnou hlavičkou


<table class="table table--highlight">
    <thead class="table__header--background">
        <tr>
            <th>Head 1</th>
            <th>Head 2</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Footer 1</th>
            <th>Footer 2</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Description 1</td>
            <td>Description 2</td>
        </tr>
        <tr>
            <td>Description 1</td>
            <td>Description 2</td>
        </tr>
    </tbody>
</table>

Head 1 Head 2
Footer 1 Footer 2
Description 1 Description 2
Description 1 Description 2

Formuláre

Input


<form class="form">
    <label
        class="form__label"
        for="text-input"
        >Text Input</label>
    <input
        class="form__input"
        id="text-input"
        type="text"
        placeholder="Text Input"
    />
</form>

Input block


<form class="form">
    <label
        class="form__label form__label--block"
        for="text-block"
        >Text Input Block</label>
    <input
        class="form__input"
        id="text-block"
        type="text"
        placeholder="Text Input Block"
    />
</form>

Select input


<form class="form">
    <label class="form__label" for="select">Select</label>
    <select class="form__select" id="select">
        <option>Option One</option>
        <option>Option Two</option>
        <option>Option Three</option>
    </select>
</form>

Checkboxes


<form class="form text">
    <label class="form__label" for="checkbox1">
        <input
            class="form__checkbox"
            id="checkbox1"
            name="checkbox"
            type="checkbox"
            checked="checked"
        />Choice A</label>
    <label class="form__label" for="checkbox2">
        <input
            class="form__checkbox"
            id="checkbox2"
            name="checkbox"
            type="checkbox"
        />Choice B</label>
</form>

Radio input


<form class="form text">
    <label class="form__label" for="radio1">
        <input
            class="form__radio"
            id="radio1"
            name="radio"
            type="radio"
            class="radio"
            checked="checked"
        />Option 1</label>
    <label class="form__label" for="radio2">
        <input
            class="form__radio"
            id="radio2"
            name="radio"
            type="radio"
            class="radio"
        />Option 2</label>
</form>

Tlačidlá formulára


<form class="form text">
    <input class="button" type="button" value="Button" />
    <input class="button" type="submit" value="Submit" />
    <input class="button" type="reset" value="Reset" />
</form>

Tlačidlá


<button class="button">Button element</button>
<button class="button button--dark">Button dark</button>
<button disabled class="button">Disabled</button>


Do formy tlačidla je možné naštýlovať aj link.


<a class="button" href="#">Link vo forme tlačidla</a>

Link vo forme tlačidla

Ukazovateľ posunu


<label
    for="openlab-progress-light"
    class="progress progress__label"
    >Progress Light</label>
<progress
    value="30"
    max="100"
    id="openlab-progress-light"
    class="progress progress--light"
></progress>




<label
    for="openlab-progress-dark"
    class="progress progress__label"
    >Progress Dark</label>
<progress
    value="30"
    max="100"
    id="openlab-progress-dark"
    class="progress progress--dark"
></progress>



Gratulujeme, došli ste nakoniec.