# Orbit's CSS Framework

**Documentation to install and to use the CSS framework in an application using [Startin'blox](https://startinblox.com).**

## How to install it in your app?

First, you need [NPM](https://www.npmjs.com/get-npm) and [Sass](https://sass-lang.com/install) installed.
Then, go into your app's main folder and install the framework:

```bash
cd <my-app>
npm i @startinblox/orbit-styling-framework
```

## How to update the framework's version in your app?

Go into your app's main folder:

```bash
cd <my-app>
npm i @startinblox/orbit-styling-framework --save
```

## How to see visual examples/watch changes if you want to update the framework?

Go into your app's main folder:

```bash
cd <my-app>
```

Then watch files with:

```bash
npm run watch
```

go to the server specified in the console.

## How to use?

We have set our framework to one breakpoint. Below 768 px, you are on a small screen.
Above 768.01px is the default value.

### Tags

--------

You can create by adding the `tag` class. By default, it will have the primary colour.

#### Other colors

Add those utilities to `tag` to change the colors:

| Class |
|-------|
| tag color-secondary |
| tag color-third |

![Examples of tags](images/tags.png)

```html
  <span class="tag">HTML</span>
  <span class="tag color-secondary">CSS</span>
  <span class="tag color-third">JS</span>
```

#### Reversed color

Reverse the colour of the tag element by adding `reversed` to `tag`.

![Examples of tags with reversed colors](images/tags-reversed.png)

```html
  <span class="tag reversed">HTML</span>
  <span class="tag reversed color-secondary">CSS</span>
  <span class="tag reversed color-third">JS</span>
```

#### Hover

Add `hover` to `tag` to see its colors swipe when it is hover.

![Examples of tags hovered over](images/tags-hover.png)

```html
  <span class="tag hover">HTML</span>
  <span class="tag color-secondary hover">CSS</span>
  <span class="tag color-third hover">JS</span>
```

![Examples of tags with reversed colors and is hovered over](images/tags-reversed-hover.png)

```html
  <span class="tag reversed hover">HTML</span>
  <span class="tag reversed color-secondary hover">CSS</span>
  <span class="tag reversed color-third hover">JS</span>
```

#### Tags into a solid-multiple

Use `children-tag` to have all your elements stylised as tags.

![Examples of tags into a solid-multiple element](images/tags-children.png)

```html
<solid-multiple class="children-tag">
  <solid-display>
    <div>
      <solid-display>
        <div>
          <solid-display-value>Web services</solid-display-value>
        </div>
      </solid-display> >
    </div>
  </solid-display>
</solid-multiple>
```

### Table

--------

Add `table-wrapper` to the container of your table.
Add `table` to your table.
Add `table-header` to the header row of your table
Add `segment` and the `.table-cell` to the cells inside the `.table-header`.
Add `table-body` to the body of your table
Add `segment` and the `.table-cell` to the cells inside the `.table-body`.
Use the [segment's widths](#segment) to define the width of your cells.
Add `ellipsis` on elements inside your table cells to ellipsis the text.

Classic table with 3 columns:

![Example of a table](images/table.png)

```html
<div class="segment table-wrapper">
  <div class="table">
    <div class="table-header">
      <div class="segment table-cell table-cell third">
        Name
      </div>
      <div class="segment table-cell table-cell third">
        Firstname
      </div>
      <div class="segment table-cell table-cell third">
        Action
      </div>
    </div>
    <solid-display class="table-body">
      <div>
        <solid-display>
          <div>
            <solid-set-default class="segment table-cell third">
            </solid-set-default>
            <solid-set-default class="segment table-cell third">
            </solid-set-default>
            <solid-set-default class="segment table-cell third">
            </solid-set-default>
          </div>
        </solid-display>
      </div>
    </solid-display>
  </div>
</div>
```

Table with third color background and heading color column titles. 2 columns:

![Example of a table stylized](images/table-stylized.png)

```html
<div class="segment table-wrapper">
  <div class="table">
    <div class="table-header bg-color-third text-color-heading">
      <div class="segment table-cell table-cell half">
        Name
      </div>
      <div class="segment table-cell table-cell half">
        Action
      </div>
    </div>
    <solid-display class="table-body">
      <div>
        <solid-display>
          <div>
            <solid-set-default class="segment table-cell half">
            </solid-set-default>
            <solid-set-default class="segment table-cell half">
            </solid-set-default>
          </div>
        </solid-display>
      </div>
    </solid-display>
  </div>
</div>
```

### Segment

--------

A segment is used to help you format the content.
Add `segment` class or `segment children` if you want to add the style to the children of your element and you can’t add classes.
This class will make your element to display as inline-block and white-space sets to nowrap.
Your element can be a block element by adding `block`.
You can set white-space to normal by adding `whitespace-normal` or `sm-whitespace-normal`.

#### Width

Utilities for setting the width of an element. Use it with `segment`.

![Examples of segments with different widths](images/segment-width.png)

```html
<div class="segment full whitespace-normal">
  <p>I measure 100% of the total space</p>
  <p class="segment two-third">I measure 66,666% of the total space.</p>
  <p class="segment quarter">I measure 25% of the total space.</p>
  <p class="segment third">I measure 33,333% of the total space.</p>
  <p class="segment half">I measure 50% of the total space.</p>
  <p class="segment auto">I take the space that I want.</p>
</div>
```

Prefix the width with `children-` to add the width on the children elements. It works with all lengths listed above.

![Examples of segment with a width on a child element](images/segment-width-children.png)

```html
<div class="segment full children children-third">
  <div>
    <solid-display>I measure 33.33% of the total space.</solid-display>
    <solid-display>I measure 33.33% of the total space.</solid-display>
    <solid-display>I measure 33.33% of the total space.</solid-display>
  </div>
</div>
```

Prefix with "sm-" to add the same styles on small screens.
Ex:

```html
<p class="segment sm-full"></p>
<div class="segment children sm-children-quarter"></div>
```

You can hide your element and their children, on large or small screens, with:

|Class |
|------|
| segment children-hidden |
| segment sm-hidden |
| segment lg-hidden |
| segment sm-children-hidden |
| segment lg-children-hidden |

### Spacing

--------

#### Padding

Utilities for controlling an element's padding.
Add the "-sm" prefix to use those utilities on small screens.

| Class | Properties |
|-------|------------|
| padding-none | padding: 0; |
| padding-xxsmall | padding: 5px; |
| padding-xsmall | padding: 10px; |
| padding-small | padding: 15px; |
| padding-medium | padding: 20px; |
| padding-large | padding: 25px; |
| padding-xlarge | padding: 30px; |
| padding-xxlarge | padding: 35px; |
| sm-padding-none | padding: 0; |
| sm-padding-xxsmall | padding: 5px; |
| sm-padding-xsmall | padding: 10px; |
| sm-padding-small | padding: 15px; |
| sm-padding-medium | padding: 20px; |
| sm-padding-large | padding: 25px; |
| sm-padding-xlarge | padding: 30px; |
| sm-padding-xxlarge | padding: 35px; |

Ex:
Same element on large screen and on small screen.

![Example of padding](images/segment-padding.png)
![Example of padding on small screens](images/segment-padding-sm.png)

```html
<div class="padding-small sm-padding-none"></div>
```

##### Padding to children

Utilities for controlling an element children's padding.
Add the "-sm" prefix to use those utilities on small screens.

| Class | Properties |
|-------|------------|
| children-padding-none | padding: 0; |
| children-padding-xxsmall | padding: 5px; |
| children-padding-xsmall | padding: 10px; |
| children-padding-small | padding: 15px; |
| children-padding-medium | padding: 20px; |
| children-padding-large | padding: 25px; |
| children-padding-xlarge | padding: 30px; |
| children-padding-xxlarge | padding: 35px; |
| sm-children-padding-none | padding: 0; |
| sm-children-padding-xxsmall | padding: 5px; |
| sm-children-padding-xsmall | padding: 10px; |
| sm-children-padding-small | padding: 15px; |
| sm-children-padding-medium | padding: 20px; |
| sm-children-padding-large | padding: 25px; |
| sm-children-padding-xlarge | padding: 30px; |
| sm-children-padding-xxlarge | padding: 35px; |

Ex:
Same element on large screen and on small screen.
![Example with padding on a child element](images/segment-padding-children.png)
![Example with padding on a child element on small screens](images/segment-padding-children-sm.png)

```html
<div class="segment children children-padding-medium sm-children-padding-xxsmall">
  <div>
    <solid-display></solid-display>
  </div>
</div>
```

##### Add padding to a single side

Control the padding on one side of an element using "-top", "-right", "-bottom" and "-left".
Ex:
Same element on large screen and on small screen.

![Example with différents padding on applied on different sides](images/segment-padding-side.png)
![Example with différents padding on applied on different sides on small screens](images/segment-padding-side-sm.png)

```html
<div class="padding-top-xlarge padding-left-small sm-padding-left-xlarge sm-padding-bottom-large"></div>
```

![Example with différents padding on applied on different sides on a child element](images/segment-padding-children-side.png)
![Example with différents padding on applied on different sides on a child element on small screens](images/segment-padding-children-side-sm.png)

```html
<div class="segment children children-padding-top-medium sm-children-padding-bottom-medium">
  <div>
    <solid-display></solid-display>
  </div>
</div>
```

#### Margin

Utilities for controlling an element's padding.
Add the "-sm" prefix to use those utilities on small screens.

| Class | Properties |
|-------|------------|
| margin-none | padding: 0; |
| margin-xxsmall | padding: 5px; |
| margin-xsmall | padding: 10px; |
| margin-small | padding: 15px; |
| margin-medium | padding: 20px; |
| margin-large | padding: 25px; |
| margin-xlarge | padding: 30px; |
| margin-xxlarge | padding: 35px; |
| sm-margin-none | padding: 0; |
| sm-margin-xxsmall | padding: 5px; |
| sm-margin-xsmall | padding: 10px; |
| sm-margin-small | padding: 15px; |
| sm-margin-medium | padding: 20px; |
| sm-margin-large | padding: 25px; |
| sm-margin-xlarge | padding: 30px; |
| sm-margin-xxlarge | padding: 35px; |

Ex: Like you use [padding](#padding). You just need to replace `padding` with `margin`.

##### Margin to children

Utilities for controlling an element children's padding.
Add the "-sm" prefix to use those utilities on small screens.

| Class | Properties |
|-------|------------|
| children-margin-none | padding: 0; |
| children-margin-xxsmall | padding: 5px; |
| children-margin-xsmall | padding: 10px; |
| children-margin-small | padding: 15px; |
| children-margin-medium | padding: 20px; |
| children-margin-large | padding: 25px; |
| children-margin-xlarge | padding: 30px; |
| children-margin-xxlarge | padding: 35px; |
| sm-children-margin-none | padding: 0; |
| sm-children-margin-xxsmall | padding: 5px; |
| sm-children-margin-xsmall | padding: 10px; |
| sm-children-margin-small | padding: 15px; |
| sm-children-margin-medium | padding: 20px; |
| sm-children-margin-large | padding: 25px; |
| sm-children-margin-xlarge | padding: 30px; |
| sm-children-margin-xxlarge | padding: 35px; |

Ex: Like you use [padding on children elements](#padding-to-children). You just need to replace `padding` with `margin`.

##### Add margin to a single side

Control the margin on one side of an element using "-top", "-right", "-bottom" and "-left".

Ex: Like you use [padding to a single side](#add-padding-to-a-single-side). You just need to replace `padding` with `margin`.

### Pagination

--------

Add `pagination` where you want this style applied (i.e: pagination widget).

![Example of pagination : first page, a random page and last page](images/pagination.png)

```html
<div class="pagination"></div>
```

### Link

--------

Add `backlink` to have your link preceded by an icon and coloured in grey.

![Example of a back link](images/backlink.png)

```html
<solid-link class="backlink">Back</solid-link>
```

Add `link` to have your link colored in blue.

![Example of a link](images/link.png)

```html
<solid-link class="link">My link</solid-link>
```

### Icon

--------

With `icon` you can add icons in different places and in different styles.
Currently we use 3 libraries to display icons : Material Design Icons, Simple Line Icons and a custom libraries with icons specially created for the application.
If you want to use icons from Material Design Icons, use `mdi-<icon-name>`.
If you want to use icons from Simple Line Icons, use `icon-<icon-name>`.
if you want tu use our custom icons, use `ci-<icon-name>`.
(I know I need to improve this part of the framework. Still in progress but you can find all icons and their classes in [this document](https://drive.google.com/file/d/1M9zQbBJm2zMH1wU6aQjvNSfHhqG_ldAO/view?usp=sharing)).

#### Rounded

Your icon can be surrounded by a circle, use `icon rounded`.
You can change its size and color with these utilities.
you can vary the [size of the icon](#sizes).

| Class |
|-------|
| icon rounded rounded-small |
| icon rounded rounded-large |
| icon rounded rounded-primary |
| icon rounded rounded-secondary |
| icon rounded rounded-third |
| icon rounded rounded-heading |

![Examples of icon with different rounded border's colors](images/icon-rounded.png)

```html
<span class="icon icon-envelope icon-secondary icon-small rounded rounded-small rounded-primary"></span>
<span class="icon icon-envelope icon-secondary icon-xlarge rounded rounded-large rounded-primary"></span>
<span class="icon icon-envelope icon-secondary icon-xsmall rounded rounded-small rounded-secondary"></span>
<span class="icon icon-envelope icon-secondary icon-large rounded rounded-large rounded-heading"></span>
<span class="icon icon-envelope icon-secondary icon-medium rounded rounded-small rounded-third"></span>
```

#### Bold

Make your icons thicker with `icon bold`.

Icon normal

![Example of a normal icon](images/icon-no-bold.png)

```html
<span class="icon icon-briefcase icon-grey icon-xlarge"></span>
```

Icon bold

![Example of a bolded icon](images/icon-bold.png)

```html
<span class="icon bold icon-briefcase icon-grey icon-xlarge"></span>
```

#### Sizes

You can vary the size of your icon. By default it will be 18px.

| Class |
|-------|
| icon-xsmall |
| icon-small |
| icon-large |
| icon-xlarge |

![Examples of icons with different sizes](images/icon-sizes.png)

```html
<span class="icon icon-briefcase icon-grey icon-xsmall"></span>
<span class="icon icon-briefcase icon-grey icon-small"></span>
<span class="icon icon-briefcase icon-grey icon-large"></span>
<span class="icon icon-briefcase icon-grey icon-xlarge"></span>
```

#### Positioning

You can center your icon or add a small space to te right of your icon.

| Class | Properties |
|-------|------------|
| icon centered | margin: 0 auto; |
| icon-margin-right-xxsmall | margin-right: 5px; |
| icon-margin-right-xsmall | margin-right: 10px; |
| icon-margin-right-small | margin-right: 15px; |
| icon-margin-right-medium | margin-right: 20px; |
| icon-margin-left-xxsmall | margin-left: 5px; |
| icon-margin-left-xsmall | margin-left: 10px; |
| icon-margin-left-small | margin-left: 15px; |
| icon-margin-left-medium | margin-left: 20px; |

![Examples of icons with different margin-left and margin-right](images/icon-positioning.png)

```html
<p><span class="icon icon-globe icon-grey icon-large centered">Your head is not an artifact!</span></p>
<p><span class="icon icon-globe icon-grey icon-large icon-margin-right-xxsmall">Your head is not an artifact!</span></p>
<p><span class="icon icon-globe icon-grey icon-large icon-margin-right-xsmall">Your head is not an artifact!</span></p>
<p><span class="icon icon-globe icon-grey icon-large icon-margin-right-small">Your head is not an artifact!</span></p>
<p><span class="icon icon-globe icon-grey icon-large icon-margin-right-medium">Your head is not an artifact!</span></p>
<p><span class="icon icon-globe icon-grey icon-large icon-margin-left-xxsmall">Your head is not an artifact!</span></p>
<p><span class="icon icon-globe icon-grey icon-large icon-margin-left-xsmall">Your head is not an artifact!</span></p>
<p><span class="icon icon-globe icon-grey icon-large icon-margin-left-small">Your head is not an artifact!</span></p>
<p><span class="icon icon-globe icon-grey icon-large icon-margin-left-medium">Your head is not an artifact!</span></p>
```

#### Icon colors

You can change the color of your icon with `icon-<color-name>` and the color when you hover it with `icon-<color-name> hover`.

| Class |
|-------|
| icon-primary|
| icon-primary hover |
| icon-secondary
| icon-secondary hover |
| icon-third|
| icon-third hover |
| icon-heading|
| icon-heading hover |
| icon-white|
| icon-grey|

![Examples of icon's colors](images/icon-color.png)

```html
<span class="icon icon-bag icon-primary icon-xlarge"></span>
<span class="icon icon-camera icon-secondary icon-xlarge"></span>
<span class="icon mdi-atom icon-third icon-xlarge"></span>
<span class="icon ci-code icon-heading icon-xlarge"></span>
<span class="bg-color-heading"><span class="icon mdi-check icon-white icon-xlarge"></span></span>
<span class="icon ci-hat icon-grey icon-xlarge"></span>
```

### Form

--------

Use `form` to make form elements easy to override with the following utilities.
We have added basic form styles for the :

form element types:

- input[type='email']
- input[type='text']
- input[type='url']
- input[type='password']
- textarea
- input[type='email']:required, input[type='text']:required, input[type='url']:required, input[type='password']:required, textarea:required
- input[type='email']:invalid, input[type='text']:invalid, input[type='url']:invalid, input[type='password']:invalid, textarea:invalid
- label's input

```html
  <div class="form">
    <input type="email" name="" id="">
  </div>
  or
  <div class="form">
    <input type="text" name="" id="">
  </div>
  or
  <div class="form">
    <input type="url" name="" id="">
  </div>
  or
  <div class="form">
    <input type="password" name="" id="">
  </div>
```

![Example of a form's input without any style](images/input-basic.png)

```html
  <div class="form">
    <input type="email" required name="" id="">
  </div>
  or
  <div class="form">
    <input type="text" required name="" id="">
  </div>
  or
  <div class="form">
    <input type="url" required name="" id="">
  </div>
  or
  <div class="form">
    <input type="password" required name="" id="">
  </div>
```

![Example of a form's input when required](images/input-required.png)

```html
  <div class="form">
    <input type="email" invalid name="" id="">
  </div>
  or
  <div class="form">
    <input type="text" invalid name="" id="">
  </div>
  or
  <div class="form">
    <input type="url" invalid name="" id="">
  </div>
  or
  <div class="form">
    <input type="password" invalid name="" id="">
  </div>
```

![Example of a form's input when invalid](images/input-invalid.png)

```html
<div class="form">
  <textarea name="" id=""></textarea>
</div>
```

![Example of a form's textarea](images/textarea-basic.png)

```html
<div class="form">
  <textarea required name="" id=""></textarea>
</div>
```

![Example of a form's textarea when required](images/textarea-required.png)

Orbit's widgets:

- orbit-status
- solid-form-date-label
![Example of a solid-form-date element](images/solid-form-date-label.png)

- solid-form-dropdown-autocompletion-label and solid-form-dropdown-autocompletion
![Example of a solid-form-dropdown-autocompletion with a label when closed](images/solid-form-dropdown-autocompletion-label-closed.png)
![Example of a solid-form-dropdown-autocompletion with a label when opened](images/solid-form-dropdown-autocompletion-label-open.png)

- solid-form-multipleselect-autocompletion-label and solid-form-multipleselect-autocompletion
![Example of a solid-form-multipleselect-autocompletion closed](images/solid-form-multipleselect-autocompletion-label-closed.png)
![Example of a solid-form-multipleselect-autocompletion opened](images/solid-form-multipleselect-autocompletion-label-open.png)
![Example of a solid-form-multipleselect-autocompletion with a value](images/solid-form-multipleselect-autocompletion-values.png)

- solid-form-placeholder-dropdown
![Example of a solid-form-placeholder-dropdown closed](images/solid-form-placeholder-dropdown-closed.png)

- solid-form-richtext-label
![example of a solid-form-richtext with a label](images/solid-form-richtext-label.png)

#### Search field

You can add a magnify icon inside the input field by adding `icon icon-magnify` to the Orbit's widget.

```html
<solid-form-placeholder-text class="icon icon-magnify"></solid-form-placeholder-text>
```

![Example of a search field](images/search-field.png)

#### Adding a user

Works with solid-form-dropdown-autocompletion-label and
solid-form-dropdown-autocompletion.
Use `add-member` when you want the select field to take up half the space and the button to add members is right next to it.

```html
<solid-form-dropdown-autocompletion class="add-member"></solid-form-dropdown-autocompletion>
```

![Example of a solid-form-autocompletion to add a member](images/add-member.png)

#### Background

You can add a white background to a field.
Use `input-bg-white` to style an input.
Use `select-bg-white` to style a select.

```html
<solid-form-placeholder-text class="input-bg-white icon icon-magnify"></solid-form-placeholder-text>
```

![Example of an input with a white background and a magnify icon](images/input-bg-white.png)

#### Shadow

You can add a shadow to a field.
Use `input-shadow` to style an input.
Use `select-shadow` to style a select.

```html
<solid-form-placeholder-text class="input-shadow input-bg-white icon icon-magnify"></solid-form-placeholder-text>
```

![Example of an input with a white background, a magnify icon and a shadow](images/input-shadow.png )

### Typography

--------

#### Font Size

Utilities for controlling the font size of an element.
The basic font size is 14px and the basic line-height is 16px.

| Class | Properties |
|-------|------------|
| text-xsmall | font-size: 12px;<br>line-height: 14px; |
| text-small | font-size: 13px;<br>line-height: 15px; |
| text-medium | font-size: 14px;<br>line-height: 16px; |
| text-large | font-size: 15px;<br>line-height: 17px; |
| text-xlarge | font-size: 16px;<br>line-height: 18px; |
| text-xxlarge | font-size: 18px;<br>line-height: 20px; |

![Examples of text with different font sizes](images/text-font-size.png)

```html
  <p class="text-xsmall">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
  <p class="text-small">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
  <p class="text-medium">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
  <p class="text-large">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
  <p class="text-xlarge">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
  <p class="text-xxlarge">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
```

#### Font Weight

Utilities for controlling the font weight of an element.

| Class |
|-------|
| text-normal |
| text-semibold |
| text-bold |

![Examples of text with different font weights](images/text-font-weight.png)

```html
  <p class="text-normal">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
  <p class="text-semibold">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
  <p class="text-bold">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
```

#### Alignment

Utilities for controlling the horizontal and vertical alignment of text.

| Class |
|-------|
| text-center |
| sm-text-center (To center text only on small screens.)|
| text-right |
| text-left |
| text-top |
| text-sub |
| text-top-align |

![Exemples of text with different alignments](images/text-alignment.png)

```html
  <p class="text-letter-spacing-large">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
  <p class="text-letter-spacing-larger">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
  <p class="text-left">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
  <span>
    we are but simple travelers who seek the enchanter who lives beyond these wood <span class="text-top">1</span>
  </p>
  <span>
    we are but simple travelers who seek the enchanter who lives beyond these wood <span class="text-sub">2</span>
  </p>
  <span>
    we are but simple travelers who seek the enchanter who lives beyond these wood <span class="text-top-align">3</span>
  </p>
```

#### Letter spacing

Utilities for controlling the spacing of the text.
You can increase the space between letters.

| Class |
|-------|
| text-letter-spacing-large |
| text-letter-spacing-larger |

![Examples of text with different letter spacing](images/text-spacing.png)

```html
  <p class="text-letter-spacing-large">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
  <p class="text-letter-spacing-larger">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
```

#### Effects

With these utilities you can add some effects to your texts.

| Class |
|-------|
| text-uppercase |
| text-underline |

![Examples with text-upparcase and text-underline](images/text-effect.png)

```html
  <p class="line-xlarge">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
  <p class="text-underline">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
```

#### Line height

Utilities to increase the line height of your text.

| Class |
|-------|
| line-xlarge |

![Exemple of text with the class line-xlarge](images/text-line-height.png)

```html
<p class="line-xlarge">
  Well, she turned me into a newt. The Lady of the Lake, her arm clad in the purest shimmering samite, held aloft Excalibur from the bosom of the water, signifying by divine providence that I, Arthur, was to carry Excalibur. That is why I am your king.
</p>
```

#### Word spacing

Utilities to add space to the left or right of your text.

| Class |
|-------|
| word-spacing-left |
| word-spacing-right |

![Example of text with differnt word spacing](images/text-word-spacing.png)

```html
  <p>
    Sam<span class="word-spacing-left word-spacing-right">-</span>Sam is admin
  </p>
  <p>
    Sam<span>-</span>Sam is admin
  </p>
```

#### Text select

You can control whether the user can select text.

| Class | Properties |
|-------|------------|
| text-disable-selection | user-select: none; |

![Example of text with text selection disabled](images/text-select-none.png)

```html
  <p>
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
  <p class="text-disable-selection">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
```

### Shadows

--------

Utilities to add a shadow to an element.

| class |
|-------|
| shadow |
| shadow-small |
| shadow-large |

![Examples of an elemnt with different shadows](images/shadow.png)

```html
  <div class="shadow"></div>
  <div class="shadow-small"></div>
  <div class="shadow-large"></div>
```

### Loaders

--------

Use `loader` to stylize a loader.
Add `loader-top` if you want to position it 30px higher.
Add `loader-menu` if you need a smaller version, like in a menu.

![Example of a loader](images/loader.png)
![Example of a loader for menu](images/loader-menu.png)

```html
  <div class="loader">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="loader loader-menu">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
```

### Colors

--------

#### Selection color

You can change the background color of the pseudo-element '::selection' by adding `selection-background`. It will use the color defined in the "--color-third" variable.

![Example of a text with another background when it is selected](images/text-select-none.png)

```html
  <p class="selection-background">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
  <p>
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
```

#### Background colors

Utilities to change the background color of an element. Use `bg-color-<color-name>`.
You can change the background color when this element is active or hover. Use `bg-color-<color-name> active` or `bg-color-<color-name> hover`.
You can reverse the color too. Use `bg-color-<color-name> reverse`.
Those additional colors will depend of the chosen basis color.

| Class | Properties |
|-------|------------|
| bg-color-primary | background-color: var(--color-primary); |
| bg-color-primary active | background-color: var(--color-secondary); |
| bg-color-primary hover | background-color: #202B3C; |
| bg-color-primary reverse | background-color: var(--color-secondary); |
| bg-color-secondary | background-color: var(--color-secondary); |
| bg-color-secondary active | background-color: var(--color-primary); |
| bg-color-secondary hover | background-color: #202B3C; |
| bg-color-secondary reverse | background-color: var(--color-primary); |
| bg-color-third | background-color: var(--color-third); |
| bg-color-third active| background-color: var(--color-heading); |
| bg-color-third hover | background-color: #202B3C; |
| bg-color-third reverse | background-color: var(--color-heading); |
| bg-color-heading | background-color: var(--color-heading); |
| bg-color-heading active | background-color: var(--color-third); |
| bg-color-heading hover | background-color: #202B3C; |
| bg-color-heading reverse | background-color: var(--color-third); |
| bg-color-white | background: white; |
| bg-color-grey | background: #F6F6F6; |

![Exemple of an element with a primary colored background unreversed and reversed](images/bg-color-primary.png)

```html
  <div class="bg-color-primary"></div>
  <div class="bg-color-primary reverse"></div>
```

![Exemple of an element with a secondary colored background unreversed and reversed](images/bg-color-secondary.png)

```html
  <div class="bg-color-secondary"></div>
  <div class="bg-color-secondary reverse"></div>
```

![Exemple of an element with a third colored background unreversed and reversed](images/bg-color-third.png)

```html
  <div class="bg-color-third"></div>
  <div class="bg-color-third reverse"></div>
```

![Exemple of an element with a heading colored background unreversed and reversed](images/bg-color-heading.png)

```html
  <div class="bg-color-heading"></div>
  <div class="bg-color-heading reverse"></div>
```

![Exemple of an element with a white colored background and a grey colored background](images/bg-color-white-grey.png)

```html
  <div background-color: gray;"><div class="bg-color-white"></div></div>
  <div class="bg-color-grey"></div>
```

#### Text colors

Utilities to change the text color. Use `text-color-<color-name>`.
You can change the color when this element is active. Use `text-color-<color-name> active`.
You can reverse the color too. Use `text-color-<color-name> reverse`.
Those additional colors will depend of the chosen basis color.
And you can change the text color when you hover it with a fixed color. Use `text-hover`.

| Class | Properties |
|-------|------------|
| text-color-primary  | color: var(--color-primary); |
| text-color-primary active:active | color: var(--color-secondary); |
| text-color-primary reverse | color: var(--color-secondary); |
| text-color-secondary  | color: var(--color-secondary); |
| text-color-secondary active:active | color: var(--color-primary); |
| text-color-secondary reverse | color: var(--color-primary); |
| text-color-third  | color: var(--color-third); |
| text-color-third active:active | color: var(--color-heading); |
| text-color-third reverse | color: var(--color-heading); |
| text-color-heading  | color: var(--color-heading); |
| text-color-heading active:active | color: white; |
| text-color-heading reverse | color: var(--color-third); |
| text-color-white | color: white; |
| text-color-white heading-active | color: var(--color-heading); |
| text-hover:hover | color: var(--color-secondary); |

![Examples of text coloured with primary colour, primary colour with :active pseudo-class, and primary colour reversed](images/text-color-primary.png)

```html
  <p class="text-color-primary">I'm normally not a praying man, but if you're up there, please save me, Superman.</p>
  <p class="text-color-primary active" active>A text with the attribute :active</p>
  <p class="text-color-primary reverse">I'm normally not a praying man, but if you're up there, please save me, Superman.</p>
```

![Examples of text coloured with secondary colour, secondary colour with :active pseudo-class, and secondary colour reversed](images/text-color-secondary.png)

```html
  <p class="text-color-secondary">I'm normally not a praying man, but if you're up there, please save me, Superman.</p>
  <p class="text-color-secondary active" active>A text with the attribute :active</p>
  <p class="text-color-secondary reverse">I'm normally not a praying man, but if you're up there, please save me, Superman.</p>
```

![Examples of text coloured with third colour, third colour with :active pseudo-class, and third colour reversed](images/text-color-third.png)

```html
  <p class="text-color-third">I'm normally not a praying man, but if you're up there, please save me, Superman.</p>
  <p class="text-color-third active" active>A text with the attribute :active</p>
  <p class="text-color-third reverse">I'm normally not a praying man, but if you're up there, please save me, Superman.</p>
```

![Examples of text coloured with heading colour, heading colour with :active pseudo-class, and heading colour reversed](images/text-color-heading.png)

```html
  <p class="text-color-heading">I'm normally not a praying man, but if you're up there, please save me, Superman.</p>
  <p class="text-color-heading active" active>A text with the attribute :active</p>
  <p class="text-color-heading reverse">I'm normally not a praying man, but if you're up there, please save me, Superman.</p>
```

![Examples of text coloured in white, and coloured with the heading colour when the :active pseudo-class is up](images/text-color-white.png)

```html
  <p class="text-color-white">I'm normally not a praying man, but if you're up there, please save me, Superman.</p>
  <p class="text-color-white heading-active" active>A text with the attribute :active</p>
```

![Example of a text hovered over with the text-hover class](images/text-color-hover.png)

```html
  <p class="text-hover">A text hovered over</p>
```

### Borders

--------

Utilities for controlling an element's borders.

#### Widths and styles

| Class | Properties |
|-------|------------|  
| border-all-sides | border: 1px solid; |
| border-top | border-top: 1px solid; |
| border-right | border-right: 1px solid; |
| border-bottom | border-bottom: 1px solid; |
| border-left | border-left: 1px solid; |
| border-thick | border-width: thick; |
| border-rounded-xxsmall |

#### Border colors

| class |
|-------|
| border-color-primary |
| border-color-secondary |
| border-color-third |
| border-color-heading |
| border-color-grey |

![Example with border coloured with primary colour on all sides of an element](images/border-all-sides.png)

```html
  <div class="border-all-sides border-color-primary">
    <p>All-sides border with primary color</p>
  </div>
```

![Example with border coloured with secondary colour on the left side of an element](images/border-left-side.png)

```html
  <div class="border-left border-color-secondary">
    <p>Left-side border with secondary color</p>
  </div>
```

![Example with border coloured with third colour on the bottom side of an element](images/border-bottom-side.png)

```html
  <div class="border-bottom border-color-third">
    <p>Bottom-side border with third color</p>
  </div>
```

![Example with border coloured with heading colour on the right side of an element](images/border-right-side.png)

```html
  <div class="border-right border-color-heading">
    <p>Right-side border with heading color</p>
  </div>
```

![Example with border coloured with gray colour on all sides of an element](images/border-all-sides-gray.png)

```html
  <div class="border-all-sides border-color-grey">
    <p>All-sides border with gray color</p>
  </div>
```

![Example with border slightly rounded and coloured with secondary colour on all sides of an element](images/border-all-sides-rounded.png)

```html
  <div class="border-all-sides border-color-secondary border-rounded-xxsmall">
    <p>All-sides border with secondary color and slightly rounded edges</p>
  </div>
```

### Cursors

--------

Utility for controlling the cursor style when hovering over an element.

| Class |
|-------|
|cursor-pointer |

![Example of an element with the cursor set to pointer](images/cursor-pointer.png)

```html
  <div class="border-all-sides border-color-secondary cursor-pointer">
    <p>All-sides border with secondary color</p>
  </div>
```

### Hidding element

--------

Utility to hide an element.

| Class | Properties |
|-------|------------|
| hidden | display: none !important; |

```html
  <div class="hidden">
    <p>Hidden element</p>
  </div>
```

### Buttons

--------

Add `button` to style an element.
You can round a button with `button rounded`.
You can add and stylize and icon with `button icon`.

#### Texts

Utilities to stylize a text inside a button.

| Class | Properties |
|-------|------------|
| button text-semibold |
| button text-bold |
| button text-uppercase |

#### Button colors

With these utilities you can set the background color to white and add a border and set the text color accordingly.
Add `reversed` if you want a colored background and white border and text.

| Class |
|-------|
| button color-primary |
| button color-primary bordered |
| button color-secondary |
| button color-secondary bordered |
| button color-third |
| button color-third bordered |

![Example of a button coloured with primary colour, text uppercase and bold](images/button-1.png)
![Example of a button coloured with primary colour, text uppercase and bold, hovered over](images/button-1-hover.png)

```html
<button class="button color-primary bordered text-uppercase text-bold">Join the project</button>
```

![Example of a button coloured with third colour](images/button-reversed.png)
![Example of a button coloured with third colour, hovered over](images/button-reversed-hover.png)

```html
<button class="button reversed color-third bordered">Quit the project</button>
```

![Example of a rounded button coloured with secondary colour and an icon](images/button-rounded.png)
![Example of a rounded button coloured with secondary colour and an icon hovered over](images/button-rounded-hover.png)

```html
<solid-link class="button rounded rounded-icon icon-pencil reversed color-secondary bordered"></solid-link>
```

#### Disabled button

Utilities to prevent users from clicking on an element. They give visual indications.
The colors will reverse as you hover over this element.

| Class | Properties |
|-------|------------|
| color-disabled |
| color-disabled bordered |

![Example of a disabled button](images/button-disabled.png)
![Example of a disabled button hovered over](images/button-disabled-hover.png)

```html
<button class="button color-disabled bordered">Join the project</button>
```

![Example of a disabled button with reversed colours](images/button-disabled-reversed.png)
![Example of a disabled button with reversedccolours hovered over](images/button-disabled-reversed-hover.png)

```html
<button class="button color-disabled bordered reversed">Join the project</button>
```

#### Children elements

Utilities for adding styles to an element within another.
Simply replace `button` with `children-link-button` to add the basis styles.
With `children-link-rounded` you can round this element.
With `children-link-icon` you can add and stylize an icon.

| Class |
|-------|
| children-link-text-semibold |
| children-link-text-bold |
| children-link-text-uppercase |
| children-link-color-primary |
| children-link-color-primary bordered |
| children-link-color-secondary |
| children-link-color-secondary bordered |
| children-link-color-third |
| children-link-color-third bordered |
| children-link-reversed color-primary |
| children-link-reversed color-primary bordered |
| children-link-reversed color-secondary |
| children-link-reversed color-secondary bordered |
| children-link-reversed color-third |
| children-link-reversed color-third bordered |
| children-link-reversed color-disabled |
| children-link-reversed color-disabled bordered |

![Example of a rounded button coloured with secondary colour applied to a child element](images/button-children-rounded.png)
![Example of a rounded button coloured with secondary colour applied to a child element and hovered over](images/button-children-rounded-hover.png)

```html
<solid-action label="" class="children-link-rounded children-icon-speech children-link-reversed color-secondary bordered">
  <solid-link></solid-link>
</solid-action>
```

![Example of a button coloured with secondary colour applied to a child element](images/button-children-sm.png)
![Example of a button coloured with secondary colour applied to a child element and hovered over](images/button-children-sm-hover.png)

```html
<div class="segment sm-full text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-arrow-right-circle children-icon-small">
  <button type="submit">GO</button>
</div>
```

### Badges

--------

Utilities to style an element as a badge.
Use `badge` on the parent element and `counter` on the child element.
Its basis text color is set by `var(--color-heading)` and background color by `var(--color-third)`.
You can change colors with :

| Class |
|-------|
| counter color-primary |
| counter color-secondary |
| counter color-third |
| counter reversed color-primary |
| counter reversed color-secondary |
| counter reversed color-third |

![Examples of badges with different colours](images/badges.png)

```html
<div class="badge">
  <div class="counter">1</div>
</div>
<div class="badge">
  <div class="counter color-primary">1</div>
</div>
<div class="badge">
  <div class="counter color-secondary">1</div>
</div>
<div class="badge">
  <div class="counter color-third">1</div>
</div>
<div class="badge">
  <div class="counter color-heading">1</div>
</div>
```

![Examples of badges with different colours reversed](images/badges-reversed.png)

```html
<div class="badge">
  <div class="counter">1</div>
</div>
<div class="badge">
  <div class="counter color-primary reversed">1</div>
</div>
<div class="badge">
  <div class="counter color-secondary reversed">8</div>
</div>
<div class="badge">
  <div class="counter color-third reversed">2</div>
</div>
<div class="badge">
  <div class="counter color-heading reversed">7</div>
</div>
```

### Avatars

--------

Utilities to style an element like a rounded avatar.
Use `avatar`.
Its basis dimensions are `height: 50px;` and `width: 50px;`.
You can change the dimensions with thoses utilities:

| Class |
|-------|
| avatar xsmall |
| avatar small |
| avatar large |
| avatar xlarge |

![Examples of avatars with different sizes](images/avatars.png)

```html
  <div class="segment">
    <div class="avatar xsmall">
      <img src="/images/alien.png">
    </div>
  </div>
  <div class="segment">
    <div class="avatar small">
      <img src="/images/alien.png">
    </div>
  </div>
  <div class="segment">
    <div class="avatar">
      <img src="/images/alien.png">
    </div>
  </div>
  <div class="segment">
    <div class="avatar large">
      <img src="/images/alien.png">
    </div>
  </div>
  <div class="segment">
    <div class="avatar xlarge">
      <img src="/images/alien.png">
    </div>
  </div>
  ```

#### Labelled avatars

Use `labelled-avatar`.
If you element has two lines, use `labelled-avatar two-lines`.
Add `segment` to the first children (Beware that your two lines must have fieldsets named `[name='line1']` and `[name='line2']` respectively).

You can change the height according to the [avatar's height](#avatars).

| Class |
|-------|
|xsmall |
|small |
|large |
|xlarge |

If you want to display the communities, don't forget to name your fieldset `communities`.

![Examples of labelled avatars on one line with different sizes](images/avatar-labelled-one-line.png)

```html
<div class="labelled-avatar">
  <div class='segment'>
    <div class="avatar"><img src="/images/alien.png"></div>
  </div>
  <div class='segment'>
    <div>Dougal Keane</div>
  </div>
</div>

<div class="labelled-avatar small">
  <div class='segment'>
    <div class="avatar small"><img src="/images/alien.png"></div>
  </div>
  <div class='segment'>
    <div>Dougal Keane</div>
  </div>
</div>

<div class="labelled-avatar xsmall">
  <div class='segment margin-right-xsmall'>
    <div class="avatar xsmall"><img src="/images/alien.png"></div>
  </div>
  <div class='segment'>
    <div>Dougal Keane</div>
  </div>
</div>
```

![Examples of labelled avatars on two lines with different sizes](images/avatar-labelled-two-lines.png)

```html
<div class="labelled-avatar two-lines">
  <div class='segment'>
    <div class="avatar"><img src="/images/alien.png"></div>
  </div>
  <div class='segment'>
    <div>Dougal Keane</div>
    <div>Thief</div>
  </div>
</div>

<div class="labelled-avatar two-lines small">
  <div class='segment'>
    <div class="avatar small"><img src="/images/alien.png"></div>
  </div>
  <div class='segment'>
    <div>Dougal Keane</div>
    <div>Thief</div>
  </div>
</div>

<div class="labelled-avatar two-lines xsmall">
  <div class='segment margin-right-xsmall'>
    <div class="avatar xsmall"><img src="/images/alien.png"></div>
  </div>
  <div class='segment'>
    <div>Dougal Keane</div>
    <div>Thief</div>
  </div>
</div>
```

![Examples of labelled avatars on one line and on two lines with an icon](images/avatar-labelled-icon.png)

```html
<div class="labelled-avatar two-lines xsmall">
  <div class="segment">
    <div class="avatar xsmall"><img src="/images/alien.png"></div>
  </div>
  <div class="segment">
    <div class="text-small text-semibold text-color-heading">Dougal Keane</div>
    <div class="block text-xsmall">@dkeane</div>
  </div>
  <div class="segment">
    <solid-link class="icon icon-speech icon-small icon-secondary hover"></solid-link>
    <div>&nbsp;</div>
  </div>
</div>

<div class="labelled-avatar xsmall">
  <div class='segment'>
    <div class="avatar xsmall"><img src="/images/alien.png"></div>
  </div>
  <div class='segment'>
    <div class="text-small text-semibold text-color-heading">Dougal Keane</div>
  </div>
  <div class="segment">
    <solid-link class="icon icon-speech icon-small icon-secondary hover"></solid-link>
  </div>
</div>
```