Hoisin.scss

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.

Responsive grid system

Grid samples with regular gaps

Please note the spans or columns used in these samples have a box with added background colour and padding.


Full width span
<div class="grid">
    <div class="span">
        <div class="box">
            1/1
        </div>
    </div>
</div>
1/1
Two half width spans
<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>
1/2
1/2
Three one third spans
<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>
1/3
1/3
1/3
Four one fourth spans on large and medium and 2 on mobile. Note that using flexbox on the spans allows the shorter items to match the height of the longest one.
<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>
1/4
1/4
1/4 lorem ipsum dolor sit amet consectetur adipisicing elit
1/4
Five one fifth spans on large and medium and 2 on mobile. Default maxumim amount of spans is 6, but you can add more but changing the corresponding variable in the grid variables file.
<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>
1/5
1/5
1/5
1/5
1/5

Common layout samples with sidebar

Feel free to add other options in your project as needed, following the examples provided in each of the breakpoint grid files.


Content area with narrow sidebar on the right side
<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>
Main content
Content area with narrow sidebar on the left side. Note the HTML order did change from the previous example.
<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>
Main content
Content area with wide sidebar on the right side
<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>
Main content
Content area with wide sidebar on the left side. Note the HTML order did change from the previous example.
<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>
Main content

Alternating content position

Common use of alternate block layout samples using the 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

Same example using three spans. This can be achieved with up to the configurable maximum number of spans set up in the grid.
<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

Other examples

We've put together a series of common use layouts to show how Hoisin can be used to recreate then.


Narrow content, mostly used for simple content pages to avoid long lines of text.
<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>

Narrow content

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?

Wide content, mostly used for simple content pages to avoid long lines of text.
<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>

Wide content

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius quisquam distinctio.

Wide content

Eius quisquam distinctio, aperiam quaerat eligendi ipsam eaque nisi quam id, labore minus!

Remove gaps from the grid elements
<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>

No gaps, tight grid

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius quisquam distinctio.

No gaps, tight grid

Eius quisquam distinctio, aperiam quaerat eligendi ipsam eaque nisi quam id, labore minus!

Full width background with wide grid and no gaps. Note the full background has been applied to a wrapper using a CSS gradient.
<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>

No gaps and wide

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius quisquam distinctio.

No gaps and wide

Eius quisquam distinctio, aperiam quaerat eligendi ipsam eaque nisi quam id, labore minus!


Full width background with alternating grid layout, no gaps and vertically centred content using the .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>
Photo from Lorem Pixel

Pellentesque ipsum tortor

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.

Photo from Lorem Pixel

Pellentesque ipsum tortor

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.