90milesbridge Rainbow::Atoms

Atoms

Table of content

What are Atoms?

Navigation
- Buttons
- Links

Atoms are the very basic elements of the stylesheet. Imagine every single-class element or selector rules as an atom. Examples could be buttons, links, headlines, inputs ... you get it, right?

To mark an element as an atom, annotate it with the @atom tag, followed by the name of the component. Special atoms are @icons.

Navigation

Buttons

Button

Show example

Copy markup

Buttons for various purposes.

<div class="container">
    <button class="rainbow-button">
        <div class="rainbow-button-hover">
            default button
        </div>
    </button>
    <button class="rainbow-button rainbow-button--alert">
       <div class="rainbow-button-hover rainbow-button-hover--light">
            alert button
       </div>
    </button>
    <button class="rainbow-button rainbow-button--primary">
       <div class="rainbow-button-hover rainbow-button-hover--light">
            primary button
        </div>
    </button>
    <button class="rainbow-button rainbow-button--secondary">
       <div class="rainbow-button-hover rainbow-button-hover--light">
           secondary button
        </div>
    </button>
 <div>

Links

Link

Show example

Copy markup

Link for various purposes.

A link

<a class="rainbow-link" href="javascript:void(0)">A link</button>