Preskočiť na hlavný obsah
IDSK 3

Pre vývojárov

Pre použitie IDSK vo vašom projekte môžete využiť repozitár dostupný na GitHub-e (otvorí sa v novom okne). V repozitári nájdete sadu komponentov používateľského rozhrania pre webové sídlo, elektronickú službu a webovú aplikáciu.

GitHub knižnica IDSK (otvorí sa v novom okne)

Dva najčastejšie spôsoby, ako začať používať IDSK Frontend vo vašej aplikácii:

  1. Inštaláciou pomocou NPM (odporúčame)
  2. Inštaláciou kompilovaných súborov

1. Inštalácia IDSK pomocou NPM

Odporúčame nainštalovať si ID-SK Frontend zo správcu balíčkov platformy Node (NPM) (otvorí sa v novom okne).

Ako postupovať pri inštalácii

Návod nájdete na stránke Inštalácia IDSK Frontend pomocou NPM.

2. Inštalácia IDSK z dist

Môžete si tiež stiahnuť skompilované a minifikované prvky (CSS, Javascript) (otvorí sa v novom okne) z GitHub. Po inštalácii budete môcť vo vašej službe používať kód z dizajn systému ID-SK.

Obmedzenia

Pri inštalácii z dist sa používajú kompilované a minifikované verzie šablóny so štýlmi. To znamená, že nebudete môcť:

  • selektívne zahrnúť CSS alebo JavaScript pre jednotlivé komponenty
  • zostaviť si vlastné štýly alebo komponenty na základe palety alebo typografických či medzerových kombinácií.
  • prispôsobiť zostavu (napríklad prepísať farby alebo povoliť globálne štýly)
  • Použiť komponenty z Nunjucks šablón.

Odstránenie obmedzení

Ak požadujete niektorú z týchto funkcií, je výhodnejšie nainštalovať IDSK Frontend pomocou node package manager.

Kroky k inštalácii

1. Stiahnite si zdroje

Stiahnite si najnovšie kompilované a minifikované verzie šablón štýlov, JavaScript a assetov:

2. Zahrňte zdroje

Skopírujte celý priečinok assets do rootu vašej služby. Podľa nižšie uvedeného príkladu pridajte súbory CSS a JavaScript do šablóny HTML.

Ukážka HTML štruktúry

index.html
<!DOCTYPE html>
<html>
<head>
    <title>Ukážka</title>
    <link rel="stylesheet" href="stylesheets/idsk-frontend-[latest version].min.css">
</head>
<body>
    <button class="govuk-button">Toto je komponent tlačidlo</button>
    
    <script src="javascript/idsk-frontend-[latest version].min.js"></script>
    <script>window.GOVUKFrontend.initAll()</script>
</body>
</html>