Typography section 9. Showcase

Grids & Containers

This is grid of size 8, the sidebar has grid of size 4. Duis rutrum porta sem, sit amet consequat quam dapibus vel. Sed vitae libero varius elit faucibus facilisis. Aenean diam erat, varius ac rhoncus eget, ornare ac nulla. Etiam tristique vehicula eros, pretium pellentesque mi suscipit ut. Maecenas eleifend fermentum libero, nec placerat erat faucibus quis. Nullam sit amet ligula nulla, ut venenatis diam. Nunc venenatis vehicula urna, tempor aliquet nunc dapibus ut. Duis condimentum laoreet nibh eu semper. Praesent a suscipit nisi.

Donec lobortis, urna dictum tincidunt volutpat, felis magna facilisis sapien, et tincidunt nisl urna nec massa. Nam ornare sollicitudin nibh sed facilisis. Suspendisse malesuada, libero quis mattis fringilla, ligula metus luctus velit, quis aliquet risus nulla nec augue. Donec suscipit dolor in metus blandit vitae rutrum lacus dapibus. Aliquam nisi nibh, varius suscipit rutrum id, posuere at metus. Nunc gravida libero eget risus ornare volutpat. Sed accumsan, est sit amet laoreet facilisis, lacus mi luctus tellus, in fermentum est massa in lorem. Aenean fringilla feugiat nisi, non cursus velit elementum quis. Mauris purus nisl, porta ut facilisis nec, pharetra quis augue. Aenean suscipit tempor odio vitae dignissim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget feugiat lacus. Etiam lectus ante, varius eu pharetra sed, accumsan ut nulla. Vivamus in tellus a tellus blandit mollis. Phasellus placerat lacus id nisi sodales vitae aliquet elit lobortis. Donec ac urna tortor, in volutpat ante. Etiam eu diam eget leo laoreet cursus ut bibendum elit. Sed nulla enim, egestas eu gravida quis, pharetra ac quam. Nullam eget turpis orci, quis ultrices augue. Vestibulum id tellus fermentum massa dignissim imperdiet. Quisque eget leo risus, a accumsan metus. Phasellus in dolor nunc. Ut non rhoncus lectus. Nam ornare sollicitudin nibh sed facilisis. Suspendisse malesuada, libero quis mattis fringilla, ligula metus luctus velit, quis aliquet risus nulla nec augue. Donec suscipit dolor in metus blandit vitae rutrum lacus dapibus. Aliquam nisi nibh, varius suscipit rutrum id, posuere at metus.

Suspendisse eget feugiat lacus. Etiam lectus ante, varius eu pharetra sed, accumsan ut nulla. Vivamus in tellus a tellus blandit mollis. Phasellus placerat lacus id nisi sodales vitae aliquet elit lobortis. Donec ac urna tortor, in volutpat ante. Etiam eu diam eget leo laoreet cursus ut bibendum elit. Sed nulla enim, egestas eu gravida quis, pharetra ac quam. Nullam eget turpis orci, quis ultrices augue. Vestibulum id tellus fermentum massa dignissim imperdiet. Quisque eget leo risus, a accumsan metus.

Additional content blocks! You can have as many as you like!

And all of them can have containers of their own.

And then, you can cut the containers into grids!

So, what are those grids?

Grids are simply – columns. The main block of the theme is divided into 12 grids and you can use them to create columns of various sizes. Only rules are – the sum of all grids in a row need to equal 12, the first grid needs “a” after it, and the last grid needs to have “z” after it.

Let’s see them in action:

gs_1a Lorem ipsum dolor.

gs_1 Lorem ipsum dolor.

gs_1 Lorem ipsum dolor.

gs_1 Lorem ipsum dolor.

gs_1 Lorem ipsum dolor.

gs_1 Lorem ipsum dolor.

gs_1 Lorem ipsum dolor.

gs_1 Lorem ipsum dolor.

gs_1 Lorem ipsum dolor.

gs_1 Lorem ipsum dolor.

gs_1 Lorem ipsum dolor.

gs_1z Lorem ipsum dolor.

gs_2a Lorem ipsum dolor sit amet, consectetur.

gs_2 Lorem ipsum dolor sit amet, consectetur.

gs_2 Lorem ipsum dolor sit amet, consectetur.

gs_2 Lorem ipsum dolor sit amet, consectetur.

gs_2 Lorem ipsum dolor sit amet, consectetur.

gs_2z Lorem ipsum dolor sit amet, consectetur.

gs_3a Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dictum.

gs_3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dictum.

gs_3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dictum.

gs_3z Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dictum.

gs_4a Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dictum, lorem non ultrices vestibulum.

gs_4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dictum, lorem non ultrices vestibulum.

gs_4z Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dictum, lorem non ultrices vestibulum.

gs_5a Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dictum, lorem non ultrices vestibulum, sapien arcu faucibus turpis.

gs_2 Lorem ipsum dolor sit amet, consectetur.

gs_5z Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dictum, lorem non ultrices vestibulum, sapien arcu faucibus turpis.

gs_6a Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dictum, lorem non ultrices vestibulum, sapien arcu faucibus turpis, vitae mollis arcu erat eget massa.

gs_6z Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dictum, lorem non ultrices vestibulum, sapien arcu faucibus turpis, vitae mollis arcu erat eget massa.

gs_7a Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dictum, lorem non ultrices vestibulum, sapien arcu faucibus turpis, vitae mollis arcu erat eget massa. Vestibulum ante ipsum primis.

gs_2 Lorem ipsum dolor sit amet, consectetur.

gs_3z Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dictum.

gs_8a Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dictum, lorem non ultrices vestibulum, sapien arcu faucibus turpis, vitae mollis arcu erat eget massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

gs_4z Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dictum, lorem non ultrices vestibulum.

gs_9a Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dictum, lorem non ultrices vestibulum, sapien arcu faucibus turpis, vitae mollis arcu erat eget massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

gs_3z Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dictum.

gs_10a Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dictum, lorem non ultrices vestibulum, sapien arcu faucibus turpis, vitae mollis arcu erat eget massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

gs_2z Lorem ipsum dolor sit amet, consectetur.

gs_11a Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dictum, lorem non ultrices vestibulum, sapien arcu faucibus turpis, vitae mollis arcu erat eget massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; ipsum dolor sit amet, consectetur adipiscing elit. Aenean dictum, lorem non ultrices vestibulum.

gs_1z Lorem ipsum.

gs_12 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dictum, lorem non ultrices vestibulum, sapien arcu faucibus turpis, vitae mollis arcu erat eget massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; ipsum dolor sit amet, consectetur adipiscing elit. Aenean dictum, lorem non ultrices vestibulum.

Easy, right? But how about the sidebar?

Call sidebars inside pages!

Mauris rutrum tempor lobortis. In semper tempus fermentum. Ut urna diam, luctus ac feugiat sed, convallis in nunc. Aliquam erat volutpat. Duis id turpis non eros sodales posuere quis nec dui. Nulla volutpat mauris placerat orci fringilla nec lacinia lectus sollicitudin. Duis consequat suscipit molestie.

In semper tempus fermentum. Ut urna diam, luctus ac feugiat sed, convallis in nunc. Volutpat mauris placerat orci fringilla nec lacinia lectus sollicitudin. Duis consequat suscipit molestie.

Call sidebars inside pages!

Mauris rutrum tempor lobortis. In semper tempus fermentum. Ut urna diam, luctus ac feugiat sed, convallis in nunc. Aliquam erat volutpat. Duis id turpis non eros sodales posuere quis nec dui. Nulla volutpat mauris placerat orci fringilla nec lacinia lectus sollicitudin. Duis consequat suscipit molestie.

In semper tempus fermentum. Ut urna diam, luctus ac feugiat sed, convallis in nunc. Volutpat mauris placerat orci fringilla nec lacinia lectus sollicitudin. Duis consequat suscipit molestie.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget feugiat lacus. Etiam lectus ante, varius eu pharetra sed, accumsan ut nulla. Vivamus in tellus a tellus blandit mollis. Phasellus placerat lacus id nisi sodales vitae aliquet elit lobortis. Donec ac urna tortor, in volutpat ante. Etiam eu diam eget leo laoreet cursus ut bibendum elit. Sed nulla enim, egestas eu gravida quis, pharetra ac quam. Nullam eget turpis orci, quis ultrices augue. Vestibulum id tellus fermentum massa dignissim imperdiet. Quisque eget leo risus, a accumsan metus. Phasellus in dolor nunc. Ut non rhoncus lectus. Nam ornare sollicitudin nibh sed facilisis. Suspendisse malesuada, libero quis mattis fringilla, ligula metus luctus velit, quis aliquet risus nulla nec augue. Donec suscipit dolor in metus blandit vitae rutrum lacus dapibus. Aliquam nisi nibh, varius suscipit rutrum id, posuere at metus.