navbars
<nav class='bg-primary txt-primary flx flx-maj-stretch flx-min-center'>
<div class="flx flx-min-center">
<p class='btn-txt txt-ucase pd-lg'>home</p>
<p class='btn-txt txt-ucase pd-lg'>products</p>
<p class='btn-txt txt-ucase pd-lg'>profile</p>
<p class='btn-txt txt-ucase pd-lg'>history</p>
</div>
<div class="flx flx-min-center">
<span class='material-icons pd-md icon-primary'>download</span>
<span class='material-icons pd-md icon-primary'>print</span>
<span class='material-icons pd-md icon-primary'>bookmark</span>
</div>
</nav>
<nav class='nav-md bg-off-primary txt-primary flx flx-maj-stretch flx-min-center'>
<div class="flx flx-min-center">
<p class='btn-txt txt-ucase pd-md'>home</p>
<p class='btn-txt txt-ucase pd-md'>products</p>
<p class='btn-txt txt-ucase pd-md'>profile</p>
<p class='btn-txt txt-ucase pd-md'>history</p>
</div>
<div class="flx flx-min-center">
<span class='material-icons pd-s icon-primary'>download</span>
<span class='material-icons pd-s icon-primary'>print</span>
<span class='material-icons pd-s icon-primary'>bookmark</span>
</div>
</nav>
<nav class='bg-secondary txt-secondary flx flx-maj-stretch flx-min-center'>
<div class="flx flx-min-center">
<p class='btn-solid txt-ucase pd-lg'>home</p>
<p class='btn-solid txt-ucase pd-lg'>products</p>
<p class='btn-solid txt-ucase pd-lg'>profile</p>
<p class='btn-solid txt-ucase pd-lg'>history</p>
</div>
<div>
<span class='material-icons pd-md icon-secondary'>download</span>
<span class='material-icons pd-md icon-secondary'>print</span>
<span class='material-icons pd-md icon-secondary'>bookmark</span>
</div>
</nav>
/* nav sizes */
.nav-s {
width: 30rem;
}
.nav-md {
width: 50rem;
}
.nav-lg {
width: 70rem;
}