UI Kit

Install

We provide a simple UI Kit/CSS micro-framework to allow developers to easily build Livestorm branded UI elements. This UI kit reflects our main branding guidelines.

To install the UI kit within your templates, simply copy-paste the following CSS tag in the HTML code of your plugin template:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/livestorm/livestorm-plugin/dist/assets/css/style.css">

Then you'll be able to use all of the below components.

If you need only specific parts of the framework (buttons, forms, tooltips, etc), use one of these urls.

Forms

Basic tooling allowing you to quickly build a form or simple actions buttons in any kind of template.

Buttons

Checkbox

Inputs

Simple classes that provide basic layout, padding and border colors for your forms.

Radio

Switches

The switch component is very simple, let's break it down so you can understand how it's done:

<label class="ls-switch ls-switch-blue"> <!-- The container on which you add the classes -->
  <input type="checkbox"> <!-- The actual input, no JS here, just get its value -->
  <div></div> <!-- This div controls the rounded element that moves -->
  <div></div> <!-- This div is in charge of the changing background color -->
</label>

Table

Components

Tooltips

Can be used on any kind of tag, text or buttons just like below.

Warnings

Visual feedback or callout for your forms or actions.

Feel free to use the SVG icons you will find in the above HTML.

Avatars

Just an helper class that will allow you to create lists of users.
If there are no avatar available, you can also use it with simple initials.

Layout

Colors

All our branding colors are exposed as CSS variables that you can use in any regular CSS block. Please use them as much as possible and avoid using custom colors. You'll find below the list of color variables, that you can copy by clicking on each individual block:

Usage:

.text {
  color: var(--color-grey-800);
}

Texts

Text classes allow you to easily format your texts without regard to the html tag (h1,h2, etc), all tags style have been reset.

Following sizes are available in regular, medium, semibold: 9, 11, 12, 14, 16, 20, 24, 32, 40, 48.

Grid

Very simple, minimalist grid system.
We believe standard flexbox combined with our margin and padding helpers should be enough, if it's not the case do not hesitate to use a dedicated grid framework.

Margins & paddings

Just a few helper classes to help you build layouts that match Livestorm spacings and paddings.
One thing to note: margins and paddings are multiple of 4 (4, 8, 16, 20, 24, etc).

Display & more

Images

CDN

We provide CDN urls for multiple sub parts of the UI Kit.
Use one of these if you only need specific components in the framework.