doc_onepage

Base

Bars

<nav class="bar--top">
  <h1 style="padding-left: 1em;">My Application</h1>
</nav>

Colors

element {
  color: var(--color-dark-1-greyblue);
}

Core

<!-- Make text selectable -->
<section class="selectable">
  Text to Copy.
</section>

<!-- Reset Element to base-->
<button class="initial"></button>

Elements

Buttons

<!-- A default Button -->
<button>Click me</button>

<!-- A round Button -->
<button class="btn--round">&#43;</button>

<!-- A flat Button -->
<button class="btn--flat">Click me</button>

Cards

<!-- A default Card -->
<article class="card">
 <h1>Card Header</h1>
</article>

<!-- A material Card -->
<article class="card--elevated">
 <h1>Card Header</h1>
</article>

<!-- A Card with border -->
<article class="card--outlined">
 <h1>Card Header</h1>
</article>

Collapsible

<!-- A Collapsible Element -->
<article class="collapsibles">
  <input type="checkbox" id="collapsible_check1"></input>
  <label for="collapsible_check1">Collapsible</label>
  <section class="collapsible--content">
    <h1>Hello World</h1>
  </section>
</article>

Dialog

<!-- A Dialog Element -->
<article class="dialog">
  <input type="checkbox" id="check1"></input>
  <label for="check1">Dialog</label>
  <section class="dialog--content">
    <h1>Hello World</h1>
  </section>
</article>

Flex

Flex

/*
  Default Flex Box
  f--s-[number] : Flex start (number: 0-12)
  f--e-[number] : Flex end (number: 0-12)
*/

<main class="f--s-1 f--e-9"></main>

Flex Display

/*
  Screen Size Flex Box
  fd--[size]s-[number] : Flex start (size: l [large], m [middle], s [short], number: 0-12)
  fd--[size]e-[number] : Flex end (size: l [large], m [middle], s [short], number: 0-12)
*/

<main class="fd--ls-1 fd--le-9 fd--ss-0 fd--se-12"></main>

Flex Dynamic (experimental)

/*
  Dynamic Flex Box
  f--s : Flex start
  f--e : Flex end
*/

<main class="f--s f--e" fs=1 fe=9></main>