Webkit.css

Typography

Headings
Text
Text block
Quote

Layout

Elements

Topbar
Section
Placeholder
Loader
Progress bar
List
Sidebar
Drawer
Table
Inputs
Button
Switch
Badge
Dot
chip
Tabs
Timeline
legend
Popover

Typography

Headings

<h1>This is H1</h1>
<h2>This is H2</h2>
<h3>This is H3</h3>
<h4>This is H4</h4>

This is H1

This is H2

This is H3

This is H4

Text

Use class "text" along with different size class to control the font size. 
<div class="text">Default</div>
<div class="text huge">This is Huge</div>
<div class="text large">This is Large</div>
<div class="text medium">This is medium</div>
<div class="text small">This is small</div>
<div class="text tiny">This is tiny</div>
Default
This is Huge
This is Large
This is medium
This is small
This is tiny

Text block

Use class "text" along with "block" to make inline-block text blocks. 
<div class="text block">
    <div class="text tiny">iMac 27" (Late 2012)</div>
    <div class="text small">iMac 13,2</div>
</div>
<div class="text block">
    <div class="text tiny">iMac 27" (Late 2013)</div>
    <div class="text small">iMac 14,2</div>
</div>
iMac 27" (Late 2012)
iMac 13,2
iMac 27" (Late 2013)
iMac 14,2

Quote

<pre>
    I am a quote
</pre>
    I am a quote

Layout

<div class="row">
    <div class="col-12">
        <div class="placeholder dimmer tiny"><p class="loader">col-12</p></div>
    </div>
</div>
<div class="row">
    <div class="col-6">
        <div class="placeholder dimmer tiny"><p class="loader">col-6</p></div>
    </div>
    <div class="col-6">
        <div class="placeholder dimmer tiny"><p class="loader">col-6</p></div>
    </div>
</div>
<div class="row">
    <div class="col-4">
        <div class="placeholder dimmer tiny"><p class="loader">col-4</p></div>
    </div>
    <div class="col-8">
        <div class="placeholder dimmer tiny"><p class="loader">col-8</p></div>
    </div>
</div>
<div class="row">
    <div class="col-2">
        <div class="placeholder dimmer tiny"><p class="loader">col-2</p></div>
    </div>
    <div class="col-2">
        <div class="placeholder dimmer tiny"><p class="loader">col-2</p></div>
    </div>
    <div class="col-8">
        <div class="placeholder dimmer tiny"><p class="loader">col-8</p></div>
    </div>
</div>
<div class="row">
    <div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
    <div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
    <div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
    <div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
    <div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
    <div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
    <div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
    <div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
    <div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
    <div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
    <div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
    <div class="col-1"><div class="placeholder dimmer tiny"><p class="loader">col-1</p></div></div>
</div>

<div class="row">
    <div class="col-s-12">
        <div class="placeholder dimmer tiny"><p class="loader">col-s-12</p></div>
    </div>
</div>
<div class="row">
    <div class="col-s-6">
        <div class="placeholder dimmer tiny"><p class="loader">col-s-6</p></div>
    </div>
    <div class="col-s-6">
        <div class="placeholder dimmer tiny"><p class="loader">col-s-6</p></div>
    </div>
</div>
<div class="row">
    <div class="col-s-4">
        <div class="placeholder dimmer tiny"><p class="loader">col-s-4</p></div>
    </div>
    <div class="col-s-8">
        <div class="placeholder dimmer tiny"><p class="loader">col-s-8</p></div>
    </div>
</div>
<div class="row">
    <div class="col-s-2">
        <div class="placeholder dimmer tiny"><p class="loader">col-s-2</p></div>
    </div>
    <div class="col-s-2">
        <div class="placeholder dimmer tiny"><p class="loader">col-s-2</p></div>
    </div>
    <div class="col-s-8">
        <div class="placeholder dimmer tiny"><p class="loader">col-s-8</p></div>
    </div>
</div>

col-12

col-6

col-6

col-4

col-8

col-2

col-2

col-8

col-1

col-1

col-1

col-1

col-1

col-1

col-1

col-1

col-1

col-1

col-1

col-1

col-s-12

col-s-6

col-s-6

col-s-4

col-s-8

col-s-2

col-s-2

col-s-8

Elements

Topbar

<div class="topbar">
    <div class="title">My App</div>
    <div class="actions">
        <div class="list">
            <div class="item">
                <a>link 1</a>
            </div>
            <div class="item">
                <a>link 2</a>
            </div>
            <div class="item">
                <a>link 3</a>
            </div>
        </div>
    </div>
</div>
My App
link 1
link 2
link 3

Section

<div class="content">
    <div class="section">
        <div class="header">
            <div class="title">
                Title
            </div>
            <div class="actions">
                <div class="list">
                    <div class="item">
                        action 1
                    </div>
                    <div class="item">
                        action 2
                    </div>
                </div>
            </div>
        </div>
        <div class="content">
            <p>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.</p>
        </div>
        <div class="actions">
            <button class="button">Button 1</button>
            <button class="button">Button 2</button>
        </div>
    </div>
</div>
Title
action 1
action 2

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.

Use "article" modifier to get rid of the border: 
<div class="content">
    <div class="section article">
        <div class="header">
            <div class="title">
                Title
            </div>
            <div class="actions">
                <div class="list">
                    <div class="item">
                        action 1
                    </div>
                    <div class="item">
                        action 2
                    </div>
                </div>
            </div>
        </div>
        <div class="content">
            <p>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.</p>
        </div>
        <div class="actions">
            <button class="button">Button 1</button>
            <button class="button">Button 2</button>
        </div>
    </div>
</div>
Title
action 1
action 2

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.

Placeholder

<div class="placeholder"> <p class="loader">placeholder</p> </div>
<div class="placeholder small"><p class="loader">placeholder small</p> </div>
<div class="placeholder tiny"><p class="loader">placeholder tiny</p></div>

placeholder

placeholder small

placeholder tiny

Use "dimmer" modifier to make the placeholder dark 
<div class="placeholder dimmer"> <p class="loader">placeholder</p> </div>

placeholder

Loader

Size 
<div class="loader">
    <div class="spinner huge">
    </div>
    <div class="spinner large">
    </div>
    <div class="spinner">
    </div>
    <div class="spinner small">
    </div>
    <div class="spinner tiny">
    </div>
</div>
Color 
<div class="loader">
    <div class="spinner">
    </div>
    <div class="spinner blue">
    </div>
    <div class="spinner purple">
    </div>
    <div class="spinner green">
    </div>
    <div class="spinner orange">
    </div>
    <div class="spinner red">
    </div>
</div>
With Placeholder 
<div class="placeholder dimmer">
    <div class="loader">
        <div class="spinner">
        </div>
    </div>
</div>

Progress bar

Different colors with mixin 
<div>
    <div class="progress-bar-container">
        <div class="progress-bar" style="width:25%">25%</div>
    </div>
</div>
<hr>
<div>
    <div class="progress-bar-container">
        <div class="progress-bar success" style="width:50%">50%</div>
    </div>
</div>
<hr>
<div>
    <div class="progress-bar-container">
        <div class="progress-bar failed" style="width:75%">75%</div>
    </div>
</div>
<hr>
<div>
    <div class="progress-bar-container">
        <div class="progress-bar error" style="width:100%">100%</div>
    </div>
</div>
25%
50%
75%
100%
Mulit bar 
<div>
        <div class="progress-bar-container">
            <div class="progress-bar" style="width:25%">25%</div>
            <div class="progress-bar error" style="width:75%">75%</div>
        </div>
</div>
25%
75%

List

<div class="list">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="divider"></div>
    <div class="item">
        <div class="list">
            <div class="item">item 1 lv2</div>
            <div class="item">item 2 lv2</div>
            <div class="divider"></div>
            <div class="item">
                <div class="list">
                    <div class="item">item 1 lv3</div>
                    <div class="item">item 2 lv3</div>
                </div>
            </div>
        </div>
    </div>
</div>
item 1
item 2
item 1 lv2
item 2 lv2
item 1 lv3
item 2 lv3

Sidebar

<div class="sidebar">
    <div class="header">
        <div class="title">
            Title
        </div>
    </div>
</div>
<div class="main">
</div>
Title

Drawer

<div id="bottom-drawer" class="drawer">
    <div class="header">
        <div class="actions">
            <a href="javascript:void(0)" onclick="closeDrawerFactory('bottom-drawer')()">Close</a>
        </div>
    </div>
</div>
<div id="left-drawer" class="drawer left">
    <div class="header">
        <div class="actions">
            <a href="javascript:void(0)" onclick="closeDrawerFactory('left-drawer')()">Close</a>
        </div>
    </div>
</div>
<div id="right-drawer" class="drawer right">
    <div class="header">
        <div class="actions">
            <a href="javascript:void(0)" onclick="closeDrawerFactory('right-drawer')()">Close</a>
        </div>
    </div>
</div>
<div id="left-drawer-under-toolbar" class="drawer left under-topbar-with-actions">
    <div class="header">
        <div class="actions">
            <a href="javascript:void(0)" onclick="closeDrawerFactory('left-drawer-under-toolbar')();closeTopbar()">Close</a>
        </div>
    </div>
</div>
<div>
    <button class="button" onclick="openDrawerFactory('bottom-drawer')()">Open bottom</button>
    <button class="button" onclick="openDrawerFactory('left-drawer')()">Open left</button>
    <button class="button" onclick="openDrawerFactory('right-drawer')()">Open right</button>
    <button class="button" onclick="openDrawerFactory('left-drawer-under-toolbar')();openTopbar()">Open left under topbar</button>
</div>
<script>
    const closeDrawerFactory = (id) => (e) => document.getElementById(id).classList.remove("display");
    const openDrawerFactory = (id) => (e) => document.getElementById(id).classList.add("display");
    const closeTopbar = () => { document.getElementById("topbar").style.display = "none" };
    const openTopbar = () => {
        document.getElementById("topbar").style.display = "flex";
    };
</script>

Table

<table class="table">
    <thead>
        <tr>
            <th>title 1</th>
            <th>title 2</th>
            <th>title 3</th>
            <th>title 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>col 1</td>
            <td>col 2</td>
            <td>col 3</td>
            <td>col 4</td>
        </tr>
        <tr>
            <td>col 1</td>
            <td>col 2</td>
            <td>col 3</td>
            <td>col 4</td>
        </tr>
        <tr>
            <td>col 1</td>
            <td>col 2</td>
            <td>col 3</td>
            <td>col 4</td>
        </tr>
        <tr>
            <td>col 1</td>
            <td>col 2</td>
            <td>col 3</td>
            <td>col 4</td>
        </tr>
    </tbody>
</table>
title 1 title 2 title 3 title 4
col 1 col 2 col 3 col 4
col 1 col 2 col 3 col 4
col 1 col 2 col 3 col 4
col 1 col 2 col 3 col 4
full-width 
<table class="table full-width">
    <thead>
        <tr>
            <th>title 1</th>
            <th>title 2</th>
            <th>title 3</th>
            <th>title 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>col 1</td>
            <td>col 2</td>
            <td>col 3</td>
            <td>col 4</td>
        </tr>
        <tr>
            <td>col 1</td>
            <td>col 2</td>
            <td>col 3</td>
            <td>col 4</td>
        </tr>
        <tr>
            <td>col 1</td>
            <td>col 2</td>
            <td>col 3</td>
            <td>col 4</td>
        </tr>
        <tr>
            <td>col 1</td>
            <td>col 2</td>
            <td>col 3</td>
            <td>col 4</td>
        </tr>
    </tbody>
</table>
title 1 title 2 title 3 title 4
col 1 col 2 col 3 col 4
col 1 col 2 col 3 col 4
col 1 col 2 col 3 col 4
col 1 col 2 col 3 col 4
Stripped 
<table class="table full-width stripped">
    <thead>
        <tr>
            <th>title 1</th>
            <th>title 2</th>
            <th>title 3</th>
            <th>title 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>col 1</td>
            <td>col 2</td>
            <td>col 3</td>
            <td>col 4</td>
        </tr>
        <tr>
            <td>col 1</td>
            <td>col 2</td>
            <td>col 3</td>
            <td>col 4</td>
        </tr>
        <tr>
            <td>col 1</td>
            <td>col 2</td>
            <td>col 3</td>
            <td>col 4</td>
        </tr>
        <tr>
            <td>col 1</td>
            <td>col 2</td>
            <td>col 3</td>
            <td>col 4</td>
        </tr>
    </tbody>
</table>
title 1 title 2 title 3 title 4
col 1 col 2 col 3 col 4
col 1 col 2 col 3 col 4
col 1 col 2 col 3 col 4
col 1 col 2 col 3 col 4

Inputs

Input 
<div class="input">
    <input type="text" required/>
    <label>Text field1</label>
</div>
<div class="row">
    <div class="col-6">
        <div class="input">
            <input type="text" required/>
            <label>Text field2</label>
        </div>
    </div>
    <div class="col-6">
        <div class="input">
            <div class="prefix"><p>+1</p></div>
            <input type="text" required/>
            <label>Text field3</label>
        </div>
    </div>
</div>

+1

Sliders 
<div class="row">
    <div class="col-6">
        <div class="input">
            <label>Range slider</label>
            <input type="range" min="0" max="100" value="0"/>
            <input type="number" min="0" max="100" value="0"/>
        </div>
    </div>
    <div class="col-6">
        <div class="input">
            <input type="range" min="0" max="100"    value="80"/>
            <input type="number" min="0" max="100" value="80"/>
        </div>
    </div>
</div>
<div class="input">
    <label>Double range input</label>
    <div class="double-range">
        <input type="number" min="0" max="100"    value="20"/>
        <div class="range">
            <input type="range" min="0" max="100"    value="20"/>
            <input type="range" min="0" max="100"    value="70"/>
        </div>
        <input type="number" min="0" max="100"    value="70"/>
    </div>
</div>
Number 
<div class="input">
    <input type="number" required min="0" max="100"/>
    <label>Number</label>
</div>
<div class="input">
    <input type="number" required min="0" max="10" value="11"/>
    <label>Number out of range</label>
</div>
Select 
<div class="input">
    <select required>
        <option></option>
        <option>option 1</option>
        <option>option 2</option>
        <option>option 3</option>
    </select>
    <label>Select</label>
</div>
Switch 
<div class="input">
    <label>Switch1</label>
    <label class="switch">
        <input type="checkbox">
        <span class="slider"></span>
    </label>
</div>
<div class="input">
    <label>Switch2</label>
    <label class="switch">
        <input type="checkbox">
        <span class="slider"></span>
    </label>
</div>
Mixin 
<div class="input">
    <input type="text" required disabled/>
    <label>Disabled</label>
</div>
<div class="input">
    <input type="text" required disabled value="I am disabled"/>
    <label>Disabled with existing value</label>
</div>
<div class="input">
    <input class="invalid" type="text" required value="use invalid mixin to force invalid style"/>
    <label>Invalid</label>
</div>
<div class="input">
    <label>Invalid Range slider</label>
    <input class="invalid" type="range" min="0" max="100" value="101"/>
    <input type="number" min="0" max="100" value="101"/>
</div>

Button

<button class="button">Default</button>
<button class="button primary">Primary</button>
<button class="button danger">Danger</button>
Size 
<button class="button huge">huge</button>
<button class="button large">large</button>
<button class="button medium">medium</button>
<button class="button">small</button>
<button class="button tiny">tiny</button>
Disabled 
<button class="button" disabled>Default</button>
<button class="button primary" disabled>Primary</button>
<button class="button danger" disabled>Danger</button>

Switch

<label class="switch">
    <input type="checkbox">
    <span class="slider"></span>
</label>

Badge

<div class="badge">
    <div class="text block">
        <div class="text tiny">iMac 27" (Late 2012)</div>
        <div class="text small">iMac 13,2</div>
    </div>
</div>
<div class="badge outline">
    <div class="text block">
        <div class="text tiny">iMac 27" (Late 2013)</div>
        <div class="text small">iMac 14,2</div>
    </div>
</div>
<div class="badge active">
    <div class="text block">
        <div class="text tiny">iMac 27" (Late 2013)</div>
        <div class="text small">iMac 14,2</div>
    </div>
</div>
iMac 27" (Late 2012)
iMac 13,2
iMac 27" (Late 2013)
iMac 14,2
iMac 27" (Late 2013)
iMac 14,2

Dot

<div class="dot"></div>
<div class="dot success"></div>
<div class="dot failed"></div>
<div class="dot error"></div>
Size 
<div class="dot small"></div>
<div class="dot medium"></div>
<div class="dot large"></div>
With string inside 
<div class="dot success">
    <div class="text">&#10003</div>
</div>
<div class="dot failed">
    <div class="text">&#120247</div>
</div>
<div class="dot error">
    <div class="text">!</div>
</div>
<div class="dot success large">
    <div class="text">&#10003</div>
</div>
<div class="dot failed large">
    <div class="text">&#120247</div>
</div>
<div class="dot error large">
    <div class="text">!</div>
</div>
✓
𝖷
!
✓
𝖷
!
With image inside 
<div class="dot error">
    <img src="../icons/clock.svg">
</div>
Blink 
<div class="dot blink"></div>
<div class="dot success blink"></div>
<div class="dot failed blink"></div>
<div class="dot error blink"></div>
Dot selector 
<div class="dot selector">
    <label>
        <input type="radio" name="selector">
        <div class="dot success"></div>
    </label>
    <label>
        <input type="radio" name="selector">
        <div class="dot failed"></div>
    </label>
    <label>
        <input type="radio" name="selector">
        <div class="dot error"></div>
    </label>
</div>

chip

<div class="chip">
    <div class="dot small blink"></div>
    <div class="text block">
        <p>iPone</p>
    </div>
</div>
<div class="chip">
    <div class="dot small blink failed"></div>
    <div class="text block">
        <p>iPad</p>
    </div>
</div>
<div class="chip">
    <div class="dot small success"></div>
    <div class="text block">
        <p>Mac</p>
    </div>
</div>
<div class="chip">
    <div class="text block">
        <p>macOS</p>
    </div>
    <div class="text block">
        <a>X</a>
    </div>
</div>
<div class="chip">
    <div class="text block">
        <p>iOS</p>
    </div>
    <div class="text block">
        <a>X</a>
    </div>
</div>
<div class="chip">
    <div class="text block">
        <p>watchOS</p>
    </div>
    <div class="text block">
        <a>X</a>
    </div>
</div>

iPone

iPad

Mac

macOS

X

iOS

X

watchOS

X

Tabs

<div class="tabs">
    <div class="title">
        Title
    </div>
    <div class="tab active">
        <a class="link">Tab 1</a>
    </div>
    <div class="tab">
        <a class="link">Tab 2</a>
    </div>
</div>
Title
Tab 1
Tab 2

Timeline

<div class="timeline">
    <div class="header">
        <div class="series">
            time line 1
        </div>
        <div class="series">
            time line 2
        </div>
    </div>
    <div class="content">
        <div class="series">
            <div class="dot">
                <div class="tag">1231</div>
            </div>
            <div class="dot success">
                <div class="tag">456</div>
            </div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot error">
                <div class="tag">123</div>
            </div>
            <div class="dot empty"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="series">
            <div class="dot empty"></div>
            <div class="dot empty"></div>
            <div class="dot">
                <div class="tag">3533</div>
            </div>
            <div class="dot">
                <div class="tag">3532</div>
            </div>
            <div class="dot">
                <div class="tag">352</div>
            </div>
            <div class="dot">
                <div class="tag">351</div>
            </div>
            <div class="dot">
                <div class="tag">1</div>
            </div>
            <div class="dot">
                <div class="tag">456</div>
            </div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="x-axis">
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    r1234567
                </div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    r1234567
                </div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    r1234567
                </div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    r1234567
                </div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    r1234567
                </div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    I am a tag
                </div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    I am a tag
                </div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    I am a tag
                </div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    I am a tag
                </div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    I am a tag
                </div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    I am a tag
                </div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    I am a tag
                </div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    I am a tag
                </div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    I am a tag
                </div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    I am a tag
                </div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    I am a tag
                </div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    I am a tag
                </div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    I am a tag
                </div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    I am a tag
                </div>
            </div>
        </div>
        <div class="x-axis">
            <div class="scale group-4">
                <div class="border-line-left"></div>
                <div class="line"></div>
                <div class="text">
                    I am a tag
                </div>
                <div class="border-line-right"></div>
            </div>
            <div class="scale group-3">
                <div class="border-line-left"></div>
                <div class="line"></div>
                <div class="text">
                    I am a tag
                </div>
                <div class="border-line-right"></div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    I am a tag
                </div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    I am a tag
                </div>
            </div>
            <div class="scale group-10">
                <div class="border-line-left"></div>
                <div class="line"></div>
                <div class="text">
                    I am a tag
                </div>
                <div class="border-line-right"></div>
            </div>
        </div>
    </div>
</div>
time line 1
time line 2
1231
456
123
3533
3532
352
351
1
456
r1234567
r1234567
r1234567
r1234567
r1234567
I am a tag
I am a tag
I am a tag
I am a tag
I am a tag
I am a tag
I am a tag
I am a tag
I am a tag
I am a tag
I am a tag
I am a tag
I am a tag
I am a tag
I am a tag
I am a tag
I am a tag
I am a tag
I am a tag
co-revision timeline top x-axis 
<div class="timeline">
    <div class="header with-top-x-axis">
        <div class="series">
            Debug
        </div>
        <div class="series">
            Release
        </div>
    </div>
    <div class="content">
        <div class="x-axis top">
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    r244510
                </div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    r244509
                </div>
            </div>
            <div class="scale group-4">
                <div class="border-line-left"></div>
                <div class="line"></div>
                <div class="text">
                    r244508
                </div>
                <div class="border-line-right"></div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    r244507
                </div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    r244506
                </div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    r244505
                </div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    r244504
                </div>
            </div>
        </div>

        <div class="series">
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
        </div>
        <div class="series">
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
        </div>
        <div class="x-axis">
            <div class="scale group-3">
                <div class="border-line-left"></div>
                <div class="line"></div>
                <div class="text">
                    ac826a38
                </div>
                <div class="border-line-right"></div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    c3558d50
                </div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    08637423
                </div>
            </div>
            <div class="scale group-5">
                <div class="border-line-left"></div>
                <div class="line"></div>
                <div class="text">
                    c94feb63
                </div>
                <div class="border-line-right"></div>
            </div>
        </div>
    </div>
</div>
Debug
Release
r244510
r244509
r244508
r244507
r244506
r244505
r244504
ac826a38
c3558d50
08637423
c94feb63
Only Group Scale 
<div class="timeline">
    <div class="header with-top-x-axis">
        <div class="series">
            Debug
        </div>
        <div class="series">
            Release
        </div>
    </div>
    <div class="content">
        <div class="x-axis top">
            <div class="scale group-4">
                <div class="border-line-left"></div>
                <div class="line"></div>
                <div class="text">
                    r244508
                </div>
                <div class="border-line-right"></div>
            </div>
            <div class="scale group-4">
                <div class="border-line-left"></div>
                <div class="line"></div>
                <div class="text">
                    r244510
                </div>
                <div class="border-line-right"></div>
            </div>
        </div>
        <div class="series">
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
        </div>
        <div class="series">
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
        </div>
        <div class="x-axis">
            <div class="scale group-3">
                <div class="border-line-left"></div>
                <div class="line"></div>
                <div class="text">
                    ac826a38
                </div>
                <div class="border-line-right"></div>
            </div>
            <div class="scale group-5">
                <div class="border-line-left"></div>
                <div class="line"></div>
                <div class="text">
                    c94feb63
                </div>
                <div class="border-line-right"></div>
            </div>
        </div>
    </div>
</div>
Debug
Release
r244508
r244510
ac826a38
c94feb63
Large Series Label 
<div class="timeline">
    <div class="header with-top-x-axis">
        <div class="series">
            I am a very long and big series 1
        </div>
        <div class="series">
            I am a very long and big series 2
        </div>
    </div>
    <div class="content">
        <div class="x-axis top">
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    r244510
                </div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    r244509
                </div>
            </div>
            <div class="scale group-4">
                <div class="border-line-left"></div>
                <div class="line"></div>
                <div class="text">
                    r244508
                </div>
                <div class="border-line-right"></div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    r244507
                </div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    r244506
                </div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    r244505
                </div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    r244504
                </div>
            </div>
        </div>

        <div class="series">
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
        </div>
        <div class="series">
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
            <div class="dot success"></div>
        </div>
        <div class="x-axis">
            <div class="scale group-3">
                <div class="border-line-left"></div>
                <div class="line"></div>
                <div class="text">
                    ac826a38
                </div>
                <div class="border-line-right"></div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    c3558d50
                </div>
            </div>
            <div class="scale">
                <div class="line"></div>
                <div class="text">
                    08637423
                </div>
            </div>
            <div class="scale group-5">
                <div class="border-line-left"></div>
                <div class="line"></div>
                <div class="text">
                    c94feb63
                </div>
                <div class="border-line-right"></div>
            </div>
        </div>
    </div>
</div>
I am a very long and big series 1
I am a very long and big series 2
r244510
r244509
r244508
r244507
r244506
r244505
r244504
ac826a38
c3558d50
08637423
c94feb63

legend

<div class="legend">
    <div class="item">
        <div class="dot success">
            <div class="text">✓</div>
        </div>
        <div class="label">Tests Pass</div>
    </div>
    <div class="item">
        <div class="dot failed"></div>
        <div class="label">Tests Failed</div>
    </div>
    <div class="item">
        <div class="dot error"><img src="../icons/clock.svg"></div>
        <div class="label">Tests have error</div>
    </div>
</div>
✓
Tests Pass
Tests Failed
Tests have error
With horizontal mixin 
<div class="legend horizontal">
    <div class="item">
        <div class="dot success">
            <div class="text">✓</div>
        </div>
        <div class="label">Tests Pass</div>
    </div>
    <div class="item">
        <div class="dot failed"></div>
        <div class="label">Tests Failed</div>
    </div>
    <div class="item">
        <div class="dot error"><img src="../icons/clock.svg"></div>
        <div class="label">Tests have error</div>
    </div>
</div>
✓
Tests Pass
Tests Failed
Tests have error
With timeline mixin 
<div class="legend timeline">
    <div class="item">
        <div class="dot success">
            <div class="text">✓</div>
        </div>
        <div class="label">Tests Pass</div>
    </div>
    <div class="item">
        <div class="dot failed"></div>
        <div class="label">Tests Failed</div>
    </div>
    <div class="item">
        <div class="dot error"><img src="../icons/clock.svg"></div>
        <div class="label">Tests have error</div>
    </div>
</div>
✓
Tests Pass
Tests Failed
Tests have error

Popover

<div class="popover display">
    <div class="arrow point-top" style="left: 106px;">
    </div>
    <div class="content" style="width:200px">
        This is popover;
    </div>
</div>
<div class="content">
    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.
</div>
<!-- You can control the arrow pos by seting the left or top -->
<div class="popover display">
    <div class="arrow point-bottom" style="left: 106px;">
    </div>
    <div class="content" style="width:200px">
        This is a popover
    </div>
</div>
<div class="content">
    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.
</div>
<div class="popover display">
    <div class="arrow point-left" style="top: 31px;">
    </div>
    <div class="content" style="height:50px">
        This is a popover
    </div>
</div>
<div class="content">
    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.
</div>
<div class="popover display">
    <div class="arrow point-right" style="top: 31px;">
    </div>
    <div class="content" style="height:50px">
        This is a popover
    </div>
</div>
<div class="content">
    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.
</div>
This is popover;
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.
This is a popover
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.
This is a popover
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.
This is a popover
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.