Preskočiť na hlavný obsah
Oficiálna stránka SK

Doména gov.sk je oficálna

Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze.

Táto stránka je zabezpečená

Buďte pozorní a vždy sa uistite, že zdieľate informácie iba cez zabezpečenú webovú stránku verejnej správy SR. Zabezpečená stránka vždy začína https:// pred názvom domény webového sídla.

ver. 2.10.0 Nová verzia ID-SK Frontend nahradzuje pôvodnú verziu. Dokumentáciu staršej verzie nájdete na ID-SK Elements

  1. ID-SK frontend
  2. Aktualizácia z ID-SK Elements na ID-SK Frontend
Úvod

Aktualizácia z ID-SK Elements na ID-SK Frontend

ID-SK Frontend je databáza frontendov, ktorá nahrádza prvky ID-SK Elements. V tabuľkách nižšie sú uvedené staré a nové názvy komponentov, tried a kombinácií, ktoré vám pomôžu nájsť, čo potrebujete.

Prvky ID-SK Elements boli nahradené aktuálnym dizajnovým systémom ID-SK Frontend. ID-SK Elements zostane k dispozícii pre prípad, že ich v súčasnosti používate, avšak už sa neudržujú. Vykonávať sa budú iba významné opravy chýb a bezpečnostné opravy. Dizajnový systém ID-SK Frontend bude aktualizovaný, aby sa zabezpečilo, že veci, ktoré obsahuje, spĺňajú úroveň AA WCAG 2.1. O prístupnosti dizajnového systému ID-SK Frontends si prečítajte viac tu.

Šablóna stránky

Doteraz bolo pre konzistenciu stránok potrebné používať GOV.UK Template.
Tento obsah bol prenesený do ID-SK Frontend. Môžete z neho čerpať pomocou Nunjucks alebo HTML.

Šablóna Nunjucks

Kde to bolo možné, ponechali sme novú šablónu stránky rovnakú ako v pôvodnej verzii.
Najzásadnejšou je zmena elementov zo snake_case na camelCase.

ID-SK Elements ID-SK Frontend
:top_of_page Zastarané: umiestnenie obsahu nad 
<!DOCTYPE html>
bude mať za následok nefunkčné stránky pre používateľov starších verzií programu Internet Explorer.
:html_lang htmlLang
:page_title pageTitle
:asset_path assetPath
:head head
:body_classes bodyClasses
:body_start bodyStart
:skip_link_message Link na preskočenie môžete nahradiť poskytnutím iného, ktorý obsahuje vlastný text 
{% block skipLink %}
    {{ idskSkipLink({ text: "custom text" }) }}
{% endblock %}
Pozrite si skip link component pre viac detailov.
:cookie_message Zatiaľ žiadna náhrada, hľadáme vylepšenie tejto zložky na základe požiadaviek GDPR.
header_class Komponent nadpisu môžete nahradiť vytvorením vlastného, ktorý môže zahŕňať vlastné triedy (classes). 
{% block header %}
    {{ govukHeader({ classes: "app-custom-classes" }) }}
{% endblock %}
Pozrite si komponent hlavičky pre viac detailov.
homepage_url Komponent hlavičky môžete nahradiť vytvorením komponentu s vlastnou url (homepageUrl) 
{% block header %}
    {{ govukHeader({ homepageUrl: "/custom-url" }) }}
{% endblock %}
Pozrite si komponent hlavičky pre viac detailov.
global_header_text Žiaden ekvivalent. V prípade potreby nás upozornite na problém. inside_header Komponent hlavičky môžete nahradiť novým komponentom s vlastným názvom služby (serviceName). 
{% block header %}
    {{ govukHeader({ serviceName: "Custom service name" }) }}
{% endblock %}
Pozrite si komponent hlavičky pre viac detailov.
proposition_header Komponent hlavičky môžete nahradiť novým komponentom s vlastnou navigáciou (navigation) 
{% block header %}
    {{ govukHeader({ navigation: [] }) }}
{% endblock %}
Pozrite si komponent hlavičky pre viac detailov.
:after_header beforeContent
:content main
Pridanie obsahu do premennej content vloží daný obsah do elementu <main>.
V starej šablóne GOV.UK Template nebol žiadny predvolený prvok <main>.
Svoj obsah môžete reštrukturalizovať tak, aby neobsahoval prvok <main>, alebo ho nahradiť.
:footer_top Komponent pätičky môžete nahradiť novým komponentom s vlastnou navigáciou (navigation) 
{% block header %}
    {{ govukFooter({ navigation: [] }) }}
{% endblock %}
Pozrite si komponent pätičky pre viac detailov.
:footer_support_links Komponent pätičky môžete nahradiť novým komponentom s vlastnými meta linkami 
{% block header %}
    {{ govukFooter({ meta: [] }) }}
{% endblock %}
Pozrite si komponent pätičky pre viac detailov.
:licence_message Žiaden ekvivalent. V prípade potreby nás upozornite na problém.
:body_end bodyEnd

Názvy komponentov

ID-SK Elements ID-SK Frontend
link-back Back link component
Button Button component
Checkboxes Checkboxes component
Date pattern Date input component
Hidden text (Progressive disclosure) Details component
Errors and validation Error message component
Error summary component
<fieldset> Fieldset component
File upload File upload component
Alpha and beta banners Phase banner component
Radio buttons Radios component
Select boxes Select component
Phase tag Tag component
Form fields Text input component
<textarea> Textarea component
Warning text (previously Legal text) Warning text component
govuk-box-highlight Panel component
Inset text Inset text component
panel (object)
panel-border-wide
panel-border-narrow		 Zastarané: tento štýl je teraz obsiahnutý v každej súčasti, ktorá ho potrebuje.

Názvy tried

ID-SK Frontend používa “Block, Element, Modifier” (BEM) a Inverted Triangle CSS (ITCSS) na štruktúrovanie CSS a definovanie názvov tried. To znamená, že všetky existujúce názvy tried sa zmenili.

Typografia názvov tried

ID-SK Elements ID-SK Frontend
heading-xlarge govuk-heading-xl
heading-large govuk-heading-l
heading-medium govuk-heading-m
heading-small govuk-heading-s
lede govuk-body-l
<p> body-text
govuk-body
font-xsmall govuk-body-s
<a> govuk-link
<hr> govuk-section-break
govuk-section-break--visible
govuk-section-break--xl
govuk-section-break--l
govuk-section-break--m

Zoznamy

ID-SK Elements ID-SK Frontend
list govuk-list
list
list-bullet		 govuk-list
govuk-list--bullet
list
list-number		 govuk-list
govuk-list--number

Názvy tried usporiadania a mriežky

ID-SK Elements ID-SK Frontend
grid-row govuk-grid-row
column-full govuk-grid-column-full
column-one-half govuk-grid-column-one-half
column-one-third govuk-grid-column-one-third
column-two-thirds govuk-grid-column-two-thirds
column-one-quarter govuk-grid-column-one-quarter
#content Page wrappers

Názvy tried súvisiacich s formulármi

ID-SK Elements ID-SK Frontend
grid-row govuk-grid-row
form-group govuk-form-group
form-hint Špecifické pre komponent, napríklad:
govuk-label__hint
form-label Špecifické pre komponent, napríklad:
govuk-label
govuk-radios__label
form-label-bold govuk-label--s
form-control
form-control-3-4
form-control-2-3
form-control-1-2
form-control-1-3
form-control-1-4
form-control-1-8		 Width override classes
form-section Zastarané: pri novej implementácii medzier sa nevyžaduje
form-group-related Zastarané: pri novej implementácii medzier sa nevyžaduje
form-group-compound Zastarané: pri novej implementácii medzier sa nevyžaduje

Názvy tried pomocníka

ID-SK Elements ID-SK Frontend
visually-hidden, visuallyhidden govuk-visually-hidden
govuk-visually-hidden-focusable

Override class names

ID-SK Elements ID-SK Frontend
font-xxlarge govuk-!-font-size-80
font-xlarge govuk-!-font-size-48
font-large govuk-!-font-size-36
font-medium govuk-!-font-size-24
font-small govuk-!-font-size-19
font-xsmall govuk-!-font-size-16
bold-xxlarge govuk-!-font-size-80
govuk-!-font-weight-bold
bold-xlarge govuk-!-font-size-48
govuk-!-font-weight-bold
bold-large govuk-!-font-size-36
govuk-!-font-weight-bold
bold-medium govuk-!-font-size-24
govuk-!-font-weight-bold
bold-small govuk-!-font-size-19
govuk-!-font-weight-bold
bold-xsmall govuk-!-font-size-16
govuk-!-font-weight-bold
bold govuk-!-font-weight-bold

Mixins and variables

Typografia

GOV.UK Frontend Toolkit ID-SK Frontend
@include core-80 @include govuk-font(80)
@include core-48 @include govuk-font(48)
@include core-36 @include govuk-font(36)
@include core-27 @include govuk-font(27)
@include core-24 @include govuk-font(24)
@include core-19 @include govuk-font(19)
@include core-16 @include govuk-font(16)
@include core-14 @include govuk-font(14)
@include bold-80 @include govuk-font(80, $weight: bold)
@include bold-48 @include govuk-font(48, $weight: bold)
@include bold-36 @include govuk-font(36, $weight: bold)
@include bold-27 @include govuk-font(27, $weight: bold)
@include bold-24 @include govuk-font(24, $weight: bold)
@include bold-19 @include govuk-font(19, $weight: bold)
@include bold-16 @include govuk-font(16, $weight: bold)
@include bold-14 @include govuk-font(14, $weight: bold)
@include heading-80 Zastarané: 80px nadpisy sa nepoužívajú, @include govuk-font(80, $weight: bold) should be used instead
@include heading-48 @extend %govuk-heading-xl
@include heading-36 @extend %govuk-heading-l
@include heading-27 Deprecated: 27px headings are not used, @include govuk-font(27, $weight: bold) should be used instead
@include heading-24 @extend %govuk-heading-m
@include copy-19 @extend %govuk-body
@include copy-14 @extend %govuk-body-xs

Typografia

GOV.UK Frontend Toolkit ID-SK Frontend
@extend site-width-container @include govuk-width-container
@include grid-column( 1/4 ) Zastarané: vlastnosti mriežky nemôžete použiť na iné prvky pomocou ID-SK Frontend
@include grid-column( 1/2 ) Zastarané: vlastnosti mriežky nemôžete použiť na iné prvky pomocou ID-SK Frontend
@include grid-column( 1/3 ) Zastarané: vlastnosti mriežky nemôžete použiť na iné prvky pomocou ID-SK Frontend
@include grid-column( 2/3 ) Zastarané: vlastnosti mriežky nemôžete použiť na iné prvky pomocou ID-SK Frontend
@include grid-column( 1/3, $full-width: desktop ); Zastarané: vlastnosti mriežky nemôžete použiť na iné prvky pomocou ID-SK Frontend
$gutter $govuk-gutter, použite iba pre medzery medzi stĺpcami mriežky, inak použite mierku rozstupov.
$gutter-half $govuk-gutter, použite iba pre medzery medzi stĺpcami mriežky, inak použite mierku rozstupov.

Média queries

GOV.UK Frontend Toolkit ID-SK Frontend
@include media(desktop) @include govuk-media-query($from: desktop)
@include govuk-media-query($until: desktop)
@include media(tablet) @include govuk-media-query($from: tablet)
@include govuk-media-query($until: tablet)
@include media(mobile) @include govuk-media-query($from: mobile)
@include govuk-media-query($until: mobile)

Obrázky

GOV.UK Frontend Toolkit ID-SK Frontend
@include device-pixel-ratio($ratio: 2) @include govuk-device-pixel-ratio($ratio: 2)

Shims

GOV.UK Frontend Toolkit ID-SK Frontend
@include inline-block Zastarané: inline-block je teraz predvolený pre všetky komponenty
@extend %contain-floats @include govuk-clearfix

Internet Explorer

GOV.UK Frontend Toolkit ID-SK Frontend
@include ie(8) @include govuk-if-ie8

Potrebujete pomoc?

Ak máte otázky ohľadom dizajn systému ID-SK Frontend, kontaktujte náš tím na idsk@vicepremier.gov.sk