Layout

Main Header And Footer

Header and footer are separate applications that contain some of the styles in this toolkit and are not documented here. This documentation covers anything else within them:

+-header----------------------------------------------+
|/////////////////////////////////////////////////////|
+-----------------------------------------------------+
+-main_page_area--------------------------------------+
|                                                     |
|  this-documentation                                 |
|                                                     |
+-----------------------------------------------------+
+-footer----------------------------------------------+
|/////////////////////////////////////////////////////|
+-----------------------------------------------------+
    

The main page area is split in two sibling sections (elements): page header and page content:

+-page_header-----------------------------------------+
|                                                     |
+-----------------------------------------------------+
+-page_content----------------------------------------+
|                                                     |
+-----------------------------------------------------+
    

The Content Wrapper

The general page layout has some special margins and paddings for branding purposes. A nypl-full-width-wrapper class is provided to take care of this:

.nypl-full-width-wrapper
    

<div class="nypl-full-width-wrapper">
  <!-- rows and columns go here (you can't see a thing because wrapper has no border or background) -->
</div>
    

The nypl-full-width-wrapper is needed only twice: one for the page header, one for the page content. In the page header, the nypl-full-width-wrapper is nested inside. In the page content, the nypl-full-width-wrapper wraps the content. This is better explained below.

Page Header (And Breadcrumbs)

Contains a nypl-full-width-wrapper element (see above), that allows for the header to have a full width background color while maintaining alignment with the rest of the page elements such as header and footer. Page header contents are the nested within: breadcrumbs (optional) and header as an h1 (or h2 if another header in the page is more important) element.

Note: Page header content is not nested inside a nypl-row type element.

Breadcrumbs

Breadcrumbs are built with an ordered list (ol tag) with role="navigation" aria-label="breadcrumbs" of links up the information structure of the current page. The last item in the list does not have a link as it corresponds to the page the user is on. It is not necessary to add a “>” character.

Accessibility note: Before the breadcrumbs, include a span tag of class nypl-screenreader-only with the text “You are here:” to indicate screen readers the nature of the list.

.nypl-full-width-wrapper
.nypl-page-header
.nypl-screenreader-only
.nypl-breadcrumbs
    

<div class="nypl-page-header">
  <div class="nypl-full-width-wrapper">
    <span class="nypl-screenreader-only">You are here:</span>
    <ol role="navigation" aria-label="breadcrumbs" class="nypl-breadcrumbs">
      <li><a href="/">Home</a></li>
      <li><a href="/research">Research</a></li>
      <li>Articles &amp; databases</li>
    </ol>
    <h1>Articles &amp; databases</h1>
  </div>
</div>
    

Page Content

Is wrapped by a nypl-full-width-wrapper element that takes care of the general page padding and centering (see above). Inside this wrapper is a row/column layout that contains the entirety of any given page's main contents.

+-wrapper---------------------------------------------+
| +-row_and_cols------------------------------------+ |
| |                                                 | |
| |                                                 | |
| +-------------------------------------------------+ |
| +-row_and_cols------------------------------------+ |
| |                                                 | |
| |                                                 | |
| +-------------------------------------------------+ |
| +-row_and_cols------------------------------------+ |
| |                                                 | |
| |                                                 | |
| +-------------------------------------------------+ |
+-----------------------------------------------------+
    

The rows and columns themselves are based on a simple, mobile-ready row-4-column pattern that can be combined as needed. Existing column size classes are nypl-column-full, nypl-column-half, nypl-column-one-quarter, and nypl-column-three-quarters.

NOTE: avoid nesting rows inside columns as the system does not support it for the time being. It is preferred to use multiple rows if you require a more elaborate layout.

Full Width Column

.nypl-row
.nypl-column-full
    

<div class="nypl-row">
  <div class="nypl-column-full">
    <p>full width</p>
  </div>
</div>
    

Half Width Columns

.nypl-row
.nypl-column-half
    

<div class="nypl-row">
  <div class="nypl-column-half">
    <p>half</p>
  </div>
  <div class="nypl-column-half">
    <p>half</p>
  </div>
</div>
    

Quarter Width Columns

.nypl-row
.nypl-column-one-quarter
    

<div class="nypl-row">
  <div class="nypl-column-one-quarter">
    <p>one</p>
  </div>
  <div class="nypl-column-one-quarter">
    <p>two</p>
  </div>
  <div class="nypl-column-one-quarter">
    <p>three</p>
  </div>
  <div class="nypl-column-one-quarter">
    <p>four</p>
  </div>
</div>
    

One Quarter / Three Quarters Width Columns

.nypl-row
.nypl-column-one-quarter
.nypl-column-three-quarters
    

<div class="nypl-row">
  <div class="nypl-column-one-quarter">
    <p>one</p>
  </div>
  <div class="nypl-column-three-quarters">
    <p>three</p>
  </div>
</div>
    

Column Offsets

Use the nypl-column-offset-one, nypl-column-offset-two, and nypl-column-offset-three classes to push a column to the right a certain amount of columns.

Important: A row has to contain four columns including their offsets.

.nypl-row
.nypl-column-three-quarters
.nypl-column-offset-one
    

<div class="nypl-row">
  <div class="nypl-column-three-quarters nypl-column-offset-one">
    <p>three offsetted</p>
  </div>
</div>