Documentation

Styling Variables

--font-size
--font-family
--header-font-family
--mono-font-family
--border-radius
--border-width
--input-border
--button-border
--panel-border
--button-border-radius
--spacing
                    
--dm-font-color
--dm-alt-font-color
--dm-check-color
--dm-bg-color
--dm-bg2-color
--dm-fg-color
--dm-primary-color
--dm-secondary-color
--dm-success-color
--dm-warning-color
--dm-error-color
--dm-border-color
--dm-hover-brightness
--dm-alt-hover-brightness
                    
--lm-font-color
--lm-alt-font-color
--lm-check-color
--lm-bg-color
--lm-bg2-color
--lm-fg-color
--lm-primary-color
--lm-secondary-color
--lm-success-color
--lm-warning-color
--lm-error-color
--lm-border-color
--lm-hover-brightness
--lm-alt-hover-brightness

Typography

<title>Title</title>
<h1>Heading</h1>
<p>Text</p>
<code>Code block</code>
<kbd>Keyboard keys</kbd>
<ins>Inserted text</ins>
<del>Deleted text</del>
<i>Italic text</i>
<b>Bold text</b>
<em>Emphasized text</em>
<strong>Strong text</strong>
<p class="font-xl">Extra large text</p>
<p class="font-lg">Large text</p>
<p class="font-md">Medium text</p>
<p class="font-sm">Small text</p>
<p class="bold">Bold text</p>
<p class="italic">Italic text</p>
<p class="underline">Underline text</p>
<p class="strike-through">Strike-through text</p>
<p class="primary">Primary text</p>
<p class="secondary">Secondary text</p>
<p class="success">Success text</p>
<p class="warning">Warning text</p>
<p class="error">Error text</p>
<span class="icon">❤️ 🔧 🌐 ⚙️</span>

Title

Heading

Text

Code block Keyboard keys Inserted text Deleted text Italic text Bold text Emphasized text Strong text

Extra large text

Large text

Medium text

Small text

Bold text

Italic text

Underline text

Strike-through text

Primary text

Secondary text

Success text

Warning text

Error text

❤️ 🔧 🌐 ⚙️

Inputs & Forms

<form>
    <fieldset class="card vbox">
    <legend>Fieldset</legend>
    <input placeholder="text input" type="text">
    <label for="checkbox1">
        <input id="checkbox1" name="checkbox" type="checkbox" checked="checked">
        Checkbox
    </label>
    <label for="checkbox2">
        <input class="switch" id="checkbox2" name="checkbox" type="checkbox" checked="checked">
        Checkbox switch
    </label>
    <label for="radio1">
        <input id="radio1" name="radio" type="radio" checked="checked">
        Radio 1
    </label>
    <label for="radio2">
        <input id="radio2" name="radio" type="radio">
        Radio 2
    </label>
    </fieldset>
</form>
Fieldset

Tables

<table>
    <tr>
    <th>Header1</th>
    <th>Header2</th>
    <th>Header3</th>
    </tr>
    <tr>
    <td>Data1</td>
    <td>Data2</td>
    <td>Data3</td>
    </tr>
    <tr>
    <td>Data1</td>
    <td>Data2</td>
    <td>Data3</td>
    </tr>
</table>
Header1 Header2 Header3
Data1 Data2 Data3
Data1 Data2 Data3 
<details>
    <summary>Collapse</summary>
    <p>Collapse<br>content</p>
</details>
<details class="dropdown">
    <summary>Dropdown</summary>
    <p>Dropdown<br>content</p>
</details>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
Collapse

Collapse
content

Dropdown

Dropdown
content

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Modals

<div id="modal1" class="modal">
    <div class="card vbox">
    <div class="hbox header">
        <h2>Modal 1</h2>
        <div class="spacer"></div>
        <a class="close" href="#"></a>
    </div>
    <div class="body">
        <p>Modal content.</p>
    </div>
    </div>
</div>
<a class="button" href="#modal1">Open modal</a>
Open modal

Buttons & Menus

<a class="button">Button styled anchor</a>
<button>Button</button>
<button class="primary">Primary</button>
<button class="secondary">Secondary</button>
<button class="success">Success</button>
<button class="warning">Warning</button>
<button class="error">Error</button>
<div class="hbox menu">
    <button>Menu Item 1</button>
    <button>Menu Item 2</button>
    <button>Menu Item 3</button>
</div>
Button styled anchor

Hero

<div class="scroll-y height-full rwidth-lg">
    <div class="hero graphic" style="background-image: url(test-images/test-img-2.jpg);">
        <h1 class="center left font-alt">This is a hero!</h1>
        <button class="center bottom">Button</button>
    </div>
    <div class="padding">
        <p>
            Lorem ipsum dolor sit amet, [...] condimentum.
        </p>
    </div>
</div>

This is a hero!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat dolor sit amet diam feugiat efficitur. Maecenas vitae aliquam nisl. Curabitur mollis sodales nisi suscipit ullamcorper. Suspendisse id bibendum leo. Nam sit amet purus non tellus commodo pharetra nec eu elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras tincidunt urna at nunc maximus condimentum.

Captioned

    <div class="captioned">
        <img class="rsize-md" src="test-images/test-img-1.jpg">
        <p class="caption">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Aliquam efficitur elementum quam at luctus.
        </p>
    </div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam efficitur elementum quam at luctus.

Cards, Headers, & Footers

<div class="card vbox">
    <header>
    Header
    </header>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
    Aliquam efficitur elementum quam at luctus.
    </p>
    <footer>
    Footer
    </footer>
</div>

<div class="card vbox primary">
    <header>
    Header
    </header>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
    Aliquam efficitur elementum quam at luctus.
    </p>
    <footer>
    Footer
    </footer>
</div>
Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam efficitur elementum quam at luctus.

Footer
Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam efficitur elementum quam at luctus.

Footer

VBoxes, HBoxes, and RBoxes

<div class="hbox card">
    <p>HBox</p>
    <div class="width-sm height-sm fg rounded"></div>
    <div class="width-sm height-sm fg rounded"></div>
    <div class="width-sm height-sm fg rounded"></div>
</div>
<div class="vbox card">
    <p>VBox</p>
    <div class="width-sm height-sm fg rounded"></div>
    <div class="width-sm height-sm fg rounded"></div>
    <div class="width-sm height-sm fg rounded"></div>
</div>
<div class="graphic card height-md">
    <p class="top center">Graphic</p>
    <div class="top left width-sm height-sm fg rounded"></div>
    <div class="top right width-sm height-sm fg rounded"></div>
    <div class="center left width-sm height-sm fg rounded"></div>
    <div class="center width-sm height-sm fg rounded"></div>
    <div class="center right width-sm height-sm fg rounded"></div>
    <div class="bottom left width-sm height-sm fg rounded"></div>
    <div class="bottom center width-sm height-sm fg rounded"></div>
    <div class="bottom right width-sm height-sm fg rounded"></div>
</div>

HBox

VBox

Graphic

<div class="hbox">
    <details class="sidebar">
    <summary class="button sidebar-button"></summary>
    <div class="vbox padding">
        <h2>Navigation</h2>
        <a>link 1</a>
        <a>link 2</a>
        <a>link 3</a>
    </div>
    </details>
    <div class="padding width-lg">
    Lorem ipsum dolor sit amet, [...] condimentum.
    </div>
</div>

Navigation

link 1 link 2 link 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat dolor sit amet diam feugiat efficitur. Maecenas vitae aliquam nisl. Curabitur mollis sodales nisi suscipit ullamcorper. Suspendisse id bibendum leo. Nam sit amet purus non tellus commodo pharetra nec eu elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras tincidunt urna at nunc maximus condimentum.

Tabbed

<div class="tabbed">
<input type="radio" id="tab1" name="tabs1" checked>
<input type="radio" id="tab2" name="tabs1">
<input type="radio" id="tab3" name="tabs1">

<div class="tabs">
    <label for="tab1">Tab1</label>
    <label for="tab2">Tab2</label>
    <label for="tab3">Tab3</label>
</div>

<div class="tab-panel padding">
    Lorem ipsum dolor sit amet, [...] condimentum.
</div>
<div class="tab-panel padding">
    Lorem ipsum dolor sit amet, [...] massa.
</div>
<div class="tab-panel padding">
    Lorem ipsum dolor sit amet, [...] quam.
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat dolor sit amet diam feugiat efficitur. Maecenas vitae aliquam nisl. Curabitur mollis sodales nisi suscipit ullamcorper. Suspendisse id bibendum leo. Nam sit amet purus non tellus commodo pharetra nec eu elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras tincidunt urna at nunc maximus condimentum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mollis mi a aliquam. Nunc magna lectus, lobortis vel porta ac, accumsan non lacus. Integer rutrum metus nec lorem interdum, sit amet luctus tortor efficitur. Fusce eleifend nec orci et auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae imperdiet erat. Cras venenatis quam in lobortis auctor. Integer porttitor purus at eros condimentum ultricies. Pellentesque sed suscipit magna, quis vulputate velit. Quisque tortor neque, imperdiet in aliquet ut, rutrum id massa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas, risus in sagittis vestibulum, arcu eros porttitor massa, nec egestas enim orci ac diam. Fusce ante ex, convallis id nisi eget, bibendum fermentum risus. Ut posuere urna eget efficitur eleifend. Nunc mattis justo at blandit finibus. Pellentesque ut ante eget metus tincidunt tempus pretium sit amet diam. Etiam quis imperdiet diam. Praesent ornare mollis orci, non tempor mi. Curabitur tortor erat, tempus sed ante sed, hendrerit fermentum leo. In eu neque placerat, posuere lacus eu, cursus quam.

Sizing

width-xs: 8vw
width-sm: 14vw
width-md: 25vw*
width-lg: 45vw*
width-xl: 80vw*

* these widths are responsive,
on portrait orientations they
will instead be 100%

width-quarter:        25%
width-third:          33%
width-half:           50%
width-two-thirds:     66%
width-three-quarters: 75%
width-full:           100%
                    
height-xs: 8vh
height-sm: 14vh
height-md: 25vh
height-lg: 45vh
height-xl: 80vh

height-quarter:        25%
height-third:          33%
height-half:           50%
height-two-thirds:     66%
height-three-quarters: 75%
height-full:           100%
                    
height-input:    height of text inputs, buttons, etc.
height-font-sm:  height of font-sm
height-font-md:  height of font-md
height-font-lg:  height of font-lg
height-font-xl:  height of font-xl
height-font-xxl: height of font-xxl

fullscreen: fixed & covers entire viewport

Styling Utilities

Background Color

bg
bg2
fg


Button Shapes

circle
square
                    
Light Mode / Dark Mode

lm-hidden
lm-invert
dm-hidden
dm-invert


Portrait / Landscape

portrait-hidden
landscape-hidden
                    
 Padding 

no-padding
padding
padding-left
padding-right
padding-top
padding-bottom
                    
 Margins 

no-margin
margin
margin-left
margin-right
margin-top
margin-bottom
                    
 Border 

rounded
no-border
border
border-left
border-right
border-top
border-bottom