Examples

Here some useful examples of how powerful this small framework is

Responsive cards (youtube video)

Strawberry's Code Used

<div class="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><img src="" alt=""><span></span></div>
    <div><img src="" alt=""><span></span></div>
    <div><img src="" alt=""><span></span></div>
    <div><img src="" alt=""><span></span></div>
    <div><img src="" alt=""><span></span></div>
    <div><img src="" alt=""><span></span></div>
    <div><img src="" alt=""><span></span></div>
    <div><img src="" alt=""><span></span></div>
    <div><img src="" alt=""><span></span></div>
    <div><img src="" alt=""><span></span></div>
    <div><img src="" alt=""><span></span></div>
    <div><img src="" alt=""><span></span></div>
</div>

Click here to view the code. You can try it here.

Navbar (youtube video)

Strawberry's Code Used

<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></span></li>
    <li class="sb-flex-basis-100-s sb-flex-basis-50-m sb-flex-grow-3-l"><span></span></li>
    <li class="sb-flex-basis-100-s sb-flex-basis-50-m sb-flex-grow-3-l"><span></span></li>
    <li class="sb-flex-basis-100-s sb-flex-basis-50-m sb-flex-grow-3-l"><span></span></li>
    <li class="sb-flex-basis-100-s sb-flex-basis-50-m sb-flex-grow-3-l"><span></span></li>
    <li class="sb-flex-basis-100-s sb-flex-basis-50-m sb-flex-grow-3-l"><span></span></li>

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

Click here to view the code. You can try it here.

Mobile reordering

Strawberry's Code Used

    <header class="sb-order-1-s">
        <h1></h1>
    </header>

    <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"><a href="#"></a></li>
            <li class="sb-flex-basis-100-s sb-flex-basis-50-m sb-flex-grow-3-l"><a href="#"></a></li>
            <li class="sb-flex-basis-100-s sb-flex-basis-50-m sb-flex-grow-3-l"><a href="#"></a></li>
            <li class="sb-flex-basis-100-s sb-flex-basis-50-m sb-flex-grow-3-l"><a href="#"></a></li>
            <li class="sb-flex-basis-100-s sb-flex-basis-50-m sb-flex-grow-3-l"><a href="#"></a></li>
            <li class="sb-flex-basis-100-s sb-flex-basis-50-m sb-flex-grow-3-l"><a href="#"></a></li>

            <li class="sb-flex-basis-50-s sb-flex-basis-quarter-m sb-flex-grow-1-l"><a href=""><i></i></a></li>
            <li class="sb-flex-basis-50-s sb-flex-basis-quarter-m sb-flex-grow-1-l"><a href=""><i></i></a></li>
            <li class="sb-flex-basis-50-s sb-flex-basis-quarter-m sb-flex-grow-1-l"><a href=""><i></i></a></li>
            <li class="sb-flex-basis-50-s sb-flex-basis-quarter-m sb-flex-grow-1-l"><a href=""><i></i></a></li>
     
        </ul>
    </nav>

    <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>

Click here to view the code. You can try it here.