frznk-tank

Verifying that +franks921 is my blockchain ID. https://onename.com/franks921

frznk-tank

.block
  %p Block
  .block__element
    %p Element
  .block__element--modifier
    %p Element with Modifier
  .block__element--modifier2
    %p Element with Modifier

frznk-tank

<div class="content">
  <div class="content__right">This content must be first on mobile but floated to the right on a bigger screen</div>
  <div class="content__left">This content must be last on mobile but floated to the left on a bigger screen</div>
</div>

frznk-tank

.econ__table
  %table.data-table-container
    %thead.data-table-header
      %tr
        %th Col 1
        %th Col 2
        %th Col 3
        %th Col 4
        %th Col 5
        %th Col 6

frznk-tank

<nav am-Nav='header'>
  <ul am-Nav-List>
    <li am-Nav-Item='active'><a href="#">Foo</a></li>
    <li am-Nav-Item><a href="#">Bar</a></li>
  </ul>
</nav>

frznk-tank

<p>
  <button type='button' am-Button>Button</button>
</p>
<p>
  <button type='button' am-Button='large'>Button</button>
</p>

<p am-BlockName1>BlockName1</p>

<p am-BlockName2>BlockName2</p>

frznk-tank

<p>
  <button type='button' am-Button>Button</button>
</p>
<p>
  <button type='button' am-Button='large'>Button</button>
</p>

<p am-BlockName1>BlockName1</p>

<p am-BlockName2>BlockName2</p>

frznk-tank

.expander.is-collapsed
  %p Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum.
  %p Donec sed odio dui. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
  %p Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

frznk-tank

.float--left
  %h5 HEX

.float--left
  %h5 RGBA

.float--left
  .color--100  
  .color--90  
  .color--80  

frznk-tank

.box  
.box--arrow-right  
.box--arrow-left  
.box--arrow-bottom