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 GitlabeNižšie nájdete dokumentáciu.
Snippet prinašajúci náš CSS a JS súbor do vášho projektu pre OpenLab.
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>
OpenLab CSS umožňuje ako rýchlo vyvíjať informačné obrazovky pre OpenLab. Stačí pochopiť zopár konceptov.
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.
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.
Prvá vec v boxe je názov obrazovky, ktorý voláme topic
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.
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.
Ak potrebujete elementu pridať viac priestoru, ktorý by sa automaticky nastavoval podľa veľkosti panela, máme to. Pozri dokumentáciu ku spacing.
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?
Pozrite si všetky element v živej veľkosti, v ktorej budú zobrezené na OpenLab displeji.
Ukážky HTML elementovPozrite si typografiu v živej veľkosti, ktorú OpenLab CSS ponúka.
Ukážka typografieTieto 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.
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:
<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.
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ámkaHoci sú panely rôzne veľké, oba majú 4K rozlíšenie. OpenLab CSS nastaví HTML elementy podľa mierky zväčšenia.
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.
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 |
|
Small with header | Mriežka pre panel 2x2 s hlavičkou |
|
Small with footer | Mriežka pre panel 2x2 s pätičkou |
|
Small with header and footer | Mriežka pre panel 2x2 s hlavičkou aj pätičkou |
|
Big | Mriežka pre panel 3x3 |
|
Big with header | Mriežka pre panel 3x3 s hlavičkou |
|
Big with footer | Mriežka pre panel 3x3 s pätičkou |
|
Big with header and footer | Mriežka pre panel 3x3 s hlavičkou aj pätičkou |
|
Grid holder | Vycentruje mriežku do stredu stránky. Umiestňuje sa na rodičovský element, zväčša <body> |
|
Úlohou kontajnera je centrovať obsah informačných obrazoviek v rámci displeja.
<div class="grid grid--big">
<div class="container"></div>
</div>
Popis | CSS triedy |
---|---|
Kontajner |
|
Úlohou boxu je vytvoriť priestor pre obsah informačnej obrazovky a zaobaliť ho do jednotného dizajnu.
<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 layout | Vytvorí layout v boxe pre obsah a názov v informačnej obrazovke |
|
Box glow | Vytvorí modrý pruh naľavo, pričom toto správanie je odporúčané |
|
Box iFrame | Box sa roztiahne do maximálnych rozmerov a vytvorí priestor pre vloženie iFrame |
|
Box expand | Box sa roztiahne do maximálnych rozmerov |
|
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>.
<div class="layout layout__row">
Typ | Popis | CSS triedy |
---|---|---|
Layout | Zapne Flexbox |
|
Layout Row | Vytvorí FLexbox v smere riadka a zarovná flex boxy do stredu |
|
Layout Column | Vytvorí Flexbox v smere stĺpca. Niekedy potrebné, ak chceme zmenšiť niektorý z vložených flex boxov |
|
Layout Gap | Medzi flex boxami vznikne medzera. Ak veľkosť medzery nevyhovuje, odporúčame použiť margin. |
|
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 |
|
<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>
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
Tretie číslo. Ide o jednotku rem. Možnosti sú:
0, 03, 05, 1, 15, 2, 3, 5, 8.Ak je číslo dvojmiestne, predstavuje číslo s desatinou, teda 03 je v realite 0,3rem.
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
<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
<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
<p class="text text__topic">Topic</p>
Topic
<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
<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
<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
<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
<p class="text text__tiny">Tiny</p>
Tiny
<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
<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
<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
<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
<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
<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>
<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>
<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>
<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>
<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>
<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>
<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
<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>