Go to rebrand

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_styleguide_layout.css') }}" />

Classes quick reference

Block / element / Modifiers 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-sect--lg-blue Light blue 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-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.
h-col__side Side column. It can be left or right depending on the order on the markup.
h-col__main Main column. It can be left or right depending on the order on the markup.
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.

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
  • h-sect--lg-blue: Light blue background

Light blue section

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

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--gray"> <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--gray"> <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 (23% wide) and h-col__main class for the main column (72% 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 include the main column before the aside column.

<div class="h-sect h-sect--wh"> <div class="h-cont h-col"> <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>

Just changing the order of the columns is enough to create a different layout.

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"> <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 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 class="h-sect h-sect--lg-blue"> <div class="h-cont h-cont--main"> Another main right column inside another section </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>

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.

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 class="h-sect h-sect--lg-blue"& h-cont--main-lf"> <div class="h-cont h-cont--main h-cont--main-lf"> Another main left column inside another section </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.