Basscss / Docs / Guides

UI Elements

A guide to creating user interface elements with Basscss

Button Sizes

<button type="button" class="button-big button-blue">Big Button</button>
<button type="button" class="button-blue">Normal</button>
<button type="button" class="button-small button-blue">Small</button>
<button type="button" class="h3 button-big button-blue">Big Button</button>
<button type="button" class="h5 button-blue">Normal</button>
<button type="button" class="h6 button-small button-blue">Small</button>

Button Groups

<div class="inline-block clearfix">
  <button type="button" class="left button-gray rounded-left">Button</button>
  <button type="button" class="left button-blue not-rounded">Button</button>
  <button type="button" class="left button-blue rounded-right">Button</button>
</div>

Justified Button Group

<div class="table table-fixed center">
  <a href="#!" class="table-cell button button-gray rounded-left">Button</a>
  <a href class="table-cell button button-blue not-rounded">Button</a>
  <a href class="table-cell button button-blue rounded-right">Button</a>
</div>
<div class="inline-block clearfix">
  <button type="button" class="left button-blue-outline rounded-left is-active">Hamburger</button>
  <button type="button" class="left button-blue-outline shift-left-2 not-rounded">Fries</button>
  <button type="button" class="left button-blue-outline shift-left-2 rounded-right">Shake</button>
</div>
<div class="table table-fixed center">
  <div class="table-cell">
    <button type="button" class="block button-blue-outline rounded-left is-active">Hamburger</button>
  </div>
  <div class="table-cell">
    <button type="button" class="block button-blue-outline shift-left-2 not-rounded">Fries</button>
  </div>
  <div class="table-cell">
    <button type="button" class="block button-blue-outline shift-left-2 rounded-right">Shake</button>
  </div>
</div>

Input Groups

<form class="sm-col-6">
  <label class="hide">Username</label>
  <input type="text" class="block full-width mb0 field-light rounded-top no-border-bottom" placeholder="Username">
  <label class="hide">Password</label>
  <input type="password" class="block full-width mb0 field-light not-rounded no-border-bottom" placeholder="Password">
  <label class="hide">Bacon</label>
  <input type="text" class="block full-width field-light rounded-bottom" placeholder="Bacon">
  <button type="submit" class="button-blue">Pancake</button>
</form>
<form class="table">
  <div class="table-cell">
    <label class="hide">Username</label>
    <input type="text" class="block full-width mb0 field-light rounded-left no-border-right" placeholder="Username">
  </div>
  <div class="table-cell">
    <label class="hide">Password</label>
    <input type="password" class="block full-width mb0 field-light not-rounded no-border-right" placeholder="Password">
  </div>
  <div class="table-cell nowrap">
    <button type="submit" class="block full-width button-blue rounded-right">Sign In</button>
  </div>
</form>

Pagination

<div class="clearfix">
  <a href="#!" class="button left">
    <svg class="icon" data-icon="chevron-left"></svg>
    Previous
  </a>
  <a href="#!" class="button right">
    Next
    <svg class="icon" data-icon="chevron-right"></svg>
  </a>
</div>
<div class="center">
  <div class="inline-block clearfix">
    <a href="#!" class="left button">
      <svg class="icon" data-icon="chevron-left"></svg>
      Previous
    </a>
    <a href="#!" class="right button">
      Next
      <svg class="icon" data-icon="chevron-right"></svg>
    </a>
    <div class="overflow-hidden sm-show">
      <a href="#!" class="button dark-gray">1</a>
      <a href="#!" class="button">2</a>
      <a href="#!" class="button">3</a>
      <a href="#!" class="button">4</a>
      <a href="#!" class="button">5</a>
    </div>
  </div>
</div>
<div class="center">
  <div class="inline-block overflow-hidden border rounded">
    <a href="#!" class="left button button-nav-light border-right">
      <svg class="icon" data-icon="chevron-left"></svg>
      Previous
    </a>
    <a href="#!" class="right button button-nav-light ">
      Next
      <svg class="icon" data-icon="chevron-right"></svg>
    </a>
    <div class="overflow-hidden sm-show">
      <a href="#!" class="left button button-nav-light dark-gray border-right">1</a>
      <a href="#!" class="left button button-nav-light border-right">2</a>
      <a href="#!" class="left button button-nav-light border-right">3</a>
      <a href="#!" class="left button button-nav-light border-right">4</a>
      <a href="#!" class="left button button-nav-light border-right">5</a>
    </div>
  </div>
</div>

Boxes

Bacon

Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin.

<div class="md-col-6">
  <div class="p2 bg-white border rounded">
    <h1 class="h2 mt0">Bacon</h1>
    <p class="mb0">Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin.</p>
  </div>
</div>

Bacon with Header

Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin.

<div class="md-col-6">
  <div class="overflow-hidden bg-white border rounded">
    <div class="p2 bg-light-gray">
      <h1 class="h2 m0">Bacon with Header</h1>
    </div>
    <div class="p2">
      <p class="m0">Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin.</p>
    </div>
  </div>
</div>

Bacon with Image

Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.

<div class="md-col-6">
  <div class="p2 bg-white border rounded">
    <img src="/docs/placeholder.svg" class="mb2" />
    <h1 class="h2 mt0">Bacon with Image</h1>
    <p class="mb0">Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
  </div>
</div>

Bacon with Header and Footer

Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin. Bacon t-bone hamburger turkey capicola rump short loin.

Turkey short loin tenderloin jerky.

<div class="md-col-6">
  <div class="overflow-hidden bg-white border rounded">
    <div class="p2 white bg-blue">
      <h1 class="h2 m0">Bacon with Header and Footer</h1>
    </div>
    <div class="p2">
      <p class="m0">Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin. Bacon t-bone hamburger turkey capicola rump short loin.</p>
    </div>
    <div class="p2 bg-darken-1">
      <p class="m0 h5">Turkey short loin tenderloin jerky.</p>
    </div>
  </div>
</div>

Flash Messages

Warning! Half-pound burger will be deleted
Onion rings cannot connect to the network
Fries added to order
<div class="bold center p2 mb2 white bg-red rounded">
  Warning! Half-pound burger will be deleted
</div>
<div class="bold center p2 mb2 bg-yellow rounded">
  Onion rings cannot connect to the network
</div>
<div class="bold center p2 white bg-green rounded">
  Fries added to order
</div>

Badges

Hamburger Fries

Hamburger Fries

Hamburger Fries

Hamburger Fries

Hamburger Fries
Hamburger Fries
<h1>Hamburger
  <span class="h2 button button-small white bg-red rounded">Fries</span>
</h1>
<h2>Hamburger
  <span class="h3 button button-small white bg-red rounded">Fries</span>
</h2>
<h3>Hamburger
  <span class="h4 button button-small white bg-red rounded">Fries</span>
</h3>
<h4>Hamburger
  <span class="button button-small white bg-red rounded">Fries</span>
</h4>
<h5>Hamburger
  <span class="button button-small white bg-red rounded">Fries</span>
</h5>
<h6>Hamburger
  <span class="button button-small white bg-red rounded">Fries</span>
</h6>
Blue Red Yellow Green Mid Gray Bordered
<div>
  <span class="button button-small white bg-blue rounded">Blue</span>
  <span class="button button-small white bg-red rounded">Red</span>
  <span class="button button-small bg-yellow rounded">Yellow</span>
  <span class="button button-small white bg-green rounded">Green</span>
  <span class="button button-small white bg-mid-gray rounded">Mid Gray</span>
  <span class="h6 caps button button-small border rounded">Bordered</span>
</div>
Button Sizes Button Groups Input Groups Dropdowns Navigation Breadcrumbs Pagination Navbars Boxes Flash Messages Badges