Skip to main content

Designer


Thanks to KoliBri Designer, users can quickly develop their own style for the KoliBri library. The effects of their own CSS instructions are visible directly on the component.
The finished styles can then be downloaded as a theme and inserted into the user's own project.

Global CSS​

To ensure that all HTML elements behave optimally when using assistive tools and at high zoom levels, specific CSS styles must be set. For this purpose, the following CSS are initially set for all components and can be overridden by the theme-specific CSS if required.

* {
 font-size: inherit; /* allows proportional scaling */
 hyphens: auto; /* activates the language-specific hyphenation */
 letter-spacing: inherit; /* allows changing the letter spacing */
 word-break: break-word; /* enables word wrapping */
 word-spacing: inherit; /* allows changing the word spacing */
}

Structure​

The KoliBri Designer is divided into three sections.

Top left: Theme​

The custom theme can be built either based on a standard theme (default) or directly with an empty theme. By default, a standard theme is selected as the basis in the Theme field by the “default” entry. Here, for illustration purposes, some CSS statements are inserted into the editor area, the effect of which is applied to the default Button component as an example.
If you enter your value for the theme to be created in the Theme field, the KoliBri Designer resets all styling instructions, and you can start with an empty theme.

Please note that some KoliBri components are naturally displayed either not at all, unfamiliar or with browser default layout, when selecting an empty default theme.

Center left: Editor​

For easy input of own CSS instructions, the KoliBri Designer has a VS Code Editor. Instructions that users write in the editor area are automatically taken over after pressing the key combination Ctrl + S or Command + S and the effects are transferred to the currently selected component.

Top right: Componoents​

Via the selection box Components, the KoliBri component to be edited can be selected. All KoliBri components are available, that have a visual output. Not included are purely functional components, such as Modal, InputLeandUpAdapter or SkipNav.
After selecting a component, the KoliBri designer loads a typical basic output of the component. For components that have different variants, such as Button, all variants are output.

Kindly note that some KoliBri components have dependencies on each other. For example, the LinkGroup component consists of the Link component, IconIcofont component and Tooltip component. It is recommended to start with the smallest component first and then switch to the actual main component. A detailed description follows below.

Top center: Preview​

This area displays the currently loaded component with a typical output. Depending on the selection of the default theme, the component either presents itself in the default browser layout or already has styling features that come from the default theme.

Bottom: Import / Export / Reset​

The KoliBri Designer offers different possibilities to save your settings and load them again for further editing.

The button “Create Theme” summarizes your CSS instructions as a standalone theme and makes them available in the editor for viewing and copying.
The “Download Theme” button allows you to save your theme as a JSON file.
To undo all changes, click the “Discard all changes” button. The KoliBri Designer will be reset to the default theme “default”.
With the upload field “Load Theme” an already created theme file (JSON file) can be loaded into the KoliBri Designer for editing again.

Interdependencies of the components​

Most KoliBri components are technically made up of a collection of other KoliBri components, which together then make up a new KoliBri component and have similar, but broader, fields of application.
Knowing the technical construction of the component you are working on is important for the correct sequence when creating your own theme.

The dependencies of the KoliBri components on each other are described in detail by a diagram in the Storybook, in the section Description of the respective component.

Example:

The LinkGroup used in this example consists of the other KoliBri components:

  • kol-heading
  • kol-link → also uses kol-tooltip and kol-badge
  • kol-icon-icofont
  1. First, set the CSS instructions for the LinkGroup heading. The heading consists of the KoliBri component “kol-heading”. Therefore, change in the selection field Components to the component kol-heading. Adjust here in the editor, e.g. for h1 the font color. This setting now applies to all components in which the kol-heading component is used. The font color has changed not only for the kol-heading component itself, but also for all components that use kol-heading. Among others, the kol-link-group used in the example.
    Switch back to the kol-link-group component in the Components selection box. Again, the font color of the heading has changed according to the CSS statement of the kol-eading component.
  2. Now change the font color of the links. In the Components selection box, switch to kol-link. In the editor, change the Color value for a. Switch back to the kol-link-group component. The font color of the individual links has also changed.
  3. If you try to change the previously mentioned settings directly in the kol-link-group component, you will not see any changes. However, it would be possible here, for example, to change the background color of the entire kol-link-group component.
  4. Note that you can only style components that are inside a shadow DOM via the KoliBri designer. For the kol-link-group example, it would not be possible to style the element itself because it is not inside a shadow DOM.
  5. Note that changes in KoliBri Designer are possible only for those KoliBri components that have a shadow DOM during rendering. This is not the case, for example, with the kol-icon-icofont or kol-icon-fontawesome component.