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 |
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 |
ls-input | Add this to each |
ls-textarea | Add this to each |
ls-label | Add this to each |
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 |
ls-tooltip-left | Add this to the |
ls-tooltip-right | Add this to the |
ls-tooltip-bottom | Add this to the |
ls-tooltip-top | Add this to the |
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 |
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 |
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 |
ls-rounded-full | You can add this class to the |
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 |
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; |
ls-center | display: flex; |
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.
Updated 8 days ago