Grid

The structure of a page is made up of 4 DOM elements. In order to build pages easily, it is important to understand the grid system. Every section on your website contains the following structure. Region > Layout > Grid > Column(s).

Installation

The Grid is automatically included when you install and embed vl-ui-core.

Region

The Region element (.vl-region) is used to define the sections on your website. It makes sure there is consistent spacing between the different sections available on a page. As an example: a page which contains the modules "intro", "portfolio", "news" and "contact", will be wrapped inside four different regions.

Using .vl-region--alt makes the background of the region light gray.

                      
                        
...

intro

portfolio

news

contact

...

Layout

The Layout element (.vl-layout) centers your content in the viewport. The Layout element has a width of 1200px. You can compare the Layout element with the Container element in Bootstrap.

                      
                          ...
                          
...
...

Grid

This is the fun part: We use a standard 12-column fluid responsive grid system. The grid (.vl-grid) helps you to orderly lay out your page. It's entirely built on Flexbox. You can compare the Grid element to the Row element in Bootstrap, or the Columns element in Bulma.

                      
                        
...

Modifiers

The following modifiers all react to the direct children columns. Without using columns within, the grid wrapper is completely useless.

Stacking

Use the .vl-grid--is-stacked modifier to add a margin between the stacked columns.

We are stacked!

We are stacked!

We are stacked!

                          
                            

We are stacked!

We are stacked!

We are stacked!

Alignment

  • Use the .vl-grid--align-start modifier to align one or more columns to the left. (This is the default behavior)
  • Use the .vl-grid--align-center modifier to align one or more columns to the center.
  • Use the .vl-grid--align-end modifier to align one or more columns to the right.
  • Use the .vl-grid--align-space-between modifier to add as much space as possible between two or more columns.
  • Use the .vl-grid--align-space-around modifier to add as much space as possible around two or more columns.

I am aligned to the left

I am aligned to the center

I am aligned to the right

There is as much space as possible between us!

There is as much space as possible between us!

There is as much space as possible around us!

There is as much space as possible around us!

                          
                            

I am aligned to the left, default behaviour.

I am aligned to the center.

I am aligned to the right.

There is as much space as possible between us!

There is as much space as possible between us!

There is as much space as possible around us!

There is as much space as possible around us!

Vertical alignment

  • Use the .vl-grid--v-top modifier to align one or more columns at the top. (This is the default behavior)
  • Use the .vl-grid--v-center modifier to center one or more columns vertically.
  • Use the .vl-grid--v-bottom modifier to align one or more columns at the bottom.
  • Use the .vl-grid--v-stretch modifier stretch to stretch the columns to their maximum height.

I am aligned to the top

I am aligned to the center

I am aligned to the bottom

I am stretched to the full grid height

                          
                            

I am aligned to the top, default behaviour.

I am aligned to the center vertically.

I am aligned to the bottom.

I am stretched over the entire height.

Columns

A standard column looks like this:

I take 4/12 of the grid width!

                          
                            

The modifier vl-col--4-12 translates into .vl-col--[no of items to span]-[total items]. In our example the grid item will take up 4/12 of the total grid width.

Suppose you want to create a layout with 2 columns, the first 2/3rds wide for content and the second 1/3rds wide as a sidebar. The markup would look like this:

                      
                        

This is my main content

Equivalent-fractions

Our grid has a special feature called equivalent-fractions, which creates additional selectors for simplified fractions. This sounds complicated but it is here to make your code more readable and understandable. Above we created a 12-column grid. 12 columns has become somewhat of a standard for web-based grids mostly because it can be divided by 6,4,3,2 and 1. As a result, we could write all our classes as 12ths fractions, e.g.

                      
                        

Alternatively, we can write the same thing as a simplified equivalent fraction e.g.

                      
                        

Making things responsive

To make the Grid responsive we use BEM notated modifiers. The modifiers (l, m, s, xs) are used throughout our codebase.

This is an example where the column changes in size on medium, small and xsmall screens. By default, it takes 1/4th of the width. On medium sized screens, it takes 1/3rd of the width. On small screens, it takes half the width. On xsmall screens the column becomes full width.

I am 3/12 on large, 4/12 on medium, 6/12 on small and full width on xsmall!

                          
                            

Pushing a column

If you need to push a column use .vl-push--[no of items to push]-[total items].

I am pushed by 1/12th!

                          
                            

I am pushed by 1/12th!

Modifiers work on push classes as well.

                      
                        

I am pushed by 1/12th by default, and 2/12th on small screens!

To reset (remove) the push, use .vl-push--reset.

                      
                        

I am pushed by 1/12th by default, and resetted on medium sized screens!

Nesting columns

You can nest columns in other columns easily. Just make sure the Grid wrapper is always the direct parent of your columns.

We are only the half of 7/12th

We are only the half of 7/12th

                          
                            

We are only the half of 7/12th

We are only the half of 7/12th