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.
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 class="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).
https://getbootstrap.com/docs/4.0/layout/grid/
| 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 class="container-fluid container-fluid-max-sm"></div>
<div class="container-fluid container-fluid-max-md"></div>
<div class="container-fluid container-fluid-max-lg"></div>
<div class="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 class="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 class="container-fluid container-fluid-max-xl container-view"></div>