Nav abstraction

HTML

<link rel="stylesheet" href="http://inuitcss.com/inuit.min.css">
<ul class=nav>
    <li><a href=#>Home</a></li>
    <li><a href=#>About</a></li>
    <li><a href=#>Portfolio</a></li>
    <li><a href=#>Contact</a></li>
</ul>

<ul class="nav  nav--stacked">
    <li><a href=#>Home</a></li>
    <li><a href=#>About</a></li>
    <li><a href=#>Portfolio</a></li>
    <li><a href=#>Contact</a></li>
</ul>

<ul class="nav  nav--banner">
    <li><a href=#>Home</a></li>
    <li><a href=#>About</a></li>
    <li><a href=#>Portfolio</a></li>
    <li><a href=#>Contact</a></li>
</ul>

<ul class="nav  nav--block  foo">
    <li><a href=#>Home</a></li><!--
 --><li><a href=#>About</a></li><!--
 --><li><a href=#>Portfolio</a></li><!--
 --><li><a href=#>Contact</a></li>
</ul>

<ul class="nav  nav--fit  foo">
    <li><a href=#>Home</a></li>
    <li><a href=#>About</a></li>
    <li><a href=#>Portfolio</a></li>
    <li><a href=#>Contact</a></li>
</ul>

<ul class="nav  nav--keywords">
    <li><a href=#>Home</a></li>
    <li><a href=#>About</a></li>
    <li><a href=#>Portfolio</a></li>
    <li><a href=#>Contact</a></li>
</ul>

CSS

/**
 * These demo styles sit on top of inuit.css
 * github.com/csswizardry/inuit.css/blob/master/inuit.css/objects/_nav.scss
 */

html{
    font:1em/1.5 Georgia, serif;
    padding:5%;
    background-color:#fff;
    color:#333;
}

.foo a{
    background-color:#4a8ec2;
    color:#fff;
    border-left:1px solid #fff;
}
.foo li:first-child a{
    border-left:none;
}