A guide to creating user interface elements with Basscss
<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>
<div class="relative inline-block disclosure-group" data-disclosure>
<button type="button" class="button-blue">
Burger ▾
</button>
<div class="disclosure-show fixed top-0 right-0 bottom-0 left-0"></div>
<div class="disclosure-show absolute left-0 mt1 nowrap bg-dark-gray rounded">
<a href="#!" class="button block button-nav-dark">Rare</a>
<a href="#!" class="button block button-nav-dark">Medium Rare</a>
<a href="#!" class="button block button-nav-dark">Medium</a>
<a href="#!" class="button block button-nav-dark">Well Done</a>
</div>
</div>
<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>
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 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 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 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>
<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>
<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>
<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>