This repository has been archived by the owner on Sep 27, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 5
Examples
Andrea Simone Costa edited this page Jun 14, 2018
·
29 revisions
<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.
<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.
<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.
<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>