Public Layout

Website layout for consumer facing pages.

Default Example

This example shows the default set of options used by Webstop’s products and is installed via the Styler gem.

Sidenav and Sidebar Example

View Sidenav & Sidebar Example Page 
<div class="public public-borders public-with-sidenav public-with-sidebar">
  <header class="public-header" role="banner">
    Header...
    <nav class="public-sidenav-mobile offcanvas offcanvas-start" tabindex="-1"  id="public-sidenav-mobile" role="navigation">
      Mobile Left Side Navigation...
    </nav>
    <aside class="public-sidebar-mobile offcanvas offcanvas-end" style="overflow-x: hidden; overflow-y: auto;" tabindex="-1" id="public-sidebar-mobile" role="navigation" aria-label="Secondary">
      Mobile Right Side Shopping List...
    </aside>
  </header>
  <nav class="public-sidenav" role="navigation">
    Desktop Left Side Navigation...
  </nav>
  <div class="public-page">
    <main class="public-content" role="main">
      Main Content...
    </main>
    <footer class="public-footer" role="contentinfo">
      Footer...
    </footer>
  </div>
  <aside class="public-sidebar" role="complementary" aria-label="">
    Desktop Right Side Shopping List...
  </aside>
</div>

Site Modal

To help keep the concepts easier to understand, we’ve left out the Site Modal code from the following HTML examples. See the Site Modal section at the end of the page for more information.

Sass Variables

The following Sass variables are used to control the behavior of the Public Layout.

Header Height

Variable Name Default Value Note
$public-header-height 60px; Mobile
$public-header-sm-height $public-header-height
$public-header-md-height $public-header-sm-height
$public-header-lg-height $public-header-md-height Desktop
$public-header-xl-height $public-header-lg-height
$public-header-xxl-height $public-header-xl-height
Common Example

In the following example uses the default 60px header for mobile and 120px for desktop sizes. Notice only the $public-header-lg-height variable is uncommented and modified. The larger sizes inherit from the smaller sizes so you can usually adjust just one variable to affect all larger sizes.

// $public-header-height:     60px;
// $public-header-sm-height:  $public-header-height;
// $public-header-md-height:  $public-header-sm-height;
$public-header-lg-height:     120px; // Desktop
// $public-header-xl-height:  $public-header-lg-height;
// $public-header-xxl-height: $public-header-xl-height;

Colors & Basics

Variable Name Default Value Note
$public-header-bg-color transparent;
$public-header-border-color #ccc;
$public-header-border-size 1px;
$public-sidecar-color $white;
$public-sidecar-bg-color $primary;
$public-sidecar-border-color $primary;
$public-sidecar-border-size 0;
$public-sidenav-bg-color transparent;
$public-sidenav-border-color #ccc;
$public-sidenav-border-size 1px;
$public-sidebar-bg-color transparent;
$public-sidebar-border-color #ccc;
$public-sidebar-border-size 1px;
$public-footer-bg-color: transparent;
$public-footer-border-color #ccc;
$public-footer-border-size 1px;

Sizing & Spacers

Caution, changing the following variables can have adverse affects on the layout.

Use caution when modifying the following. Great care was given to make these properties play nicely on all responsive sizes.

Variable Name Default Value Note
$public-sidecar-width 90px; Caution! Tread Lightly!
$public-sidenav-width 320px; Caution! Tread Lightly!
$public-sidebar-width 320px; Caution! Tread Lightly!
$public-spacer-y $spacer; $spacer is the Bootstrap default.
$public-spacer-x $spacer; $spacer is the Bootstrap default.
$public-header-spacer-y 0;
$public-header-spacer-x 0;
$public-sidecar-spacer-y $public-spacer-y;
$public-sidecar-spacer-x 0;
$public-sidenav-spacer-y 0;
$public-sidenav-spacer-x 0;
$public-content-spacer-y $public-spacer-y;
$public-content-spacer-x $public-spacer-x;
$public-sidebar-spacer-y 0;
$public-sidebar-spacer-x 0;
$public-footer-spacer-y $public-spacer-y;
$public-footer-spacer-x $public-spacer-x;

Ruby On Rails Support

Most of the time we don’t talk about any back-end technology in our front-end framework. With the public layout system we have built out a unique system to control page layout, so we are going to explain it here.

Public Layout Template

At the heart of the layout system is the public_v3 layout template. To use it place layout 'public_v3' near the top of your controller. This is typically done right after any actions are called, like the before_action. This one template handles all public page layouts.

The @page Map

In the application controller we define a map called @page. The @page variable contains boolean settings which control the page layout. These settings are explained in the chart below.

The @page hash is set at the top of a view file to control how that view will be presented in the public layout template.

Key Name Default Description
sidecar false Controls display the sidecar left side navigation. This feature isn't fully implemented yet.
sidebar false Controls display the sidebar right side navigation. Expects content to be placed into the sidebar yield. e.g. content_for :sidebar, raw(render 'sidebar')
header true Page header, which sits right below the header navbar. This feature is deprecated.
footer true Controls display the footer. Expects content to be placed into the footer yield, and will typically contain breadcrumb navigation.
flush false Removes padding from the main content area. Usually used for tables to allow them to fill the content area.
tables false Primes the system to expect the main content section to be filled with a scrollable table.

Site Modal

The Site Modal is an empty hidden modal available for use by features such as AJAX Modal, and other features that rely on having a modal available. The modal is identified by the id attribute with a value of site-modal. The Site Modal is also available in the Admin Layout.

<div class="public">
  <header class="public-header" role="banner">
    Public Header...
  </header>
  <main class="public-page" role="main">
    Public Page Main Content...
  </main>
  <footer class="public-footer" role="contentinfo">
    Public Footer...
  </footer>
  <div class="site-modal modal fade" id="site-modal" tabindex="-1" role="dialog" aria-labelledby="site-modal-title" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="site-modal-content modal-content">
        <div class="modal-header">
          <div class="row mx-0 w-100">
            <div class="col ps-0">
              <h4 class="site-modal-title modal-title" id="site-modal-title"></h4>
            </div>
            <div class="col-auto pe-0">
              <button type="button" class="btn btn-light" data-bs-dismiss="modal" aria-label="Close">
                <i class="fak fa-cancel"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="site-modal-body modal-body" id="site-modal-body"></div>
        <div class="site-modal-footer modal-footer" id="site-modal-footer">
          <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

Alternate Examples

The following examples are part of the public layout system, but not used by Webstop’s standard products.

Base Public Example

This example contains a header, footer, and main content sections.

View Base Public Example Page 
<div class="public">
  <header class="public-header" role="banner">
    Public Header...
  </header>
  <main class="public-page" role="main">
    Public Page Main Content...
  </main>
  <footer class="public-footer" role="contentinfo">
    Public Footer...
  </footer>
</div>

Sidecar Example

View Sidecar Example Page 
<div class="public public-with-sidecar">
  <header class="public-header" role="banner">
    Public Header...
  </header>
  <nav class="public-sidecar" role="navigation">
      Public Sidecar Navigation...
  </nav>
  <main class="public-page" role="main">
    Public Page Main Content...
  </main>
  <footer class="public-footer" role="contentinfo">
    Public Footer...
  </footer>
</div>

Sidenav Example

View Sidenav Example Page 
<div class="public public-with-sidenav">
  <header class="public-header" role="banner">
    Public Header...
  </header>
  <nav class="public-sidenav" role="navigation">
      Public Sidenav Navigation...
  </nav>
  <main class="public-page" role="main">
    Public Page Main Content...
  </main>
  <footer class="public-footer" role="contentinfo">
    Public Footer...
  </footer>
</div>

Sidecar and Sidenav Example

View Sidecar & Sidenav Example Page 
<div class="public public-with-sidenav">
  <header class="public-header" role="banner">
    Public Header...
  </header>
  <nav class="public-sidecar" role="navigation">
      Public Sidecar Navigation...
  </nav>
  <nav class="public-sidenav" role="navigation">
      Public Sidenav Navigation...
  </nav>
  <main class="public-page" role="main">
    Public Page Main Content...
  </main>
  <footer class="public-footer" role="contentinfo">
    Public Footer...
  </footer>
</div>
View Sidebar Example Page 
<div class="public public-with-sidebar">
  <header class="public-header" role="banner">
    Public Header...
  </header>
  <main class="public-page" role="main">
    Public Page Main Content...
  </main>
  <aside class="public-sidebar">
    Public Sidebar...
  </aside>
  <footer class="public-footer" role="contentinfo">
    Public Footer...
  </footer>
</div>

Sidecar and Sidebar Example

View Sidecar & Sidebar Example Page 
<div class="public public-with-sidecar public-with-sidebar">
  <header class="public-header" role="banner">
    Public Header...
  </header>
  <nav class="public-sidecar" role="navigation">
      Public Sidecar Navigation...
  </nav>
  <main class="public-page" role="main">
    Public Page Main Content...
  </main>
  <aside class="public-sidebar">
    Public Sidebar...
  </aside>
  <footer class="public-footer" role="contentinfo">
    Public Footer...
  </footer>
</div>

Sidenav and Sidebar Example

This is the default set of options used by Webstop’s products.

View Sidenav & Sidebar Example Page 
<div class="public public-borders public-with-sidenav public-with-sidebar">
  <header class="public-header" role="banner">
    Header...
    <nav class="public-sidenav-mobile offcanvas offcanvas-start" tabindex="-1"  id="public-sidenav-mobile" role="navigation">
      Mobile Left Side Navigation...
    </nav>
    <aside class="public-sidebar-mobile offcanvas offcanvas-end" style="overflow-x: hidden; overflow-y: auto;" tabindex="-1" id="public-sidebar-mobile" role="navigation" aria-label="Secondary">
      Mobile Right Side Shopping List...
    </aside>
  </header>
  <nav class="public-sidenav" role="navigation">
    Desktop Left Side Navigation...
  </nav>
  <div class="public-page">
    <main class="public-content" role="main">
      Main Content...
    </main>
    <footer class="public-footer" role="contentinfo">
      Footer...
    </footer>
  </div>
  <aside class="public-sidebar" role="complementary" aria-label="">
    Desktop Right Side Shopping List...
  </aside>
</div>

Sidecar, Sidenav, and Sidebar Example

View Sidecar, Sidenav & Sidebar Example Page 
<div class="public public-with-sidecar public-with-sidebar">
  <header class="public-header" role="banner">
    Public Header...
  </header>
  <nav class="public-sidecar" role="navigation">
      Public Sidecar Navigation...
  </nav>
  <nav class="public-sidenav" role="navigation">
    Public Sidenav Navigation...
  </nav>
  <main class="public-page" role="main">
    Public Page Main Content...
  </main>
  <aside class="public-sidebar">
    Public Sidebar...
  </aside>
  <footer class="public-footer" role="contentinfo">
    Public Footer...
  </footer>
</div>