Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/acc_boot.css, line 14896

8.2 Page Layout

Descripition:

  1. Overall Structure:
    • Design the layout to incorporate columns for content and sidebars.
    • [sidebar] [content] [sidebar]
    • the parent uses `grid-template="page-layout"`
    • the children uses `grid-area="content|sidebar-primary|sidebar-secondary"`
  2. Column Configuration:
    • Utilize 'sidebar-primary', 'sidebar-secondary', and 'content' classes to designate columns within the layout.
    • Define grid areas in the DOM structure for 'fullscreen', 'sidebar-primary','sidebar-secondary','container'.
  3. Sidebar Specifications:
    • Sidebars are 300px wide with 1 rem padding on the left and right. (300px + 2rem)
    • Sidebars do not respect the page margin but adhere to margins between themselves and content.
    • Sidebars placed on the edge will extend to the edge of the container.
      Responsive Design:
    • `Primary sidebar` remains fixed and aligned with the content area. It folds under the content on mobile viewports.
    • `Secondary sidebar` remains fixed and shifts below the content on tablet and smaller viewports.
    • The sidebar widths are constant when aligned with the content and changes its width to the above content based on media breakpoints.
  4. Content Area:
    • Allocate remaining space on the page for the content area, respecting a page margin.

Example

Default styling

Document(fullscreen)

Document

Content No Sidebars

Content

Content with Primary Sidebar

sidebar primary
content

Content with Primary Sidebar - Reverse template-option="reverse"

sidebar primary (reverse)
content (reverse)

Content with Secondary Sidebar

sidebar secondary
content

Content with Secondary Sidebar - Reverse template-option="reverse"

sidebar secondary
content

Both Sidebars

sidebar secondary
content center
sidebar primary

Both Sidebars

sidebar secondary
content center
sidebar primary
<h4>Document(fullscreen)</h4>
<section grid-template="page-layout" >
    <div grid-area="fullscreen">Document</div>
</section>
<h4>Content No Sidebars</h4>
<section grid-template="page-layout" >
    <div grid-area="content">Content</div>
</section>
<h4>Content with Primary Sidebar</h4>
<section grid-template="page-layout" >
    <div grid-area="sidebar-primary">sidebar primary</div>
    <div grid-area="content">content</div>
</section>
<h4>Content with Primary Sidebar - Reverse <code>template-option="reverse"</code></h4>
<section grid-template="page-layout" template-option="reverse" >
    <div grid-area="sidebar-primary">sidebar primary (reverse)</div>
    <div grid-area="content">content (reverse)</div>
</section>
<h4>Content with Secondary Sidebar</h4>
<section grid-template="page-layout" >
    <div grid-area="sidebar-secondary">sidebar secondary</div>
    <div grid-area="content">content</div>
</section>
<h4>Content with Secondary Sidebar - Reverse <code>template-option="reverse"</code></h4>
<section grid-template="page-layout" template-option="reverse" >
    <div grid-area="sidebar-secondary">sidebar secondary</div>
    <div grid-area="content">content</div>
</section>
<h4>Both Sidebars</h4>
<section grid-template="page-layout" >
    <div grid-area="sidebar-secondary">sidebar secondary</div>
    <div grid-area="content">content center</div>
    <div grid-area="sidebar-primary">sidebar primary</div>
</section>
<h4>Both Sidebars</h4>
<section grid-template="page-layout" template-option="reverse" >
    <div grid-area="sidebar-secondary">sidebar secondary</div>
    <div grid-area="content">content center</div>
    <div grid-area="sidebar-primary">sidebar primary</div>
</section>
<style>.space-holder section{padding:10px 0; background-color:rgba(128, 128, 128, 0.209); margin-bottom:10px;}
.space-holder div{min-height: 50px; color:rgb(0, 0, 0); padding:10px;}
.colored-zones [grid-area="sidebar-secondary"] {background-color: #0080001b;}
.colored-zones [grid-area="sidebar-primary"] {background-color: #1668ff2d;}
.colored-zones [grid-area="fullscreen"] {background-color:#ff260040;}
.colored-zones [grid-area="content"] {background-color: #ffa6002b;}</style>
</style>
Copy Code