npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@startinblox/orbit-styling-framework

v2.0.0

Published

Styling framework for Orbit

Downloads

45

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

beleniobeleniostartinbloxbotstartinbloxbotbalessanbalessanclem-sibclem-sibplupplupmatthieu.fmatthieu.fjbpasquierjbpasquier

Keywords

Readme

Orbit's CSS Framework

Documentation to install and to use the CSS framework in an application using Startin'blox.

How to install it in your app?

First, you need NPM and Sass installed. Then, go into your app's main folder and install the framework:

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:

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:

cd <my-app>

Then watch files with:

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

  <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

  <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

  <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

  <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

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

<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

<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

<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

<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:

<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 Example of padding on small screens

<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 Example with padding on a child element on small screens

<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 Example with différents padding on applied on different sides on small screens

<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 Example with différents padding on applied on different sides on a child element on small screens

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

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

Link

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

Example of a back link

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

Add link to have your link colored in blue.

Example of a link

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

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.

| 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

<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

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

Icon bold

Example of a bolded icon

<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

<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

<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

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

  <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

  <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

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

Example of a form's textarea

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

Example of a form's textarea when required

Orbit's widgets:

  • orbit-status

  • solid-form-date-label Example of a solid-form-date element

  • solid-form-dropdown-autocompletion-label and solid-form-dropdown-autocompletion Example of a solid-form-dropdown-autocompletion with a label when closed Example of a solid-form-dropdown-autocompletion with a label when opened

  • solid-form-multipleselect-autocompletion-label and solid-form-multipleselect-autocompletion Example of a solid-form-multipleselect-autocompletion closed Example of a solid-form-multipleselect-autocompletion opened Example of a solid-form-multipleselect-autocompletion with a value

  • solid-form-placeholder-dropdown Example of a solid-form-placeholder-dropdown closed

  • solid-form-richtext-label example of a solid-form-richtext with a label

Search field

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

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

Example of a search field

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.

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

Example of a solid-form-autocompletion to add a member

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.

<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

Shadow

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

<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

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;line-height: 14px; | | text-small | font-size: 13px;line-height: 15px; | | text-medium | font-size: 14px;line-height: 16px; | | text-large | font-size: 15px;line-height: 17px; | | text-xlarge | font-size: 16px;line-height: 18px; | | text-xxlarge | font-size: 18px;line-height: 20px; |

Examples of text with different font sizes

  <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

  <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

  <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

  <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

  <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

<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

  <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

  <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

  <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 Example of a loader for menu

  <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

  <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

  <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

  <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

  <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

  <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

  <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

  <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

  <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

  <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

  <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

  <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

  <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

  <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

  <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

  <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

  <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

  <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

  <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

  <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; |

  <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 Example of a button coloured with primary colour, text uppercase and bold, hovered over

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

Example of a button coloured with third colour Example of a button coloured with third colour, hovered over

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

Example of a rounded button coloured with secondary colour and an icon Example of a rounded button coloured with secondary colour and an icon hovered over

<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 Example of a disabled button hovered over

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

Example of a disabled button with reversed colours Example of a disabled button with reversedccolours hovered over

<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 Example of a rounded button coloured with secondary colour applied to a child element and hovered over

<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 Example of a button coloured with secondary colour applied to a child element and hovered over

<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

<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

<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

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

| 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

<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

<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

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