Commentary
The page layout element is a grid based container. This element structures the common page layout and includes regions for:
-
Navigation Bar:
divHTML tag contains site branding, common links and widgets. At the mobile breakpoint, the navbar will collapse links but maintain the site branding. At this point, the usual hamburger can be displayed. This will occur if a side bar has been defined. The side bar will slide in from the left or right and can be dismissed. -
Page Title: single
h1HTML tag per page -
Main Content: single
mainHTML tag per page holds content for the topic at hand -
Footer: single
.page-footerper page holds common footer information and uses flexbox to evenly space children elements or components. -
Side Nav: optional
divHTML tag, left side adjusted holds navigational links to other website pages. Navigational links can be grouped into blocks.
Usage
| Classes: | |
|---|---|
.page-wrapper |
This is typically a non-semantic component that sets up a div as a parent
container to facilitate styling of children nodes. |
.page-wrapper-widgets |
Optional main parent container instead of .page-wrapper to facilitate styling of children nodes.
This adds a region for a widget bar before the navbar. |
.page-wrapper-right-panel |
This is typically a non-semantic component that sets up a div as a parent
container to facilitate styling of children nodes. It also removes the left side nav panel and
adds a general purpose right side panel in the main content area.
|
.page-wrapper-widgets-right-panel |
Optional main parent container instead of .page-wrapper to facilitate styling of children nodes.
This adds a region for a widget bar before the navbar. It also removes the left side nav panel and
adds a general purpose right side panel in the main content area. |
.is-mobile |
Modifier for wrapper to preserve navbar and side nav below mobile breakpoint |
.has-slidebar |
Modifier for wrapper at mobile breakpoint, hides .sidenav component and adjusts grid into column display of other regions.
Note that the .navbar component needs to be setup with the hamburger and slidebar. |
.page-header |
HTML header tag for page title. |
.page-widgets |
Holds widgets bar for simple support items such as day / night mode or text size. |
.page-main-nav |
Holds top navbar. |
.is-fixed |
Modifier for .page-widgets and .page-main-nav wrappers to
have navbar and optional widget bar regions fixed at the top of the viewport. |
.main-content |
HTML main tag for page content |
.page-footer |
HTML footer tag for page |
.is-medium, .is-wide |
Footer component modifiers to control column width |
.page-sidenav |
Usual page side navigation component |
| Dependencies: | |
|---|---|
| File: | page.css |
| Variables: | --border-main, border-main-darker, --element-background, --gap-col, ----gap-row, --padding-large, --size-5, --weight-semibold |
Examples
Basic Page with Fixed Bottom
Typical page layout using css grid. This includes a fixed side navigation component.
By using the .is-mobile class on the parent .navbar element, the navbar child
.navbar-center section will display. Otherwise, it will not display in the navbar.
Main Page Content h1 Heading
A sub-title of supporting text
An h2 Semantic Row Heading
A sub-title of supporting text
Section One h3 Heading
A sub-title of supporting text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla.
Section Two h3 Heading
A sub-title of supporting text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla.
<div class="page-wrapper">
<div class="page-main-nav navbar is-warning [is-fixed]" role="region" aria-label="Main Navbar"">
<div class="navbar-left">
<a href="#page-layout-top">
<img src="https://zaphodbb-pm.github.io/goldilocks-css/img/goldi3-logo.png" alt="Project Logo to Home">
</a>
</div>
<div class="navbar-center show-bottom-nav">
<nav aria-label="Main Navigation Links">
<ul>
<li>
<a class="icon-nav" href="#page-layout-top">
<span class="icon-bg-bookmark"></span>
<span>Bookmark</span>
</a>
</li>
<li>
<a class="icon-nav" href="#page-layout-top">
<span class="icon-bg-clock"></span>
<span>Clock</span>
</a>
</li>
<li><a class="icon-nav" href="#page-layout-top">
<span class="icon-bg-film"></span>
<span>Film</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="navbar-right">
<nav aria-label="Main Navigation Secondary Actions">
<ul>
<li><a class="icon-nav" href="https://github.com/zaphodbb-pm/goldilocks-css" rel="nofollow" aria-label="link to github">
<span class="icon-bg-github"></span>
</a></li>
<li><a class="button is-secondary has-hover" href="#page-layout-top">
<span>Top</span>
</a></li>
</ul>
</nav>
</div>
</div>
<div class="page-sidenav" role="region" aria-label="Extended Side Bar Navigation">
<div class="sidenavs">
<nav>
<ul>
<li>
<a class="icon-nav-horz" href="#page-layout-top" title="Bookmark">
<span class="icon-bg-home"></span>
<span>Home</span>
</a>
</li>
</ul>
</nav>
<div class="sidenav-block">
<input type="checkbox" id="chck1">
<label for="chck1">Item 1</label>
<nav>
<ul>
<li><a href="#page-layout-top">Home</a></li>
<li><a href="#page-layout-top">About</a></li>
<li><a href="#page-layout-top">Contact</a></li>
</ul>
</nav>
</div>
<div class="sidenav-block">
<input type="checkbox" id="chck2">
<label for="chck2">Item 2</label>
<nav>
<ul>
<li>
<a class="icon-nav-horz" href="#page-layout-top" title="Bookmark">
<span class="icon-bg-bookmark"></span>
<span>Bookmark</span>
</a>
</li>
<li>
<a class="icon-nav-horz" href="#page-layout-top" title="Clock">
<span class="icon-bg-clock"></span>
<span>Clock</span>
</a>
</li>
<li>
<a class="icon-nav-horz" href="#page-layout-top" title="Film">
<span class="icon-bg-film"></span>
<span>Film</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<header class="page-header">
<h1>Main Page Content h1 Heading</h1>
<p class="sub-title">A sub-title of supporting text</p>
</header>
<section class="main-content">
<h2>An h2 Semantic Row Heading</h2>
<p class="sub-title">A sub-title of supporting text</p>
<div class="row">
<section class="column">
<h3>Section One h3 Heading</h3>
<p class="sub-title">A sub-title of supporting text</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi,
tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla.</p>
</section>
<section class="column">
<h3>Section Two h3 Heading</h3>
<p class="sub-title">A sub-title of supporting text</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi,
tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla.</p>
</section>
</div>
</section>
<footer class="page-footer">
<div>Goldilocks-CSS © 2021 - 2022</div>
<div>page-footer</div>
<div>Version: 0.1.0 / March 21, 2022</div>
</footer>
</div>
Basic Page with Fixed Bottom and Sliding Sidebar
Page Layout with a sliding side nav for mobile widths. For mobile width (typically less than 576px),
a hamburger target will appear. Clicking on the hamburger will slide in a vertical sidebar.
Note that the hamburger and slidebar navigation are setup in the .navbar component.
By using the .has-slidebar class on the parent .page-wrapper component, the page child
.page-sidenav section will not display.
Main Page Content h1 Heading
A sub-title of supporting text
An h2 Semantic Row Heading
A sub-title of supporting text
Section One h3 Heading
A sub-title of supporting text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla.
Section Two h3 Heading
A sub-title of supporting text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla.
<div class="page-wrapper has-slidebar" id="page-layout-top-2">
<div class="page-main-nav navbar is-warning [is-fixed]" role="region" aria-label="Main Navbar">
<div class="navbar-left">
<div class="main-slide-bar">
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<span></span>
<span></span>
<span></span>
<span class="sr-only">Sidebar toggle</span>
</label>
<div id="sidebarMenu">
<div class="sidebarMenuInner" role="region" aria-label="Sliding Side Bar Navigation">
<nav>
<ul>
<li><a href="#page-layout-top-2" title="Example Link">Some Link</a></li>
<li>
<a href="#page-layout-top-2" class="icon-nav-horz" title="Bookmark">
<span class="icon-bg-bookmark"></span>
<span>Bookmark</span>
</a>
</li>
<li>
<a href="#page-layout-top-2" class="icon-nav-horz" title="Clock">
<span class="icon-bg-clock"></span>
<span>Clock</span>
</a>
</li>
<li>
<a href="#page-layout-top-2" class="icon-nav-horz" title="Film">
<span class="icon-bg-film"></span>
<span>Film</span>
</a>
</li>
</ul>
</nav>
<div class="sidebar-block">
<input type="checkbox" id="check21">
<label for="check21">More Links</label>
<nav>
<ul>
<li>
<a href="#page-layout-top-2" class="icon-nav-horz" title="Home">
<span class="icon-bg-home"></span>
<span>Home</span>
</a>
</li>
<li><a href="#page-layout-top-2">About</a></li>
<li><a href="#page-layout-top-2">Contact</a></li>
<li><a href="#page-layout-top-2">Jobs</a></li>
<li><a href="#page-layout-top-2">Report an Issue</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<a href="#page-layout-top">
<img src="https://zaphodbb-pm.github.io/goldilocks-css/img/goldi3-logo.png" alt="Project Logo">
</a>
</div>
<div class="navbar-center show-bottom-nav">
<nav>
<ul>
<li>
<a class="icon-nav" href="#page-layout-top-2">
<span class="icon-bg-bookmark"></span>
<span>Bookmark</span>
</a>
</li>
<li>
<a class="icon-nav" href="#page-layout-top-2">
<span class="icon-bg-clock"></span>
<span>Clock</span>
</a>
</li>
<li>
<a class="icon-nav" href="#page-layout-top-2">
<span class="icon-bg-film"></span>
<span>Film</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="navbar-right">
<nav>
<ul>
<li>
<a class="icon-nav" href="https://github.com/zaphodbb-pm/goldilocks-css" rel="nofollow" aria-label="link to github two">
<span class="icon-bg-github"></span>
</a>
</li>
<li>
<a class="button is-secondary has-hover" href="#page-layout-top">
<span>Top</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="page-sidenav" role="region" aria-label="Extended Side Bar Navigation">
<div class="sidenavs">
<nav>
<ul>
<li>
<a class="icon-nav-horz" href="#page-layout-top-2" title="Bookmark">
<span class="icon-bg-bookmark"></span>
<span>Home</span>
</a>
</li>
</ul>
</nav>
<div class="sidenav-block">
<input type="checkbox" id="check22">
<label for="check22">Item 1</label>
<nav>
<ul>
<li><a href="#page-layout-top-2">Home</a></li>
<li><a href="#page-layout-top-2">About</a></li>
<li><a href="#page-layout-top-2">Contact</a></li>
</ul>
</nav>
</div>
<div class="sidenav-block">
<input type="checkbox" id="check23">
<label for="check23">Item 2</label>
<nav>
<ul>
<li>
<a class="icon-nav-horz" href="#page-layout-top-2" title="Bookmark">
<span class="icon-bg-bookmark"></span>
<span>Bookmark</span>
</a>
</li>
<li>
<a class="icon-nav-horz" href="#page-layout-top-2" title="Clock">
<span class="icon-bg-clock"></span>
<span>Clock</span>
</a>
</li>
<li>
<a class="icon-nav-horz" href="#page-layout-top-2" title="Film">
<span class="icon-bg-film"></span>
<span>Film</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<header class="page-header">
<h1>Main Page Content h1 Heading</h1>
<p class="sub-title">A sub-title of supporting text</p>
</header>
<section class="main-content">
<h2>An h2 Semantic Row Heading</h2>
<p class="sub-title">A sub-title of supporting text</p>
<div class="row has-3x-minwidth">
<section class="column">
<h3>Section One h3 Heading</h3>
<p class="sub-title">A sub-title of supporting text</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi,
tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla.</p>
</section>
<section class="column">
<h3>Section Two h3 Heading</h3>
<p class="sub-title">A sub-title of supporting text</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi,
tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla.</p>
</section>
</div>
</section>
<footer class="page-footer">
<div>Goldilocks-CSS © 2021 - 2022</div>
<div>page-footer</div>
<div>Version: 0.1.0 / March 21, 2022</div>
</footer>
</div>
Page Footer
The .page-footer component is a general flexbox row layout that can contain any
other elements or components. If the footer children are div or section tags, then these sections
are also flexbox controlled. These sections are column orientated to create vertical stacks.
.page-footer div or section can be modified by .is-medium or .is-wide
to set maximum wdiths of 20rem or 30 rem respectively to make any text areas easier to read.
<footer class="page-footer" id="page-footer-top">
<div class="is-medium">
<p class="foot-heading icon-nav-horz">
<img src="/goldi3-logo.png" class="icon" alt="Project Logo">
<span>Goldilocks-CSS</span>
</p>
<p>Designed and built for the overworked Product Manager who needs to get a product into the customers hands on time.</p>
<p>Code licensed <a href="https://github.com/zaphodbb-pm/goldilocks-css/blob/master/LICENSE.txt" title="MIT License">MIT</a>
<br/>
Website content <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" title="CC">CC BY 4.0.</a>
<br/>
Currently V0.1.0
</p>
</div>
<div>
<p class="foot-heading">Links</p>
<a href="#page-footer-top">Get Started</a>
</div>
<div>
<p class="foot-heading">Guides</p>
<a href="#page-footer-top">Installation</a>
</div>
<div>
<p class="foot-heading">Community</p>
<a href="https://github.com/zaphodbb-pm/goldilocks-css">Github</a>
<a href="https://github.com/zaphodbb-pm/goldilocks-css/issues">Issues</a>
</div>
</footer>