Source: dist/css/acc_boot.css, line 10240
6.1 Structures Page Layouts
These are common pattern that are used to make column layouts on the page.
Source: dist/css/acc_boot.css, line 10251
6.1.1 Base Page Layout
This layout provides a foundational structure for standard pages. It includes consistent spacing and alignment patterns but omits additional navigational elements like sidebars or complex grid arrangements. Ideal for simple content pages that need a reliable baseline layout.
Source: dist/css/acc_boot.css, line 10315
6.1.1.1 Split Page - Pages with Side Bar
Sub.ClassList.Grid.Split-50 - Grid Split Classes
Data Elements:
Example
Default styling
content
content
<section item-label="section" class="m-x_n4 wrapper-container">
<div class="columns_2:md columns_1 gap_5:lg gap_6:xl gap_4 grid">
<div item-label="content" class="wrapper-container">content</div>
<div item-label="content" class="wrapper-container">content</div>
</div>
</section>Code Sample
Source: dist/css/acc_boot.css, line 10271
6.1.2 Page with Sidebar Patterns
Some page layouts only work when placed in main context when there is also a sidebar on the page becuase of reduced space.
Source: dist/css/acc_boot.css, line 10300
6.1.2.1 Intro Block - Page with Side Bar
Example
Default styling
content
aside
<section id="introduction" item-label="section" class="grid columns_1 columns_5:lg gap_5:lg gap_4">
<div item-label="content" class="col-start_start col-end_n3:lg col-end_end reading-typography font-size_up" style="--custom-font-size-modifier: 1;">content</div>
<div item-label="sidebar-primary" class="col-start_start col-start_n3:lg col-end_end wrapper-container">aside</div>
</section>Code Sample
Source: dist/css/acc_boot.css, line 10356
6.1.2.2 Triple Split Grid - Sidebar
Sub.ClassList.Grid.TripleLG - Triple split on LG
Data Elements:
Example
Default styling
content
content
content
<section item-label="section" class="m-x_n4 wrapper-container">
<div class="columns_3:lg columns_2:md columns_1 gap-x_4:lg gap-x_3:md gap_4 grid ul_none text_left">
<div item-label="content" class="wrapper-container">content</div>
<div item-label="content" class="wrapper-container">content</div>
<div item-label="content" class="wrapper-container">content</div>
</div>
</section>Code Sample
Source: dist/css/acc_boot.css, line 10260
6.1.3 Fullscreen Patterns
Some page layouts only work when placed in fullscreen context.
Source: dist/css/acc_boot.css, line 10281
6.1.3.1 Intro Block - Fullscreen Page
Example
Default styling
Main Content
Aside
<div id="introduction" item-label="section" class="columns_2 columns_4:md columns_5:lg gap_4 gap_5:lg grid isolation_isolate p-b_4 p-b_5:lg p-t_4 p-t_5:lg p-x_3 p-x_4:md p-x_5:lg relative">
<div item-label="content" class="col-end_3:md col-end_4:lg col-end_end col-start_start">
Main Content
</div>
<div item-label="sidebar-primary" class="relative col-start_n3:md col-start_start col-end_end font_n1 font_0:lg">
Aside
</div>
</div>Code Sample
Source: dist/css/acc_boot.css, line 10335
6.1.3.2 Triple Split Grid - full screen
Sub.ClassList.Grid.TripleXL - Triple split on XL
Data Elements:
Example
Default styling
content
content
content
<section item-label="section" class="m-x_n4 wrapper-container">
<div class="columns_2:lg columns_3:xl columns_1 gap-x_5:xl gap-x_4:lg gap-x_3 gap-y_4 grid p-x_4:xl p-x_3:lg p-x_0 ul_none">
<div item-label="content" class="wrapper-container">content</div>
<div item-label="content" class="wrapper-container">content</div>
<div item-label="content" class="wrapper-container">content</div>
</div>
</section>