Examples

Andrea Simone Costa edited this page Jun 14, 2018 · 29 revisions

Here some useful examples of how powerful this small framework is



Responsive cards (youtube video)

responsive cards

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)

responsive cards

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-css logo strawberry-css logo

Strawberry's Code Used

<div class="sb-flex-col-s">

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

</div>

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

Slider navbar

strawberry-css logo

Strawberry's Code Used

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

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

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.