Layout

Grid Columns

This establishes the grid.

Definition

%grid-columns {
  display: grid;
  grid-template-columns: [full-start] minmax(20px, 1fr) [main-start] minmax(0, $max-width) [main-end] minmax(20px, 1fr) [full-end];
  @include from(7) {
    grid-template-columns: [full-start] minmax(40px, 1fr) [main-start] minmax(0, $max-width) [main-end] minmax(40px, 1fr) [full-end];
  }
}

Example Usage

.sample {
   @extend %grid-columns;
}

Compiled Output

.sample {
  display: grid;
  grid-template-columns: [full-start] minmax(20px, 1fr) [main-start] minmax(0, 1280px) [main-end] minmax(20px, 1fr) [full-end];
}
@media (min-width: 768px) {
  .sample {
    grid-template-columns: [full-start] minmax(40px, 1fr) [main-start] minmax(0, 1280px) [main-end] minmax(40px, 1fr) [full-end];
  }
}

Source:global-scss/_layout.scss, line 1

Page Container

This class is applied to the parent of the page content.

Children of the page container include:

header
main
- <div class="grid-container">
  - <-- ALL direct descendants of grid-container MUST have a grid-column declared -->
  - aside – refer to Detail Layout.
- </div>
footer

Example

.page-container

header.site-header { grid-area: header; }

header.mobile-header { grid-area: header; }

.grid-container

main { grid-area: main; }

@include grid-placement(full-bleed) – { grid-column: full; }

@include grid-placement(constrained) – { grid-column: main; }

@include grid-placement(left-bleed) – { grid-column: main / full; }

@include grid-placement(right-bleed) – { grid-column: full / main; }

footer.site-footer { grid-area: footer; }

View Markup

<pre class="kss-label">
  <span>.page-container</span>
</pre>
<div class="page-container">
  <header class="site-header">
    <pre class="kss-label -kss-grid-area" style="margin-top:10px;">
      <span>header.site-header { grid-area: header; }</span>
    </pre>
  </header>
  <header class="mobile-header">
    <pre class="kss-label -kss-grid-area">
      <span>header.mobile-header { grid-area: header; }</span>
    </pre>
  </header>
  <main>
    <pre class="kss-label -kss-grid-main">
      <span>.grid-container</span>
    </pre>
    <div class="grid-container">
      <pre class="kss-label -kss-grid-area" style="grid-column: full">
        <span>main { grid-area: main; }</span>
      </pre>
      <pre class="kss-label -kss-grid-column -kss-grid-full">
        <span>@include grid-placement(full-bleed) – { grid-column: full; }</span>
      </pre>
      <pre class="kss-label -kss-grid-column -kss-grid-main">
        <span>@include grid-placement(constrained) – { grid-column: main; }</span>
      </pre>
      <pre class="kss-label -kss-grid-column -kss-grid-left">
        <span>@include grid-placement(left-bleed) – { grid-column: main / full; }</span>
      </pre>
      <pre class="kss-label -kss-grid-column -kss-grid-right">
        <span>@include grid-placement(right-bleed) – { grid-column: full / main; }</span>
      </pre>
    </div>
  </main>
  <footer class="site-footer">
    <pre class="kss-label -kss-grid-area -kss-grid-full">
      <span>footer.site-footer { grid-area: footer; }</span>
    </pre>
  </footer>
</div>

Source:global-scss/_layout.scss, line 40

Detail Layout

Detail page layout.

Go to Confluence for details.

Example

Feature

New bridge boosts capacity from Port of Long Beach

April 30, 2021

1

14 min read

sponsors

This course will provide a general background in port engineering. Various types of terminals will be presented, including: container, liquid bulk, dry bulk, cruise ships, small craft marinas, and USN/military terminals. The course will give the specific requirements of each of these various types of facilities and prepare the student for the engineering tasks required for port facilities. Reference materials will be the most current and provide a knowledge base and toolbox for the students.

I have led two national professional organizations (USUCGER and Geo-Institute) and two international professional organizations (ISSMGE and FedIGS) and my style has been consistent. It follows these simple steps:

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo soluta corrupti consequatur nostrum sed modi numquam, ipsam, voluptas tenetur alias quod debitis vitae provident repellat placeat libero ipsa. Eos nobis voluptatum similique nesciunt praesentium quis et ea cumque! Reprehenderit, corporis veniam. Necessitatibus neque harum, ab debitis deserunt quod nisi ratione!

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolores cum beatae neque accusantium, libero vel nam eaque asperiores officia sapiente quae consequatur rem magni corrupti quam voluptate blanditiis exercitationem? Omnis!

Develop a general background in port engineering.
Become familiar with distinct types of terminals including container, liquid bulk, dry bulk, cruise ships, small craft marinas, and USN/military terminals.
Understand the specific requirements of each of these types of facilities
- Develop a general background in port engineering.
- Become familiar with distinct types of terminals including container, liquid bulk, dry bulk, cruise ships, small craft marinas, and USN/military terminals.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla velit iusto, temporibus sapiente impedit dolore, consequatur sint a maxime nihil aut eaque repellat totam magnam accusantium qui tempora quam incidunt vero. Eveniet perferendis tempore laboriosam nam suscipit animi aperiam dicta, esse vero illo, totam nihil eos molestiae rem porro reprehenderit dolorem assumenda eum minus, commodi magnam amet? Necessitatibus deleniti accusantium facilis? Repellendus quae delectus nesciunt inventore impedit quo at facere magni suscipit provident, aspernatur sapiente.

Develop a general background in port engineering.
Become familiar with distinct types of terminals including container, liquid bulk, dry bulk, cruise ships, small craft marinas, and USN/military terminals.
Understand the specific requirements of each of these types of facilities
1. Develop a general background in port engineering.
2. Become familiar with distinct types of terminals including container, liquid bulk, dry bulk, cruise ships, small craft marinas, and USN/military terminals.
  1. Develop a general background in port engineering.
  2. Become familiar with distinct types of terminals including container, liquid bulk, dry bulk, cruise ships, small craft marinas, and USN/military terminals.

Header 1