No gaps, tight grid
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius quisquam distinctio.
These are a series of layout samples using Hoisin.scss grid system and its helpers. You can resize the browser window to see how they react in different screen sizes.
Please note that because the spans have been set up with flexbox, you may need to wrap content inside them in your own container so they flow down naturally instead of being placed horizontally by flexbox.
Please note the spans or columns used in these samples have a box with added background colour and padding.
<div class="grid">
<div class="span">
<div class="box">
1/1
</div>
</div>
</div>
<div class="grid lg-2 md-2 sm-2">
<div class="span">
<div class="box">
1/2
</div>
</div>
<div class="span">
<div class="box">
1/2
</div>
</div>
</div>
<div class="grid lg-3 md-3 sm-3">
<div class="span">
<div class="box">
1/3
</div>
</div>
<div class="span">
<div class="box">
1/3
</div>
</div>
<div class="span">
<div class="box">
1/3
</div>
</div>
</div>
<div class="grid lg-4 md-4 sm-2">
<div class="span">
<div class="box">
1/4
</div>
</div>
<div class="span">
<div class="box">
1/4
</div>
</div>
<div class="span">
<div class="box">
1/4 lorem ipsum dolor sit amet consectetur adipisicing elit
</div>
</div>
<div class="span">
<div class="box">
1/4
</div>
</div>
</div>
<div class="grid lg-5 md-5 sm-2">
<div class="span">
<div class="box">
1/5
</div>
</div>
<div class="span">
<div class="box">
1/5
</div>
</div>
<div class="span">
<div class="box">
1/5
</div>
</div>
<div class="span">
<div class="box">
1/5
</div>
</div>
<div class="span">
<div class="box">
1/5
</div>
</div>
</div>
Feel free to add other options in your project as needed, following the examples provided in each of the breakpoint grid files.
<div class="grid lg-sidebar-right md-sidebar-right">
<div class="span">
<div class="box">
Main content
</div>
</div>
<div class="span">
<div class="box">
Sidebar
</div>
</div>
</div>
<div class="grid lg-sidebar-left md-sidebar-left">
<div class="span">
<div class="box">
Sidebar
</div>
</div>
<div class="span">
<div class="box">
Main content
</div>
</div>
</div>
<div class="grid lg-wide-sidebar-right md-wide-sidebar-right">
<div class="span">
<div class="box">
Main content
</div>
</div>
<div class="span">
<div class="box">
Sidebar
</div>
</div>
</div>
<div class="grid lg-wide-sidebar-left md-wide-sidebar-left">
<div class="span">
<div class="box">
Sidebar
</div>
</div>
<div class="span">
<div class="box">
Main content
</div>
</div>
</div>
grid-reverse
helper. Please note these only work with equally sized spans. Note on mobile they keep the natural HTML order.
<div class="grid lg-2 md-2">
<div class="span">
<div class="box">
<p class="big">1</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
</div>
</div>
<div class="span">
<div class="box">
<p class="big">2</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
</div>
</div>
</div>
<div class="grid lg-2 md-2 grid-reverse">
<div class="span">
<div class="box">
<p class="big">1</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
</div>
</div>
<div class="span">
<div class="box">
<p class="big">2</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
</div>
</div>
</div>
1
Lorem ipsum dolor sit amet consectetur adipisicing elit
2
Lorem ipsum dolor sit amet consectetur adipisicing elit
1
Lorem ipsum dolor sit amet consectetur adipisicing elit
2
Lorem ipsum dolor sit amet consectetur adipisicing elit
<div class="grid lg-2 md-2 grid-reverse">
<div class="span">
<div class="box">
<p class="big">1</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
</div>
</div>
<div class="span">
<div class="box">
<p class="big">2</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
</div>
</div>
<div class="span">
<div class="box">
<p class="big">3</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
</div>
</div>
</div>
1
Lorem ipsum dolor sit amet consectetur adipisicing elit
2
Lorem ipsum dolor sit amet consectetur adipisicing elit
3
Lorem ipsum dolor sit amet consectetur adipisicing elit
We've put together a series of common use layouts to show how Hoisin can be used to recreate then.
<div class="grid grid-narrow">
<div class="span">
<div class="box">
<h3>Narrow content</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius quisquam distinctio, aperiam quaerat eligendi ipsam eaque nisi quam id, labore minus! Alias voluptatem explicabo fuga? Ex pariatur natus ipsum explicabo?</p>
</div>
</div>
</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius quisquam distinctio, aperiam quaerat eligendi ipsam eaque nisi quam id, labore minus! Alias voluptatem explicabo fuga? Ex pariatur natus ipsum explicabo?
<div class="grid grid-wide lg-2 md-2">
<div class="span">
<div class="box">
<h3>Wide content</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius quisquam distinctio.</p>
</div>
</div>
<div class="span">
<div class="box">
<h3>Wide content</h3>
<p>Eius quisquam distinctio, aperiam quaerat eligendi ipsam eaque nisi quam id, labore minus!</p>
</div>
</div>
</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius quisquam distinctio.
Eius quisquam distinctio, aperiam quaerat eligendi ipsam eaque nisi quam id, labore minus!
<div class="grid grid-tight lg-2 md-2">
<div class="span">
<article class="sp1">
<h3>No gaps, tight grid</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius quisquam distinctio.</p>
</article>
</div>
<div class="span">
<article class="sp5">
<h3>No gaps, tight grid</h3>
<p>Eius quisquam distinctio, aperiam quaerat eligendi ipsam eaque nisi quam id, labore minus!</p>
</article>
</div>
</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius quisquam distinctio.
Eius quisquam distinctio, aperiam quaerat eligendi ipsam eaque nisi quam id, labore minus!
<div class="gradient">
<div class="grid grid-tight lg-2 md-2">
<div class="span">
<article class="sp1">
<h3>No gaps, tight grid</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius quisquam distinctio.</p>
</article>
</div>
<div class="span">
<article class="sp2">
<h3>No gaps, tight grid</h3>
<p>Eius quisquam distinctio, aperiam quaerat eligendi ipsam eaque nisi quam id, labore minus!</p>
</article>
</div>
</div>
</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius quisquam distinctio.
Eius quisquam distinctio, aperiam quaerat eligendi ipsam eaque nisi quam id, labore minus!
.span-middle
helper. Project-specific padding and spacing has been added to the content areas to improve the look.
<div class="grey">
<div class="grid grid-tight lg-2 md-2 grid-reverse">
<div class="span">
<div class="content-image">
<img src="http://lorempixel.com/output/nature-q-c-1000-640-4.jpg" alt="Photo from Lorem Pixel">
</div>
</div>
<div class="span span-middle">
<div class="content-area">
<h3>Pellentesque ipsum tortor</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas deleniti, iusto voluptatum amet, maiores esse sapiente quidem maxime sequi ut veritatis rem delectus nisi aliquid.</p>
</div>
</div>
</div>
<div class="grid grid-tight lg-2 md-2">
<div class="span">
<div class="content-image">
<img src="http://lorempixel.com/output/technics-q-c-1000-640-7.jpg" alt="Photo from Lorem Pixel">
</div>
</div>
<div class="span span-middle">
<div class="content-area">
<h3>Pellentesque ipsum tortor</h3>
<p>Lorem ipsum dolor sit amet consectetur elit. Quas eos natus earum magnam doloremque deleniti, iusto voluptatum amet, maiores esse sapiente quidem maxime sequi ut veritatis rem delectus nisi aliquid.</p>
</div>
</div>
</div>
</div>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas deleniti, iusto voluptatum amet, maiores esse sapiente quidem maxime sequi ut veritatis rem delectus nisi aliquid.
Lorem ipsum dolor sit amet consectetur elit. Quas eos natus earum magnam doloremque deleniti, iusto voluptatum amet, maiores esse sapiente quidem maxime sequi ut veritatis rem delectus nisi aliquid.