Exo v0.0.4

Exo is a minimal CSS framework for building simple but stylish single page web applications. It is licensed under the open source MIT license.

Exo provides a class based system for defining colors, layouts, icons from the material design icon set, custom styled input controls, and more...

This page provides example-based documentation for Exo.

Contents

Examples

For some demo pages that use exo, see:

Installing Exo

To try the latest Exo CSS, simply add the following html5 code to your document's <head>: 



<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<link href="exo.css" rel="stylesheet" type="text/css">

Optional, if using exo-icons, add the following html5 code to your document's <head>: 



<link href="exo-icons.css" rel="stylesheet" type="text/css">

Optional, if using exo HTML custom elements (see below), add the following html5 code to your document's <head>: 



<script src="exo.js" type="text/javascript"></script>

To use a particular version of Exo, substitute its version number for latest in the URLs above.

To use Exo in your own project, select and download a release from the Exo releases page.

Simple Row/Cell Layout based on CSS flexbox

To style a page (center and limit width to 1280 pixels) add class exo-container to your document's body.

Exo supplies a CSS-flexbox based system for laying out rows composed of fixed (128px) width cells: 


<div class="exo-row">
    <div class="exo-1-cell exo-dark-red-bg exo-white-fg">
        Lorem ipsum dolor sit amet, consectetur
        adipiscing elit.
    </div>
    <div class="exo-2-cell exo-dark-purple-bg exo-white-fg">
        Lorem ipsum dolor sit amet, consectetur
        adipiscing elit. Aenean euismod, leo sed
        imperdiet ullamcorper, augue lectus gravida
        felis, quis facilisis mi tortor eu justo.
    </div>
    <div class="exo-1-cell exo-dark-gray-bg exo-white-fg">
        Lorem ipsum dolor sit amet, consectetur
        adipiscing elit.
    </div>
</div>
<div class="exo-row">
    <div class="exo-2-cell exo-dark-green-bg exo-white-fg">
        Lorem ipsum dolor sit amet, consectetur
        adipiscing elit. Aenean euismod, leo sed
        imperdiet ullamcorper, augue lectus gravida
        felis, quis facilisis mi tortor eu justo.
    </div>
    <div class="exo-1-cell"></div>
    <div class="exo-1-cell exo-dark-blue-bg exo-white-fg">
        Lorem ipsum dolor sit amet, consectetur
        adipiscing elit.
    </div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod, leo sed imperdiet ullamcorper, augue lectus gravida felis, quis facilisis mi tortor eu justo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod, leo sed imperdiet ullamcorper, augue lectus gravida felis, quis facilisis mi tortor eu justo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
For more details on row/cell layouts see layout examples.

Hero


<div class="exo-hero exo-rounded exo-border"
     
 style="background-image: url('../../images/banner.jpg');">
    Hero
    <h5>
        Grab attention!
    </h5>
</div>
Hero
Grab attention!

Tabs

Exo offers a tab-like system for structuring pages - tab buttons are displayed in an area above a content window that displays the selected tab. On narrow screens, the tabs are drawn in a collapsable menu. Note that there are a maximum of 12 tabs defined in the CSS - customise exo.css (search for "extend tab limit") if more are required. 

<input aria-hidden="true" type="checkbox"
     id="nm1">
<label aria-hidden="true" class="exo-tabs-open exo-button exo-icon exo-icon-medium exo-icon-menu"
     for="nm1"/>
<label aria-hidden="true" class="exo-tabs-close exo-button exo-rounded exo-icon exo-icon-medium exo-icon-clear"
     for="nm1"/>
<br>
<input aria-hidden="true" type="radio" name="g2"
     id="ncontent-a1" checked="checked">
<label aria-hidden="true" class="exo-tabs-item exo-white-bg"
     for="ncontent-a1" tabindex="-1">
    Tab 1
</label>
<input aria-hidden="true" type="radio" name="g2"
     id="ncontent-a2">
<label aria-hidden="true" class="exo-tabs-item exo-white-bg"
     for="ncontent-a2" tabindex="-1">
    Tab 2
</label>
<input aria-hidden="true" type="radio" name="g2"
     id="ncontent-a3">
<label aria-hidden="true" class="exo-tabs-item exo-white-bg"
     for="ncontent-a3" tabindex="-1">
    Tab 3
</label>
<div class="exo-tabs-content">
    <section>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
        et dolore magna aliqua.
    </section>
    <section>
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
    </section>
    <section>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
        anim id est laborum.
    </section>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Cards


<div class="exo-card exo-white-fg exo-dark-orange-bg">
    <img src="../../images/banner.jpg" class="exo-card-header">
    <h4>
        Card 1
    </h4>
    <div class="exo-card-content">
        Lorem ipsum dolor sit amet, consectetur
        adipiscing elit. Aenean euismod, leo sed
        imperdiet ullamcorper, augue lectus gravida
        felis, quis facilisis mi tortor eu justo.
    </div>
    <div class="exo-button exo-white-bg"
         role="button">
        <a href="" target="_blank">
            More Information...
        </a>
    </div>
    <div class="exo-card-footer exo-dark-gray-bg exo-small">
        Footer 1
    </div>
</div>
<div class="exo-card exo-white-fg exo-dark-red-bg">
    <img src="../../images/banner.jpg" class="exo-card-header">
    <h4>
        Card 2
    </h4>
    <div class="exo-card-content">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
    </div>
    <div class="exo-button exo-white-bg"
         role="button">
        <a href="" target="_blank">
            More Information...
        </a>
    </div>
    <div class="exo-card-footer exo-dark-gray-bg exo-small">
        Footer 2
    </div>
</div>
<div class="exo-card exo-white-fg exo-dark-green-bg">
    <img src="../../images/banner.jpg" class="exo-card-header">
    <h4>
        Card 3
    </h4>
    <div class="exo-card-content">
        Lorem ipsum.
    </div>
    <div class="exo-button exo-white-bg"
         role="button">
        <a href="" target="_blank">
            More Information...
        </a>
    </div>
    <div class="exo-card-footer exo-dark-gray-bg exo-small">
        Footer 3
    </div>
</div>
<div class="exo-card exo-white-fg exo-dark-purple-bg">
    <img src="../../images/banner.jpg" class="exo-card-header">
    <h4>
        Card 4
    </h4>
    <div class="exo-card-content">
        Lorem ipsum.
    </div>
    <div class="exo-button exo-white-bg"
         role="button">
        <a href="" target="_blank">
            More Information...
        </a>
    </div>
    <div class="exo-card-footer exo-dark-gray-bg exo-small">
        Footer 4
    </div>
</div>

Card 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod, leo sed imperdiet ullamcorper, augue lectus gravida felis, quis facilisis mi tortor eu justo.
More Information...
Footer 1

Card 2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
More Information...
Footer 2

Card 3

Lorem ipsum.
More Information...
Footer 3

Card 4

Lorem ipsum.
More Information...
Footer 4

<input aria-hidden="true" type="radio" name="cg2"
     id="cg-a1" checked="" class="exo-dark-orange-bg">
<input aria-hidden="true" type="radio" name="cg2"
     id="cg-a2" class="exo-dark-orange-bg">
<input aria-hidden="true" type="radio" name="cg2"
     id="cg-a3" class="exo-dark-orange-bg">
<input aria-hidden="true" type="radio" name="cg2"
     id="cg-a4" class="exo-dark-orange-bg">
<input aria-hidden="true" type="radio" name="cg2"
     id="cg-a5" class="exo-dark-orange-bg">
<div class="exo-carousel-content exo-light-blue-bg">
    <div class="exo-rounded exo-carousel-item">
        <label for="cg-a5" class="exo-icon exo-icon-navigate-before exo-white-bg"/>
        <div class="exo-card exo-white-fg exo-dark-orange-bg">
            <img src="../../images/infrared.png">
            <h4>
                Thermal
            </h4>
        </div>
        <label for="cg-a2" class="exo-icon exo-icon-navigate-next exo-white-bg"/>
    </div>
    <div class="exo-rounded exo-carousel-item">
        <label for="cg-a1" class="exo-icon exo-icon-navigate-before exo-white-bg"/>
        <div class="exo-card exo-white-fg exo-dark-orange-bg">
            <img src="../../images/olci_chlorophyll.png">
            <h4>
                OLCI Chlorophyll
            </h4>
        </div>
        <label for="cg-a3" class="exo-icon exo-icon-navigate-next exo-white-bg"/>
    </div>
    <div class="exo-rounded exo-carousel-item">
        <label for="cg-a2" class="exo-icon exo-icon-navigate-before exo-white-bg"/>
        <div class="exo-card exo-white-fg exo-dark-orange-bg">
            <img src="../../images/olci_truecolor.png">
            <h4>
                OLCI True Colour
            </h4>
        </div>
        <label for="cg-a4" class="exo-icon exo-icon-navigate-next exo-white-bg"/>
    </div>
    <div class="exo-rounded exo-carousel-item">
        <label for="cg-a3" class="exo-icon exo-icon-navigate-before exo-white-bg"/>
        <div class="exo-card exo-white-fg exo-dark-orange-bg">
            <img src="../../images/map.png">
            <h4>
                Google Map
            </h4>
        </div>
        <label for="cg-a5" class="exo-icon exo-icon-navigate-next exo-white-bg"/>
    </div>
    <div class="exo-rounded exo-carousel-item">
        <label for="cg-a4" class="exo-icon exo-icon-navigate-before exo-white-bg"/>
        <div class="exo-card exo-white-fg exo-dark-orange-bg">
            <img src="../../images/slstr_falsecolor.png">
            <h4>
                SLSTR False Colour
            </h4>
        </div>
        <label for="cg-a1" class="exo-icon exo-icon-navigate-next exo-white-bg"/>
    </div>
    <div class="exo-dark-gray-fg">
        Images Copyright (c)
        <a href="https://ovl.oceandatalab.com"
             target="_blank">
            ESA, OceanDataLab
        </a>
        and
        <a href="https://maps.google.com"
             target="_blank">
            Google Maps
        </a>
    </div>
</div>

Thermal

OLCI Chlorophyll

OLCI True Colour

Google Map

SLSTR False Colour

Images Copyright (c) ESA, OceanDataLab and Google Maps

Summary / Details


<details>
    <summary class="exo-light-orange-bg">
        Details
    </summary>
    <p class="exo-padding">
        Lorem ipsum dolor sit amet, consectetur
        adipiscing elit. Aenean euismod, leo sed
        imperdiet ullamcorper, augue lectus gravida
        felis, quis facilisis mi tortor eu justo.
    </p>
</details>
Details

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod, leo sed imperdiet ullamcorper, augue lectus gravida felis, quis facilisis mi tortor eu justo.


<ul>
    <li role="treeitem">
        <input type="checkbox" aria-hidden="true">
        <label>
            File 1
        </label>
        <div class="exo-light-gray-bg">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </li>
    <li role="treeitem">
        <input type="checkbox" checked="checked"
             aria-hidden="true">
        <label>
            Folder 1
        </label>
        <ul>
            <li role="treeitem">
                <div class="exo-light-brown-bg">
                    Lorem ipsum.
                </div>
            </li>
            <li role="treeitem">
                <input type="checkbox" aria-hidden="true">
                <label>
                    Folder 2
                </label>
                <ul>
                    <li role="treeitem">
                        <input type="checkbox"
                             aria-hidden="true">
                        <label>
                            File 2
                        </label>
                        <div class="exo-light-green-bg">
                            Lorem ipsum.
                        </div>
                    </li>
                    <li role="treeitem">
                        <input type="checkbox"
                             aria-hidden="true">
                        <label>
                            File 3
                        </label>
                        <div class="exo-light-blue-bg">
                            Lorem ipsum.
                        </div>
                    </li>
                    <li role="treeitem">
                        <input type="checkbox"
                             disabled
                             aria-hidden="true">
                        <label>
                            Empty File
                        </label>
                        <div class="exo-light-blue-bg">
                            Lorem ipsum.
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Lorem ipsum.
      • Lorem ipsum.
      • Lorem ipsum.
      • Lorem ipsum. 

<input type="checkbox" id="modal1">
<label for="modal1" class="exo-button exo-dark-gray-bg exo-white-fg">
    More Info
</label>
<div class="exo-modal-window">
    <div class="exo-modal-window-content exo-white-fg exo-dark-gray-bg">
        <div>
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Aenean euismod, leo sed
            imperdiet ullamcorper, augue lectus gravida
            felis, quis facilisis mi tortor eu justo.
        </div>
        <label for="modal1">
            <span tabindex="-1" class="exo-icon exo-modal-close exo-white"/>
        </label>
    </div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod, leo sed imperdiet ullamcorper, augue lectus gravida felis, quis facilisis mi tortor eu justo.

Conditional


<label>
    Home or help
    <span class="exo-conditional">
        <input type="checkbox">
        <span class="exo-button exo-conditional-true">
            <span class="exo-icon exo-icon-inline exo-icon-large exo-icon-home"/>
        </span>
        <span class="exo-button exo-conditional-false">
            <span class="exo-icon exo-icon-inine exo-icon-large exo-icon-help"/>
        </span>
    </span>
</label>

Colours

Colours are used to assign a background and are divided into dark and light. Dark colors are used with a white foreground color and light colors are used with a black foreground color. To apply a background color to an element, add class exo-COLOUR or exo-light-COLOUR.

Dark Foreground Colours


<div class="exo-dark-orange-fg">
    exo-dark-orange-fg
</div>
<div class="exo-dark-red-fg">
    exo-dark-red-fg
</div>
<div class="exo-dark-blue-fg">
    exo-dark-blue-fg
</div>
<div class="exo-dark-purple-fg">
    exo-dark-purple-fg
</div>
<div class="exo-dark-green-fg">
    exo-dark-green-fg
</div>
<div class="exo-dark-brown-fg">
    exo-dark-brown-fg
</div>
<div class="exo-dark-gray-fg">
    exo-dark-gray-fg
</div>
<div class="exo-dark-pink-fg">
    exo-dark-pink-fg
</div>
<div class="exo-dark-yellow-fg">
    exo-dark-yellow-fg
</div>
exo-dark-orange-fg
exo-dark-red-fg
exo-dark-blue-fg
exo-dark-purple-fg
exo-dark-green-fg
exo-dark-brown-fg
exo-dark-gray-fg
exo-dark-pink-fg
exo-dark-yellow-fg

Light Foreground Colours


<div class="exo-light-orange-fg">
    exo-light-orange-fg
</div>
<div class="exo-light-red-fg">
    exo-light-red-fg
</div>
<div class="exo-light-blue-fg">
    exo-light-blue-fg
</div>
<div class="exo-light-purple-fg">
    exo-light-purple-fg
</div>
<div class="exo-light-green-fg">
    exo-light-green-fg
</div>
<div class="exo-light-brown-fg">
    exo-light-brown-fg
</div>
<div class="exo-light-gray-fg">
    exo-light-gray-fg
</div>
<div class="exo-light-yellow-fg">
    exo-light-yellow-fg
</div>
<div class="exo-light-pink-fg">
    exo-light-pink-fg
</div>
exo-light-orange-fg
exo-light-red-fg
exo-light-blue-fg
exo-light-purple-fg
exo-light-green-fg
exo-light-brown-fg
exo-light-gray-fg
exo-light-yellow-fg
exo-light-pink-fg

Dark Background Colours


<div class="exo-dark-orange-bg">
    exo-dark-orange-bg
</div>
<div class="exo-dark-red-bg">
    exo-dark-red-bg
</div>
<div class="exo-dark-blue-bg">
    exo-dark-blue-bg
</div>
<div class="exo-dark-purple-bg">
    exo-dark-purple-bg
</div>
<div class="exo-dark-green-bg">
    exo-dark-green-bg
</div>
<div class="exo-dark-brown-bg">
    exo-dark-brown-bg
</div>
<div class="exo-dark-gray-bg">
    exo-dark-gray-bg
</div>
<div class="exo-dark-pink-bg">
    exo-dark-pink-bg
</div>
<div class="exo-dark-yellow-bg">
    exo-dark-yellow-bg
</div>
<div class="exo-black-bg">
    exo-black-bg
</div>
exo-dark-orange-bg
exo-dark-red-bg
exo-dark-blue-bg
exo-dark-purple-bg
exo-dark-green-bg
exo-dark-brown-bg
exo-dark-gray-bg
exo-dark-pink-bg
exo-dark-yellow-bg
exo-black-bg

Light Background Colours


<div class="exo-light-orange-bg">
    exo-light-orange-bg
</div>
<div class="exo-light-red-bg">
    exo-light-red-bg
</div>
<div class="exo-light-blue-bg">
    exo-light-blue-bg
</div>
<div class="exo-light-purple-bg">
    exo-light-purple-bg
</div>
<div class="exo-light-green-bg">
    exo-light-green-bg
</div>
<div class="exo-light-brown-bg">
    exo-light-brown-bg
</div>
<div class="exo-light-gray-bg">
    exo-light-gray-bg
</div>
<div class="exo-light-pink-bg">
    exo-light-pink-bg
</div>
<div class="exo-light-yellow-bg">
    exo-light-yellow-bg
</div>
<div class="exo-white-bg">
    exo-white-bg
</div>
exo-light-orange-bg
exo-light-red-bg
exo-light-blue-bg
exo-light-purple-bg
exo-light-green-bg
exo-light-brown-bg
exo-light-gray-bg
exo-light-pink-bg
exo-light-yellow-bg
exo-white-bg

Icons

Icons are obtained from the Google Material Design Icons Set and are repackaged into CSS files and introduced into pages using exo-icon* classes. To use icons, import the CSS file(s) corresponding to the selected style and required color(s). For more details see tables of provided icons and details of which CSS files to import. The following examples cover some typical use cases, other sections will cover more specific uses for icons. 

<table class="exo-border">
    <caption>
        Icon sizes
    </caption>
    <tr>
        <td>
            tiny
        </td>
        <td>
            <div class="exo-icon exo-icon-tiny exo-icon-home exo-red"
                 role="img" aria-label="home icon"></div>
        </td>
    </tr>
    <tr>
        <td>
            small
        </td>
        <td>
            <div class="exo-icon exo-icon-small exo-icon-home exo-red"
                 role="img" aria-label="home icon"></div>
        </td>
    </tr>
    <tr>
        <td>
            medium(default)
        </td>
        <td>
            <div class="exo-icon exo-icon-home"
                 role="img" aria-label="home icon"></div>
        </td>
    </tr>
    <tr>
        <td>
            large
        </td>
        <td>
            <div class="exo-icon exo-icon-home exo-icon-large"
                 role="img" aria-label="home icon"></div>
        </td>
    </tr>
    <tr>
        <td>
            huge
        </td>
        <td>
            <div class="exo-icon exo-icon-home exo-icon-huge"
                 role="img" aria-label="home icon"></div>
        </td>
    </tr>
</table>
<p>
    <div>
        Label icons:
        <label class="exo-icon exo-icon-home exo-red">
            Home
        </label>
    </div>
    <div>
        Span icons:
        <span class="exo-icon exo-icon-home exo-dark-purple"/>
        <span class="exo-icon exo-icon-home exo-dark-blue"/>
        <span class="exo-icon exo-icon-home exo-dark-green"/>
    </div>
    <div>
        Light yellow on a rounded dark purple background:
        <div class="exo-icon-background exo-icon-inline exo-rounded exo-dark-purple-bg">
            <div class="exo-icon exo-icon-home exo-light-yellow"
                 title="exo-icon exo-icon-home exo-light-yellow"></div>
        </div>
    </div>
</p>
Icon sizes
tiny
small
medium(default)
large
huge

Label icons:
Span icons:
Light yellow on a rounded dark purple background:

Font Sizes

Exo provides a range of font sizes. 

<p class="exo-tiny">
    Tiny
</p>
<p class="exo-small">
    Small
</p>
<p class="exo-medium">
    Medium
</p>
<p class="exo-large">
    Large
</p>
<p class="exo-huge">
    Huge
</p>

Tiny

Small

Medium

Large

Huge

Input Controls

A number of input control styles are supported, for some quick examples see below, or consult the input controls detailed examples 

<label for="btn1">
    Button
</label>
<input id="btn1" type="button" value="Home">
<label for="btn2">
    Button with icon
</label>
<input id="btn2" type="button" class="exo-icon exo-dark-blue-bg exo-dark-red exo-icon-home"
     value="Home">
<label for="cb1">
    Checkbox
</label>
<input type="checkbox" id="cb1" class="exo-dark-green-bg">
<label for="toggle_normal">
    Checkbox rendered as a toggle
</label>
<label class="exo-dummy-label">
    <span class="exo-toggle">
        <input type="checkbox" id="toggle_normal">
        <span class="exo-toggle-slide exo-light-red-fg exo-dark-green-bg"/>
    </span>
</label>
<label for="num">
    Number
</label>
<input id="num" type="number" value="10"
     max="20" min="0" class="exo-cell-left">
<label for="slider">
    Slider:
    <output id="result" for="slider">
        10
    </output>
</label>
<div style="display:flex;">
    0
    <input id="slider" type="range" value="10"
         max="20" min="0" 
 oninput="result.value=slider.value"
         style="display:inline;">
    20
</div>
<label for="dd">
    Select control (drop down)
</label>
<select id="dd" class="exo-dark-orange-bg exo-white-fg exo-cell-left">
    <option value="o1" class="exo-icon exo-icon-home">
        option 1
    </option>
    <option value="o2" class="exo-icon exo-icon-home">
        option 2
    </option>
</select>
<label for="rbs">
    Radio Buttons
</label>
<div id="rbs">
    <label for="b1" style="display:inline-block;">
        <span class="label-body">
            Apples
        </span>
    </label>
    <input id="b1" type="radio" name="fruit"
         
 value="apples" class="exo-dark-green-bg"
         checked="">
    <label for="b2" style="display:inline-block;">
        <span class="label-body">
            Oranges
        </span>
    </label>
    <input id="b2" type="radio" name="fruit"
         
 value="oranges" class="exo-dark-orange-bg">
    <label for="b3" style="display:inline-block;">
        <span class="label-body">
            Grapes
        </span>
    </label>
    <input id="b3" type="radio" name="fruit"
         
 value="grapes" class="exo-dark-purple-bg">
    <label for="dl">
        Download Button
    </label>
    <div>
        <div class="exo-button exo-dark-blue-fg exo-light-blue-bg">
            <a id="dl" download="download.txt"
                 href="data:text/plain;base64,RG93bmxvYWQgQ29udGVudCE=">
                Download
            </a>
        </div>
    </div>
</div>
020
Download

Tooltips


<span aria-describedby="tooltip-example">
    Lorem ipsum
</span>
<div class="exo-icon exo-icon-inline exo-icon-help exo-help-tooltip"
     tabindex="0">
    <div id="tooltip-example" class="exo-help-content exo-light-brown-bg exo-border exo-dark-red-border"
         role="tooltip">
        Hovering over (or focusing on) the help button reveals some helpful text
        explaining more...
    </div>
</div>
Lorem ipsum

Progress Bars


<div>
    <label for="prog1">
        Loading:
        <span>
            30%
        </span>
    </label>
    <progress id="prog1" value="30" max="100"/>
</div>
<p>
    <div>
        <label for="prog2">
            Computing:
            <span>
                65%
            </span>
        </label>
        <progress id="prog2" class="exo-dark-orange-bg"
             value="65" max="100"/>
    </div>
</p>

Spinner


<div class="exo-icon exo-icon-large exo-vmargin exo-icon-spinner"></div>
<div class="exo-icon exo-icon-large exo-vmargin exo-dark-purple exo-icon-spinner"></div>

Tables


<table class="exo-dark-blue-bg exo-white-fg exo-striped exo-rounded exo-large-padding exo-border exo-dark-red-border">
    <thead>
        <tr>
            <th>
                Enable
            </th>
            <th>
                Name
            </th>
            <th>
                Description
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <label for="cb_row_0"/>
                <input type="checkbox" id="cb_row_0"
                     class="exo-dark-green-bg">
            </td>
            <td>
                Lorem ipsum dolor sit amet.
            </td>
            <td>
                Aenean euismod, leo sed imperdiet ullamcorper.
            </td>
        </tr>
        <tr>
            <td>
                <label for="cb_row_1"/>
                <input type="checkbox" id="cb_row_1"
                     class="exo-dark-green-bg">
            </td>
            <td>
                Lorem ipsum dolor sit amet.
            </td>
            <td>
                Aenean euismod, leo sed imperdiet ullamcorper.
            </td>
        </tr>
        <tr>
            <td>
                <label for="cb_row_1"/>
                <input type="checkbox" id="cb_row_2"
                     class="exo-dark-green-bg">
            </td>
            <td>
                Lorem ipsum dolor sit amet.
            </td>
            <td>
                Aenean euismod, leo sed imperdiet ullamcorper.
            </td>
        </tr>
    </tbody>
</table>
Enable Name Description
Lorem ipsum dolor sit amet. Aenean euismod, leo sed imperdiet ullamcorper.
Lorem ipsum dolor sit amet. Aenean euismod, leo sed imperdiet ullamcorper.
Lorem ipsum dolor sit amet. Aenean euismod, leo sed imperdiet ullamcorper.