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

Classes

Description

ls-button

Add this to a <button> tag

ls-button-wrapper

Wraps the content inside the button

ls-button-[red,green,orange]-primary

Color of the button

ls-button-[red, green, orange]-secondary

Alternative colors

ls-button-tertiary

Alternative color

ls-button-small

Small version

ls-button-extra-small

Extra small version

ls-button-square

Square version (useful to display an icon).

ls-button-icon ls-svg-wrap ls-icon

Wraps an SVG icon

ls-right-icon

Positions the icon on the right side

ls-left-icon

Positions the icon on the left side

Checkbox

Classes

Description

ls-checkbox

The wrapper class of the checkbox input

Inputs

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

Classes

Description

ls-form

Add this to the <form> tag

ls-input

Add this to each <input> tag

ls-textarea

Add this to each <textarea> tag

ls-label

Add this to each <label> tag

Radio

Classes

Description

ls-radio

The wrapper of the radio input

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>

Classes

Description

ls-switch

The container of your switch. Will create a regular green switch.

ls-switch-blue

Add this to get the Livestorm blue variant of the switch.

Table

Classes

Description

ls-table

The wrapper of the table

Components

Tooltips

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

Classes

Description

ls-tooltip

Container of the tooltip

ls-tooltip-text

Add this to a span within div.tooltip. This is the actual tooltip

ls-tooltip-left

Add this to the span.tooltip-text to make it appear on the left of the element

ls-tooltip-right

Add this to the span.tooltip-text to make it appear on the right of the element

ls-tooltip-bottom

Add this to the span.tooltip-text to make it appear on the bottom of the element

ls-tooltip-top

Add this to the span.tooltip-text to make it appear on top of the element

Warnings

Visual feedback or callout for your forms or actions.

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

Classes

Description

ls-warning-message

Add this class to a div that is the container of the warning

ls-warning-info

Blue information box

ls-warning-success

Green success box

ls-warning-warning

Yellow warning box

ls-warning-error

Red error box

ls-warning-message-content

Add this class to the div that represents the textual content of the warning whenever you add actions

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.

Classes

Description

ls-user-avatar

Add this class to a figure

ls-rounded-full

You can add this class to the figure to fully round the image

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.

Classes

Description

ls-text-XX-regular

Regular font-weight. Replace XX with any of the available sizes

ls-text-XX-medium

Medium font-weight. Replace XX with any of the available sizes.

ls-text-XX-semibold

Semibold font-weight. Replace XX with any of the available sizes.

ls-text-[11, 12, 14]-semibold-uc

Uppercase semibold font-weight. Replace XX with any of the available sizes.

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.

Class

Description

ls-grid

Container of the grid

ls-row

One row that will contain columns

ls-column

A single column

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).

Classes

ls-ml-auto

margin-left: auto

ls-mr-auto

margin-right: auto

ls-mx-auto

margin-left: auto
margin-right: auto

ls-mt-[1-8]

margin-top

ls-mb-[1-8]

margin-bottom

ls-mr-[1-8]

margin-right

ls-ml-[1-8]

margin-left

ls-pt-[1-8]

padding-top

ls-pb-[1-8]

padding-bottom

ls-pl-[1-8]

padding-left

ls-pr-[1-8]

padding-right

Display & more

Classes

Description

ls-space-between

display: flex;
justify-content: space-between;

ls-center

display: flex;
align-items: center;

ls-d-block

display: block

ls-w-full

width: 100%

ls-w-half

width: 50%

ls-rounded

border-radius: 8px

ls-rounded-full

border-radius: 100%

Images

Classes

Description

ls-img-fluid

Make image responsive with auto height + max width 100%

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.


Did this page help you?