<div class="hero"> <!--or <header>-->
    <div class="container">
      <h1>
        Bullet Flash <br>
        <small>muzzle flash styles for bullet-tracer</small>
      </h1>
    </div>
  </div>

Basic HTML Template

<!--include this in the head of the document-->
<meta name=viewport content="width=device-width, initial-scale=1"/>

<!--document body-->
<section>
  <div class="container">
    <div class="page-header">
      <h1>Section Title</h1>
    </div>
    <h3>Subheading</h3>
    <div class="grid">
      <div class="col col12-2">...</div>
      <div class="col col12-10">...</div>
    </div>
  </div>
</section>

Available are a 12 column grid and an 8 column grid.

The 12 column shrinks to half size to accommodate 24 columns at 4k resolutions to better use screen real estate when enabled by the grid. The 8 column will always remain 8 columns wide for screens larger than 1024px.

For screens smaller than 512px, all columns have 100% width.

For screens smaller than 1024px, 12 columns will auto resize to fit a 3 column layout, and 8 columns will auto resize to fit a 4 column layout.

12 Grid

<div class="grid">
  <div class="col12 col-12">.col .col12-12</div>
  <div class="col12 col-2">.col .col12-2</div>
  <div class="col12 col-10">.col .col12-10</div>
  <div class="col12 col-3">.col .col12-3</div>
  <div class="col12 col-9">.col .col12-9</div>
  ...
</div>

8 Grid

<div class="grid">
  <div class="col col8-8">.col .col8-8</div>
  <div class="col col8-2">.col .col8-2</div>
  <div class="col col8-6">.col .col8-6</div>
  <div class="col col8-5">.col .col8-5</div>
  <div class="col col8-3">.col .col8-3</div>
  ...
</div>

Arrayed 12 Grid

Must be viewed in 4k resolutions.

<div class="grid array">
  <div class="col12 col-12">.col .col12-12</div>
  <div class="col12 col-2">.col .col12-2</div>
  <div class="col12 col-10">.col .col12-10</div>
  <div class="col12 col-3">.col .col12-3</div>
  <div class="col12 col-9">.col .col12-9</div>
  ...
</div>

Rows

Used to coerce columns onto separate lines.

<div class="grid">
  <div class="row">
    <div class="col col12-3">.col .col12-3</div>
    <div class="col col12-3">.col .col12-3</div>
  </div>
  <div class="row">
    <div class="col col12-3">.col .col12-3</div>
    <div class="col col12-3">.col .col12-3</div>
  </div>
</div>

Flexbox Utilities

vertical center

vertically center columns

<div class="grid flex-v-center">
  <!--rows and columns here-->
</div>

vertical stretch

vertically stretch columns to equal heights for each row

<div class="grid flex-v-stretch">
  <!--rows and columns here-->
</div>

Headers

Heading 1 Small Text

Heading 2 Small Text

Heading 3 Small Text

Heading 4 Small Text

Heading 5 Small Text

Heading 6 Small Text

Small

Article

<div class="article">
  <h2>Article Title</h2>
  <p>Lorem ipsum dolor...</p>
</div>

Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquet nunc. Maecenas commodo libero arcu, vitae ultrices quam iaculis vitae. Nulla eros purus, auctor sed laoreet in, pharetra eget mi. Phasellus molestie id odio eu mollis. Proin nec tellus et lectus suscipit cursus quis eget eros. Nunc interdum lacus elit, id gravida ligula placerat eu. Nullam hendrerit iaculis lorem, nec scelerisque turpis pretium ac. Morbi blandit dolor massa, cursus lobortis eros malesuada ut. Sed semper ullamcorper gravida. Integer at diam urna. In ligula tortor, egestas nec dictum eu, suscipit vitae mauris. Sed imperdiet sit amet massa at fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

<section>
  <h2>Section</h2>
  <p>Lorem ipsum dolor...</p>
</section>

Cards

<div class="grid">
  <div class="col col12-3">
    <div class="card">
      <h3>Card 1</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </div>
  </div>
</div>

Buttons

Button Button Primary Button Outline Button Outline Primary

<button>Button</button>
<button class="button-primary">Button Primary</button>
<button class="button-outline">Button Outline</button>
<button class="button-outline-primary">Button Outline Primary</button>

Navbar

<!--must be outside of containers and sections for full width,-->
<nav>
  <div class="nav-spacer"></div>
  <div class="nav-container">
    <div class="container">
      <div class="brand brand-padded"><img src="https://git-scm.com/images/logos/downloads/Git-Icon-1788C.png"/></div>
      <ul class="nav-list">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
      </ul>
      <ul class="nav-list right">
        <li>item 4</li>
        <li>item 5</li>
      </ul>
    </div>
  </div>
</nav>

Sidebar

<!--must be outside of containers and sections for full width,
best practice is to place container into content column-->
<div class="grid-strict flex-v-stretch">
  <aside>
    <div class="title">
      <h2>Title</h2>
    </div>
    <ul class="list">
      <li class="list-item">Item 1</li>
      <li class="list-item">Item 2</li>
      <li class="list-item">Item 3</li>
    </ul>
  </aside>
  <div class="counter-aside">
    <section>
      <div class="container">Content</div>
    </section>
  </div>
</div>

Comments

Submit

Input

<div class="input">
  <input placeholder=" "/>
  <label>Name</label>
</div>
<div class="input invalid">
  <input placeholder=" " type="email"/>
  <label>Email</label>
  <span class="error">not an email</span>
</div>
<div class="input">
  <input placeholder=" " type="tel"/>
  <label>Phone</label>
</div>