Layouts

Fizz layouts use CSS grid to arrange sections of content on a page or even within another layout. Layouts are applied by adding the layout class to the <body> or a container element. Its direct children are arranged within that grid container by applying a data attribute (data-grid-area).

Primary

The primary layout includes the header, main content area, and an optional footer. Other layouts can be nested inside of this layout by applying a layout to the main content area of the primary layout.

It's important to enclose the content of each grid area within a .fizz-container so that the content does not exceed the max-width (1332px) on large viewports.

.fizz-layout-primary
data-grid-area="header"
data-grid-area="main"
data-grid-area="footer"

Example

HTML
<div class="fizz-layout-primary">
<header data-grid-area="header">
<div class="fizz-container">
<svg viewBox="0 0 64 32" class="fizz-logo">...</svg>
</div>
</header>
<main data-grid-area="main">
<div class="fizz-container">
<p>Main Content</p>
</div>
</main>
<footer data-grid-area="footer">
<div class="fizz-container">
<p>&copy; 2021 Provi, Inc. | <a href="">Privacy Policy</a> | <a href="">Terms & Conditions</a></p>
</div>
<footer>
</div>

3-2

This layout has a title bar with the same background color as the header, and a main content area with two columns (3fr and 2fr) and a negative top margin that pulls it into the background of the title bar. The layout should be applied to the main content area of the Primary layout.

.fizz-layout-3-2
data-grid-area="title-bar"
data-grid-area="main"

Example

HTML
<div class="fizz-layout-primary">
<header data-grid-area="header">
<div class="fizz-container fizz-space-between">
<svg viewBox="0 0 64 32" class="fizz-logo">...</svg>
<nav>
<ul class="fizz-text-small fizz-hide-on-large">
<li><a href="">Sign up</a></li>
</ul>
<ul class="fizz-hide-on-small fizz-flex-row-32">
<li><a href="">Orders</a></li>
<li><a href="">Retailers</a></li>
<li><a href="">Karly Casey</a></li>
</ul>
</nav>
</div>
</header>
<main data-grid-area="main">
<div class="fizz-layout-3-2">
<section data-grid-area="title-bar">
<div class="fizz-container fizz-space-between">
<h3 class="fizz-heading-3">Order from:</h3>
<button class="fizz-icon-button-small fizz-icon-button-inverted">
<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">...</svg>
</button>
</div>
</section>
<main data-grid-area="main">
<div class="fizz-container">
<div class="fizz-flow-8">
<div class="fizz-card fizz-bordered">
<details class="fizz-accordion" open>
<summary>
<span class="fizz-heading-4">Brittany Banana</span>
<p class="fizz-text-subdued fizz-text-small fizz-hide-on-open">
Woodfired Kitchen &amp; Cocktails<br>
11/20/2021 at 2:30pm
</p>
</summary>
<div class="fizz-inset-square-16">
<dl class="fizz-definition-list">
<dt>Email:</dt>
<dd>brittany@gmail.com</dd>
...
</dl>
</div>
</details>
</div>
</div>
<div>
<div class="fizz-card fizz-bordered">
<p class="fizz-text-medium fizz-text-strong fizz-inset-squish-16">Messages</p>
<div class="fizz-border-top fizz-inset-square-16 fizz-flow-16">
<p class="fizz-text-subdued fizz-text-small fizz-text-center">Monday, Nov 17</p>
<div class="fizz-flex-row">
<div class="fizz-avatar-initial-1">J</div>
<div>
<p><strong>Jessica</strong> <span class="fizz-text-subdued fizz-text-small">10:30 AM</span></p>
<p>I'll add coasters how many?</p>
</div>
</div>
<div class="fizz-flex-row">
<div class="fizz-avatar-initial-2">B</div>
<div>
<p><strong>Brittany</strong> <span class="fizz-text-subdued fizz-text-small">11:30 AM</span></p>
<p>200</p>
</div>
</div>
</div>
<div class="fizz-border-top fizz-inset-square-16 fizz-hide-on-small">
<input type="text" placeholder="Send a message" class="fizz-input-text fizz-full-width">
</div>
</div>
</div>
</div>
</main>
</div>
</main>
</div>