hatefulcrawdad

// Control which components you get if customizing

// @import "foundation/components/modules/buttons";
// @import "foundation/components/modules/tabs";
// @import "foundation/components/modules/ui";
// @import "foundation/components/modules/topbar";
// @import "foundation/components/modules/navbar";
// @import "foundation/components/modules/orbit";
// @import "foundation/components/modules/reveal";
// @import "foundation/components/modules/offcanvas";

hatefulcrawdad

// Control which mixins you have access too

// @import "foundation/mixins/clearfix";
// @import "foundation/mixins/css-triangle";
// @import "foundation/mixins/font-size";

// Must include next two for semantic grid to work

// @import "foundation/mixins/respond-to";
// @import "foundation/mixins/semantic-grid";

hatefulcrawdad

// You custom settings file to override Foundation defaults
@import "settings";

// Comment out this import if you are customizing you imports below
@import "foundation";

hatefulcrawdad

// Import specific parts of Foundation by commenting the import "foundation"
// and uncommenting what you want below. You must uncomment the following if customizing

// @import "compass/css3";
// @import "foundation/settings";
// @import "foundation/functions/all";

hatefulcrawdad

<div id="fqv" style="position:fixed;top:4px;left:4px;z-index:999;color:#fff;"><p style="font-size:12px;background:rgba(0,0,0,0.75);padding:5px;margin-bottom:1px;line-height:1.2;"><span class="left">Media:</span> <span style="font-weight:bold;" class="show-for-xlarge">Extra Large</span><span style="font-weight:bold;" class="show-for-large">Large</span><span style="font-weight:bold;" class="show-for-medium">Medium</span><span style="font-weight:bold;" class="show-for-small">Small</span><span style="font-weight:bold;" class="show-for-landscape">Landscape</span><span style="font-weight:bold;" class="show-for-portrait">Portrait</span><span style="font-weight:bold;" class="show-for-touch">Touch</span></p></div>

hatefulcrawdad

// UNCOMMENT THE LINE YOU WANT BELOW IF YOU WANT IE8 SUPPORT AND ARE USING .block-grids
// $('.block-grid.two-up>li:nth-child(2n+1)').css({clear: 'both'});
// $('.block-grid.three-up>li:nth-child(3n+1)').css({clear: 'both'});
// $('.block-grid.four-up>li:nth-child(4n+1)').css({clear: 'both'});
// $('.block-grid.five-up>li:nth-child(5n+1)').css({clear: 'both'});

hatefulcrawdad

<div class="row">
  <div class="five columns">
    <label class="error">Field with Error</label>
    <input type="text" class="error" />
    <small class="error">Invalid entry</small>
  </div>
  
  <div class="five columns end error">
    <label>Another Error</label>
    <input type="text" />

hatefulcrawdad

<ul class="breadcrumbs">
  <li><a href="#">Home</a></li>
  <li><a href="#">Features</a></li>
  <li class="unavailable"><a href="#">Gene Splicing</a></li>
  <li class="current"><a href="#">Home</a></li>
</ul>

<ul class="breadcrumbs">
  <li><span>Home</span></li>
  <li><span>Features</span></li>

hatefulcrawdad

<i class="foundicon-[icon]"></i>

hatefulcrawdad

[class*="social foundicon-"]:before {
  font-family: "SocialFoundicons";
}