Back to blue

Layout

There are some helpers classes we can use for building the layout of our pages. These classes are structural bare bones only.

Implementation

Make sure to include the CSS into your page or project:

<link rel="stylesheet" type="text/css" media="all" href="{{ static('css/ca_sg_layout.css') }}" />

Classes quick reference

Class Description
h-sect Section wrappers which contain a default padding at the top and bottom of 1rem (16px)
h-sect--pad-2 2rem padding (32px)
h-sect--pad-3 3rem padding (48px)
h-sect--pad-4 4rem padding (64px)
h-sect--wh White background
h-sect--gry Light gray background
h-col-stk Wrapper to use on sticky aside implementations, it should contain the sticky column and all the sections you want the stuck element should float over.
h-cont main column class. It contains the max-width on each tablet/desktop sizes and the right and left padding on mobile.
h-cont--mb-h-pad Reduces the left and right padding on mobile. To use in combinations with cards
h-cont--aside Makes the container an aside left column on desktop. (sticky aside implementations)
h-cont--aside-rg To use in combination with h-cont--aside. Moves the column to the right. (sticky aside implementations)
h-cont--main Makes the container a main right column on desktop. (sticky aside implementations)
h-cont--main-sm To be used alongside the h-cont--main class, it makes the main column a little bit smaller (half a grid column smaller)
h-cont--main-lf To use in combination with h-cont--main. Moves the column to the left. (sticky aside implementations)
h-sticky Sticks the element to the window 16px (1rem) below the site header.
h-col Column container element which creates a CSS grid
h-col--invert Inverts the main and aside columns
h-col__side Side left column. (it moves to the right if the h-col--invert modifier is used on the parent)
h-col__main Main right column. (it moves to the left if the h-col--invert modifier is used on the parent)
h-flx Creates a flexbox container.
h-flx--collapsed Adds a negative margin top and bottom to the container to avoid the vertical gap.
h-flx__col-# A column wich takes # column(s) width from the grid as the minimum size.
h-card Card helper. White background and inner padding.
h-hd-main To use on the main container of the page, adds a margin-top equal to the header height to avoid an overlapping between the content and the sticky header.
h-coll-vert Removes the margin top from the first child element and the margin bottom from the last child.

Grid

We have a flexible grid with columns no smaller than 71px and gutters of 20px. The number of columns on each screen size is dynamic and it follows the rules expressed at the beginning of this paragraph (In summary, as many columns as they fit while each of them is not smaller than 71px). As a reference:

  • Mobile (320px to 767px) From 3 to 8 columns
  • Tablet (768px to 991px) 8 columns
  • Desktop (992px to 1199px) 10 columns
  • Desktop (big screen) (more than 1200px) 12 columns
  • WARNING: CSS grid (and the example underneth) doesn't work very good on IE11. Use with caution and apply the necessary fixes on each case basis. (Check for support - Brief: use display: -ms-grid;, gaps are not supported, grid-template-areas not supported, you have to set every cell into the right spot using -ms-grid-column, -ms-grid-row and/or -ms-grid-row-span)
1
2
3
4
5
6
7
8
9
10
11
12

You can use the h-col class on the main container or any other nested container and it'll create a CSS grid on it. This nested grid should fit inside the main grid, if you change the size or add a margin the columns and gutters of the nested grid are not going to fit into the main one.

3 columns

Main column (underneath you can see a nested grid)

1
2
3
4
5
6
7
8
9

Flexible-fluid columns (flexbox)

Based on the CSS grid described above, there is a flexbox implementation to create fluid columns. The columns are 71px wide as a minimum but they can expand and they wrap into a new line if there is no more room for them.

The h-flx creates the flex container (notice a negative margin of 10px is applied to it).

You can also use the h-flx--collapsed modifier class to the flex container to add a negative top and bottom margin and avoid the vertical gap. This is especially useful if you nest a flex container inside another.

Then you can create the columns inside of it. The number in the column class is the minimum size the column can shrink, but the columns can be bigger than

  • h-flx__col-1: 1 column minimum
  • h-flx__col-2: 2 columns minimum
  • h-flx__col-3: 3 columns minimum
  • h-flx__col-4: 4 columns minimum
  • h-flx__col-5: 5 columns minimum
  • h-flx__col-6: 6 columns minimum
  • h-flx__col-7: 7 columns minimum
  • h-flx__col-8: 8 columns minimum
  • h-flx__col-9: 9 columns minimum
  • h-flx__col-10: 10 columns minimum
  • h-flx__col-11: 11 columns minimum
<div class="h-cont"> // This div creates the main container but is not mandatory. <div class="h-flx"> // This flex container can be used inside a main container or inside any column <div class="h-flx__col-1">1</div> <div class="h-flx__col-1">2</div> <div class="h-flx__col-1">3</div> <div class="h-flx__col-1">4</div> <div class="h-flx__col-1">5</div> <div class="h-flx__col-1">6</div> <div class="h-flx__col-1">7</div> <div class="h-flx__col-1">8</div> <div class="h-flx__col-1">9</div> <div class="h-flx__col-1">10</div> <div class="h-flx__col-1">11</div> <div class="h-flx__col-1">12</div> </div> </div>
1
2
3
4
5
6
7
8
9
10
11
12
h-flx__col-2
h-flx__col-2
h-flx__col-2
h-flx__col-2
h-flx__col-2
h-flx__col-2
h-flx__col-3
h-flx__col-3
h-flx__col-3
h-flx__col-3
h-flx__col-4
h-flx__col-4
h-flx__col-5
h-flx__col-7
h-flx__col-6
h-flx__col-6
  • NOTICE the value in the column is the minimum. You don't have to create a 12 column layout per row every time.

Example: The following snippet is going to create 3 columns.

On desktop (12 columns) the first columns is going to be 2 columns wide, the second one 4 columns wide and the last one 6 columns wide. If you downsize your window, the columns will remain on the same row as far as the grid contains at least 6 columns (1 + 2 + 3)

The first and second column will be always on the same row because our mobile grid has 3 columns.

<div class="h-flx"> <div class="h-flx__col-1">1</div> <div class="h-flx__col-2">2</div> <div class="h-flx__col-3">3</div> </div>
h-flx__col-1
h-flx__col-2
h-flx__col-3

Sections and container

The section classes h-sect are meant to be section wrappers which contain a default padding at the top and bottom of 1rem (16px). If you need bigger padding you can use a modifier to increase the padding by 1rem at a time.

The usage of rem units allows us to have consistent spacing and a defined vertical rhythm.

  • h-sect--pad-2: 2rem padding (32px)
  • h-sect--pad-3: 3rem padding (48px)
  • h-sect--pad-4: 4rem padding (64px)

You can change the section background color by using some modifier classes. (The sections has no background color by default):

  • h-sect--wh: White background
  • h-sect--gry: Light gray background

White section

<div class="h-sect h-sect--wh"> <div class="h-cont"> your content here... </div> </div>

Gray section

<div class="h-sect h-sect--gry"> <div class="h-cont"> your content here... </div> </div>

Layouts

Single column

As seen in the examples above, the h-cont class is our main column class. It contains the max-width on each tablet/desktop sizes and the right and left padding on mobile.

Cards inside a column

Sometimes the sections includes another container inside (a card for example) and you need a smaller horizontal padding on mobile. On those situations you can include a h-cont--mb-h-pad modifier class

Hi! I'm a card

In this situation, make sure that the card has a right and left padding of 20px on mobile, so the text inside the card is aligned with the text outside the card. Or use the card helper.

<div class="h-sect h-sect--gry"> <div class="h-cont h-cont--mb-h-pad"> <div class="h-card"> your content here... </div> </div> </div>

Main column and a sidebar

You can create a two column layout by adding a h-col class to the h-cont container. Inside it you can include the columns using the h-col__side class for the narrower column (3 columns wide) and h-col__main class for the main column (7/9 columns wide)

Left sidebar + main column

If you want to have the aside column on the left you just need to include it first, and then the main column

This is the code snippet you can use:

<div class="h-sect h-sect--wh"> <div class="h-cont h-col"> <div class="h-col__side">This is the left aside column</div> <div class="h-col__main">This is the main wider column</div> </div> </div>

Left sidebar + main column (cards)

Hi there! I'm an aside column.

If the columns have a white background (cards), remember to include the h-cont--mb-h-pad class on the h-cont element to reduce the padding

<div class="h-sect h-sect--gry"> <div class="h-cont h-cont--mb-h-pad h-col"> <div class="h-col__side"> <div class="h-card">This is the left aside column</div> </div> <div class="h-col__main"> <div class="h-card">This is the main wider column</div> </div> </div> </div>

Main column + right sidebar

If you want to have the aside column on the right you just need to add the h-col--invert modifier class to the h-col container.

<div class="h-sect h-sect--wh"> <div class="h-cont h-col h-col--invert"> <div class="h-col__main">This is the main wider column</div> <div class="h-col__side">This is the left aside column</div> </div> </div>

The order in which you place the columns on the markup define how the columns are ordered on mobile.

Main column + right sidebar (cards)

If the columns have a white background (cards), remember to include the h-cont--mb-h-pad class on the h-cont element to reduce the padding

<div class="h-sect h-sect--gry"> <div class="h-cont h-cont--mb-h-pad h-col h-col--invert"> <div class="h-col__main"> <div class="h-card">This is the main wider column</div> </div> <div class="h-col__side"> <div class="h-card">This is the left aside column</div> </div> </div> </div>

Hi there! I'm an aside column.

Main column + right wide sidebar

You can use the h-col--wide-side modifier to make the sidebar wider (4 cols) on a big desktop screen.

If you want to add some sticky element on any of the columns, remember to add the h-col-stk class into the main container.

If the columns have a white background (cards), remember to include the h-cont--mb-h-pad class on the h-cont element to reduce the padding

<div class="h-sect h-sect--gry h-col-stk"> <div class="h-cont h-cont--mb-h-pad h-col h-col--invert h-col--wide-side"> <div class="h-col__main"> <div class="h-card">This is the main wider column</div> </div> <div class="h-col__side"> <div class="h-card">This is the left aside column</div> </div> </div> </div>

Hi there! I'm an wider aside column. You can use the h-sticky helper class to make any element sticky.

Main column and a sticky sidebar

If you need an sticky sidebar then a different markup is needed. An sticky sidebar can float over different sections on the site, you just need to wrap the sections you want into an element with a class on it.

Sticky left column

You can make an element sticky by adding the h-sticky class. The element will stick 16px (1rem) below the site header.

If you want to have the aside column on the left you have to add a h-cont--aside modifier class to the h-cont element.

This is the basic code snippet you can use:

<div class="h-col-stk"> <div class="h-sect h-cont h-cont--aside"> aside column. You can use an .h-sticky element in here </div> <!--You can place any number of sections after the aside column--> <div class="h-sect h-sect--gry"> <div class="h-cont h-cont--main"> Main right column </div> </div> </div>

The following code snippet uses the card and sticky helper classes on the elements

<div class="h-col-stk"> <div class="h-sect h-cont h-cont--mb-h-pad h-cont--aside"> <div class="h-card h-sticky"> Sticky aside Element </div> </div> <!--You can place any number of sections after the aside column--> <div class="h-sect h-sect--gry"> <div class="h-cont h-cont--mb-h-pad h-cont--main"> <div class="h-card"> Main right column </div> </div> </div> </div>

The main column can be a little bit smaller (half a grid column smaller) if you add the h-cont--main-sm modifier to the main column class

<div class="h-col-stk"> <div class="h-sect h-cont h-cont--aside"> <div class="h-sticky"> Sticky aside Element </div> </div> <!--You can place any number of sections after the aside column--> <div class="h-sect"> <div class="h-cont h-cont--main h-cont--main-sm"> Main right column </div> </div> </div>

To sticky the aside column to the right you just have to add a h-cont--aside-rg class to the aside element.

Sticky right column

If you want to have the aside column on the left you have to add a h-cont--aside modifier class to the h-cont element.

This is the basic code snippet you can use:

<div class="h-col-stk"> <div class="h-sect h-cont h-cont--aside h-cont--aside-rg"> aside column. You can use an .h-sticky element in here </div> <!--You can place any number of sections after the aside column--> <div class="h-sect h-sect--gry"> <div class="h-cont h-cont--main h-cont--main-lf"> Main left column </div> </div> </div>

The following code snippet uses the card and sticky helper classes on the elements

<div class="h-col-stk"> <div class="h-sect h-cont h-cont--mb-h-pad h-cont--aside h-cont--aside-rg"> <div class="h-card h-sticky"> Sticky aside Element </div> </div> <!--You can place any number of sections after the aside column--> <div class="h-sect h-sect--gry"> <div class="h-cont h-cont--mb-h-pad h-cont--main h-cont--main-lf"> <div class="h-card"> Main left column </div> </div> </div> </div>

Or this other section with more content over here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc justo est, elementum nec ullamcorper quis, efficitur ut elit. Quisque nec velit blandit, luctus lectus ac, facilisis orci. Sed et sapien in risus ultricies posuere. Phasellus blandit velit tellus, eget vestibulum ante pellentesque et. Vivamus eget rhoncus augue. Curabitur mattis vehicula pretium. Vivamus ligula velit, mollis ut congue sed, tincidunt vel turpis. Nullam urna dui, sagittis at eros in, venenatis venenatis mi. Donec posuere ex eu blandit sodales. Mauris non ullamcorper odio, ut eleifend felis.

Collapse top and bottom margin

If you want to remove the top margin of the first child element, and the bottom margin of the last child element, you can add the h-coll-vert helper class.

Title

<div class="h-card h-coll-vert"> <h1>Title</h1> <p>text</p> </div>

As an example, the title default margin top has been removed, as well as the default margin-bottom on this paragraph.