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

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