Typography section 9. Showcase

»Home»Typography

About grids & columns showcase:

The content area is divided into few sections. This whole page demonstrates possible settings and layouts. The top of the page that you are looking at, with the big heading saying "Typography section 9. Showcase" is our opening container called "container_alpha" it has additional class "slogan" (which you don't have to use) to indicate that big headings go there - thus there is no need for additional margins on them. The "container_alpha" has soft gradient on the bottom part of it that ends with nice border transition into other containers. This way you can separate different content sections nicely - just like the slider is separated from the slogan area on mainpage.

The breadcrumb part is another container, this time - "container_gamma". This one has no gradient in it, is plain background color and still has border transition for next container.

The third part that in this case holds this text as well as the sidebar is called "container_omega". It has gradient on top of it as well as the bottom.

In case you'd want to put some more extra containers.. there are good news! There is also "container_omega_plus" that can be used multiple times.

But.. there is more!

Typography

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, and the last grid needs to have additional class "omega".

Let's see them in action:

<div class="gs_6"> 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.

<div class="gs_6 omega"> 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.

<div class="gs_4"> 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.

<div class="gs_4"> 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.

<div class="gs_4 omega"> 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.

<div class="gs_3"> 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.

<div class="gs_3"> 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.

<div class="gs_3"> 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.

<div class="gs_3 omega"> Duis id turpis non eros sodales posuere quis nec dui. Nulla volutpat mauris placerat orci fringilla nec lacinia lectus sollicitudin. Duis consequat suscipit molestie.

<div class="gs_2"> Nulla volutpat mauris placerat orci fringilla nec lacinia lectus sollicitudin. Duis consequat suscipit molestie.

<div class="gs_2"> Nulla volutpat mauris placerat orci fringilla nec lacinia lectus sollicitudin. Duis consequat suscipit molestie.

<div class="gs_3"> 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.

<div class="gs_5 omega"> 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.

Easy, right? But how about the sidebar?

Just add class "sidebar" to the grid you want!

<div class="gs_8"> 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.

Sidebar

This one has grid of size 4.

Adjust the size to your liking.

<div class="gs_10"> 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. 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.

Duis id turpis non eros sodales posuere quis nec dui. Nulla volutpat mauris placerat orci fringilla nec. 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.

Sidebar

This one has grid of size 2.

Sidebar mirror

This one has grid of size 3.

Or use mirrored sidebar.

<div class="gs_9 omega"> Mauris rutrum tempor lobortis. In semper tempus fermentum. Aliquam erat volutpat. Duis id turpis non eros sodales posuere quis nec dui. Nulla volutpat mauris placerat orci fringilla nec. 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.

Sidebar mirror

This one has grid of size 3.

Or two!

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

Sidebar

This one has grid of size 3.