Grid
The aim of the Lexicon layout framework is to provide a common structural reference that contributes to streamlining the component construction and page composition processes, as well as favoring visual consistency between the different elements of the interface.
Table of Contents
Container
.container has a specific max-width for each grid breakpoint (e.g., Atlas 540px wide, 720px wide, 960px wide, and 1248px wide).
| Base | |
|---|---|
| Breakpoint (min-width) | Container (max-width) |
| 576px | 540px |
| 768px | 720px |
| 992px | 960px |
| 1200px | 1140px |
| Atlas | |
|---|---|
| Breakpoint (min-width) | Container (max-width) |
| 576px | 540px |
| 768px | 720px |
| 992px | 960px |
| 1280px | 1248px |
<div className="container"></div>
Container Fluid
Use the .container-fluid class with the .container-fluid-max-{sm|md|lg|xl} class to create fluid containers that don’t expand beyond a set width (e.g., For Atlas xl => 1248px).
| Base | |
|---|---|
| Name | Container Fluid (max-width) |
| .container-fluid-max-sm | 540px |
| .container-fluid-max-md | 720px |
| .container-fluid-max-lg | 960px |
| .container-fluid-max-xl | 1140px |
| Atlas | |
|---|---|
| Name | Container Fluid (max-width) |
| .container-fluid-max-sm | 540px |
| .container-fluid-max-md | 720px |
| .container-fluid-max-lg | 960px |
| .container-fluid-max-xl | 1248px |
<div className="container-fluid container-fluid-max-sm"></div>
<div className="container-fluid container-fluid-max-md"></div>
<div className="container-fluid container-fluid-max-lg"></div>
<div className="container-fluid container-fluid-max-xl"></div>
Container Form Lg
Use the .container-form-lg class with the .container class or .container-fluid class to properly space between application controls and the form. This class only modifies the padding on the container.
.container-form-sm|md|xl, you will need to define them
yourself.Form Title
<div className="container-fluid container-fluid-max-xl container-form-lg"></div>
Container View
Use the .container-view class with the .container class or .container-fluid class to properly space between application controls and view pages (e.g., Card View, Table View, or List View). This class only modifies the padding on the container.
<div className="container-fluid container-fluid-max-xl container-view"></div>
Table of Contents