A flexbox based CSS micro-framework.

<h2>Responsive cards</h2>
<div class="wrapper sb-flex-row sb-wrap sb-ai-center sb-jc-space-ad sb-items-20-nogs sb-n-flex-col sb-n-ai-center">
        <div class="item">
            <img src="pic.png" alt="pic">
            <span>1</span>
        </div>
        <div class="item">
            <img src="pic.png" alt="pic">
            <span>2</span>
        </div>
        <div class="item">
            <img src="pic.png" alt="pic">
            <span>3</span>
        </div>
        <div class="item">
            <img src="pic.png" alt="pic">
            <span>4</span>
        </div>
        <div class="item">
            <img src="pic.png" alt="pic">
            <span>5</span>
        </div>
        <div class="item">
            <img src="pic.png" alt="pic">
            <span>6</span>
        </div>
        <div class="item">
            <img src="pic.png" alt="pic">
            <span>7</span>
        </div>
        <div class="item">
            <img src="pic.png" alt="pic">
            <span>8</span>
        </div>
        <div class="item">
            <img src="pic.png" alt="pic">
            <span>9</span>
        </div>
        <div class="item">
            <img src="pic.png" alt="pic">
            <span>10</span>
        </div>
        <div class="item">
            <img src="pic.png" alt="pic">
            <span>11</span>
        </div>
        <div class="item">
            <img src="pic.png" alt="pic">
            <span>12</span>
        </div>
    </div>

<h2>Navbar</h2>
<ul class="sb-flex-row sb-wrap sb-nowrap-l">
    <ul class="sb-flex-row sb-wrap sb-nowrap-l">
        <li class="sb-flex-basis-100-s sb-flex-basis-50-m sb-flex-grow-3-l"><span>link</span></li>
        <li class="sb-flex-basis-100-s sb-flex-basis-50-m sb-flex-grow-3-l"><span>link</span></li>
        <li class="sb-flex-basis-100-s sb-flex-basis-50-m sb-flex-grow-3-l"><span>link</span></li>
        <li class="sb-flex-basis-100-s sb-flex-basis-50-m sb-flex-grow-3-l"><span>link</span></li>
        <li class="sb-flex-basis-100-s sb-flex-basis-50-m sb-flex-grow-3-l"><span>link</span></li>
        <li class="sb-flex-basis-100-s sb-flex-basis-50-m sb-flex-grow-3-l"><span>link</span></li>

        <li class="sb-flex-basis-50-s sb-flex-basis-quarter-m sb-flex-grow-1-l"><span>fb</span></li>
        <li class="sb-flex-basis-50-s sb-flex-basis-quarter-m sb-flex-grow-1-l"><span>in</span></li>
        <li class="sb-flex-basis-50-s sb-flex-basis-quarter-m sb-flex-grow-1-l"><span>gh</span></li>
        <li class="sb-flex-basis-50-s sb-flex-basis-quarter-m sb-flex-grow-1-l"><span>tw</span></li>
    </ul>
</ul>

<h2>Mobile reordering</h2>
<div class="sb-flex-col-s">

    <header class="sb-order-1-s">
        <h1></h1>
    </header>
    <div class="mobile-width">
    <nav class="sb-order-0-s">

        <!-- Here like navbar example -->
        <ul class="sb-flex-row sb-wrap sb-nowrap-l">
        <li class="sb-flex-basis-100-s sb-flex-basis-50-m sb-flex-grow-3-l"><span>link</span></li>
        <li class="sb-flex-basis-100-s sb-flex-basis-50-m sb-flex-grow-3-l"><span>link</span></li>
        <li class="sb-flex-basis-100-s sb-flex-basis-50-m sb-flex-grow-3-l"><span>link</span></li>
        <li class="sb-flex-basis-100-s sb-flex-basis-50-m sb-flex-grow-3-l"><span>link</span></li>
        <li class="sb-flex-basis-100-s sb-flex-basis-50-m sb-flex-grow-3-l"><span>link</span></li>
        <li class="sb-flex-basis-100-s sb-flex-basis-50-m sb-flex-grow-3-l"><span>link</span></li>

        <li class="sb-flex-basis-50-s sb-flex-basis-quarter-m sb-flex-grow-1-l"><span>fb</span></li>
        <li class="sb-flex-basis-50-s sb-flex-basis-quarter-m sb-flex-grow-1-l"><span>in</span></li>
        <li class="sb-flex-basis-50-s sb-flex-basis-quarter-m sb-flex-grow-1-l"><span>gh</span></li>
        <li class="sb-flex-basis-50-s sb-flex-basis-quarter-m sb-flex-grow-1-l"><span>tw</span></li>
    </ul>
    </nav>
    </div>

    <section class="sb-order-4-s">
        <img src="">
    </section>

    <section class="sb-order-2-s">
      <p></p>
      <p></p>
    </section>

    <section class="sb-order-3-s">
      <form>
        <input type="" placeholder="">
        <input type="" placeholder="">
        <input type="" value="">
      </form>
    </section>

    <footer class="sb-last-item">
      <p></p>
    </footer>

</div>


<h2>Slider navbar</h2>
<nav>
    <ul class="sb-flex-row sb-nowrap sb-n-flex-row">
       
        <li class="sb-n-flex-row sb-flex-1">
            <a class="sb-ai-center" href="#"><span></span></a>
        </li>
        
        <li class="sb-n-flex-row sb-flex-2">
            <a class="sb-ai-center" href="#"><span></span></a>
        </li>
        
        <li class="sb-n-flex-row sb-flex-2">
            <a class="sb-ai-center" href="#"><span></span></a>
        </li>
       
        <li class="sb-n-flex-row sb-flex-2">
            <a class="sb-ai-center" href="#"><span></li>   
     
        <li class="sb-n-flex-row sb-flex-2">
            <a class="sb-ai-center" href="#"><span></span></a>
        </li>
        
        <li class="sb-n-flex-row sb-flex-1">
          <a class="sb-ai-center" href="#"><span></span></a>
        </li>

    </ul>
</nav>

.wrapper {
    border: 10px solid #b61827;
    background: #ef5350;
    min-height: 100vh;
}
.item {
    border: 10px solid #388e3c;
    background: #6abf69;
    padding: 15px 2%;
    margin: 5px;
    font-size: 2rem;
}

ul {
    list-style-type: none;
    color: #ffffff;
}

li {
    padding: 20px;
    background: #6abf69;
    border: 2px solid #00600f;
}

span {
    display: block;
    text-align: center;
}
.mobile-width{
    max-width: 567px;
}