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).
Spacing
The spacing 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. This layout takes into account the correct spacing for all breakpoints and ensures the content never touches the edges of the screen and has a max-width of 1440px.
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 (1440px) on large viewports.
HTML
<div class="fizz-layout-spacing fizz-container">
<header data-grid-area="header">
<div class="fizz-container-spacing">
<svg viewBox="0 0 64 32"
class="fizz-logo">
<path
d="M9.3 20.5c-2.6 0-4.6-2.1-4.6-4.7s2-4.7 4.6-4.7 4.6 2.1 4.6 4.7-2 4.7-4.6 4.7m.3-12.9c-2.4 0-3.9 1.1-4.8 2.2L3.1 8h-3v3.2h1.4V32h3.6v-9.9c.6.7 2.1 1.9 4.5 1.9 4.5 0 8-3.7 8-8.2 0-4.5-3.5-8.2-8-8.2m44.8.4l-4.3 11.8L45.8 8H42l6 15.6h4.2l6-15.6h-3.8zM34.9 20.5c-2.6 0-4.5-2.2-4.5-4.7s1.9-4.7 4.5-4.7 4.5 2.2 4.5 4.7-2 4.7-4.5 4.7m0-12.8c-4.4 0-8.2 3.5-8.2 8.1s3.7 8.2 8.2 8.2c4.4 0 8.1-3.6 8.1-8.2s-3.7-8.1-8.1-8.1M27 10.2c.3-.4.7-.8 1-1.2.2-.2.5-.4.7-.6-.3-.2-.7-.4-1.1-.5-.8-.3-1.6-.2-1.6-.2-1.7 0-3 .9-3.8 2L20.5 8h-2.9v3.2H19v12.4h3.6V14c0-1.4 1.4-2.5 2.9-2.5.2 0 .4 0 .6.1h.1c.2-.5.5-.9.8-1.4 0 .1 0 0 0 0M59.7 8l-1.2 3.2h1.3V20H59l-1.1 3.6h5.5V9.3L62.1 8h-2.4zm1.6-2.9c1.4 0 2.6-1.1 2.6-2.6S62.7 0 61.3 0c-1.4 0-2.6 1.2-2.6 2.6.1 1.4 1.2 2.5 2.6 2.5">
</path>
</svg>
</div>
</header>
<main data-grid-area="main">
<div class="fizz-container-spacing fizz-inset-vertical-16">
<p>Main Content</p>
</div>
</main>
<footer data-grid-area="footer">
<div class="fizz-container-spacing">
<p>© 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.
| data-grid-area="title-bar" |
| data-grid-area="main" |
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 & 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>One Column, Wide
This layout has a max-width of 1440px. The title and tabs areas are
optional.
| data-grid-area="header" |
| data-grid-area="title" |
| data-grid-area="tabs" |
| data-grid-area="main" |
HTML
<div class="fizz-layout-1-col-wide">
<header data-grid-area="header">
<div class="fizz-space-between">
<h1 class="fizz-heading-4">Provi</h1>
<p class="fizz-text-small">Layout: 1-col-wide</p>
</div>
</header>
<section data-grid-area="title">
<div class="fizz-space-between fizz-align-content-start">
<div class="fizz-flow-8">
<h2 class="fizz-heading-3">Page Title</h2>
<p class="fizz-text-medium">Here's an optional description</p>
</div>
<button class="fizz-button-secondary">Button</button>
</div>
</section>
<nav data-grid-area="tabs">
<ul class="fizz-tab-list">
<li class="fizz-is-active">One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
<main data-grid-area="main">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In consequuntur eaque quasi aut, error aperiam
corrupti
maxime accusamus officia quia iure excepturi nisi doloremque rem at consequatur vero esse sed. Lorem, ipsum
dolor
sit amet consectetur adipisicing elit. Sequi ad, in deserunt harum iure laboriosam eveniet sit mollitia cum
dolorem quam quaerat non illo ullam quibusdam placeat pariatur magni itaque!</p>
</main>
</div>DEPRECATED
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 (1440px) on large viewports.
| data-grid-area="header" |
| data-grid-area="main" |
| data-grid-area="footer" |
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>© 2021 Provi, Inc. | <a href="">Privacy Policy</a> | <a href="">Terms & Conditions</a></p>
</div>
<footer>
</div>