The .l-full-width serves as a wrapper for full-width layout and allows for a start (left), main (central) and end (right) areas. Usually, the l-full-width class name would be placed on a strip component p-strip or an individual element. Additionally, a separate l-full-width__sidebar element can be added as a container for side navigation placed on top of the start (left) area of the layout.
On screens smaller than $breakpoint-large the sidebar is hidden off-screen and the whole width of the page is occupied by the main content area. On larger screens, the sidebar is visible on the left side of the window.
The main content area is placed inside the l-main child element of l-full-width wrapper. This is the main area for the content of the page, it should be built with standard grid rows and columns.
The start l-start and end l-end areas are placed on the left and right sides of the window. While the main area is centered on the screen, the start and end areas will align to the sides of the window regardless of its size.
In the top navigation in full-width layout the logo is placed in l-start area (so is always aligned with left side of the screen, on top of the sidebar) and any right-aligned navigation items (such as login) are placed in the l-end area.
View the full screen example of the full-width layout structure.
On pages that use side navigation a .l-full-width__sidebar element can be added that will position a container for the side navigation component on top of the start area of the full-width layout (on the left side of the screen).
An aside to the left, main area to the right:
View the full screen example of the full-width layout with a sidebar.
To import just the fluid breakout layout component into your project, copy the snippet below and include it in your main Sass file.
@import 'layouts_full-width';
@include vf-l-full-width;