To use Heureka UI, you need to add the following into the head element of the template (note the version used):

Styles

The essentials.css contains all the necessary styles for rendering the elements of Heureka UI:

<link rel="stylesheet" href="https://im9.cz/ui/9.4.0/css/essentials.css">

Branding

In order to use different branding, use an alternative version of the essentials.css stylesheet, for example:

<link rel="stylesheet" href="https://im9.cz/ui/9.4.0/css/essentials--arukereso.css">

Icons

The icons.js is a script for injecting the icon sprite into the document, making the icons available:

<script src="https://im9.cz/ui/9.4.0/js/icons.js" async></script>

Currently there are two types of sprite icons (default) and flags. Required type(s) can be specified by attribute data-sprite-types (value comma separated types) on script tag.

Variants:
  • use data-sprite-types="icons" or without attribute for classic icons sprite
  • use data-sprite-types="flags" just for flags sprite
  • use data-sprite-types="icons,flags" for both sprites
Example for both sprites:
<script src="https://im9.cz/ui/9.4.0/js/icons.js" data-sprite-types="icons,flags" async></script>

Components

The essentials.js script contains the code to run all the interactive components from Heureka UI:

<script src="https://im9.cz/ui/9.4.0/js/modules/essentials.js" type="module"></script>

Last, but most importantly, you have to add a HTML class scope-essentials-v9.4.0 to an element in the template, usually the body element. All styles in the essentials.css are scoped to this class and will not take effect outside of the element with the class.

Variables and mixins

To use Less/SCSS variables in your styles, install the @heureka/hasty package via NPM as a development dependency. Then, import all the necessary files into your Less stylesheet:

@import 'node_modules/@heureka/hasty/src/css/brand/heureka';
@import 'node_modules/@heureka/hasty/src/css/base/config.less';
@import 'node_modules/@heureka/hasty/src/css/base/functions.less';
or for SCSS 
@import 'node_modules/@heureka/hasty/src/css/brand/heureka';
@import 'node_modules/@heureka/hasty/src/css/base/config';
@import 'node_modules/@heureka/hasty/src/css/base/functions';

React components

To use React components in your project, install the @heureka/hasty package via NPM as a production dependency. You can then import and use any available component in the following manner:

import { Button, ButtonVariant, Accordion } from '@heureka/hasty';

const MyComponent = () => (
    <Accordion title="Lorem ipsum">
        <Button variant={ButtonVariant.Simple} type="submit">Offblast</Button>
    </Accordion>
);