grid docs

Grid

A flexible 12-column grid with responsive breakpoint options.
Usage recommendations
Recommended Not Recommended
Custom Layouts: Grid should be used when a design calls for non-standard column widths. Standard Layouts: Don't use the grid for common layouts (for example, 50%/50%, or 33%/33%/33%), these layouts should be built with Bolt Layout instead.
Unpredictable Patterns: Use grid when a design layout contains non-standard or unpredictable column widths and breakpoint behaviors. Consistent Patterns: Don't use the grid when the design layout follows common predictable column widths and breakpoint behaviors. These layouts should be built with Bolt Layout instead.
Twig Usage 
{% include '@bolt-layouts-grid/grid.twig' with {
  gutter: 'medium',
  row_gutter: 'medium',
  items: [
    {
      column_start: '1',
      column_span: '1',
      row_start: '1',
      row_span: '1',
      valign: 'start',
      content: 'Item Content',
    },
  ]
} only %}
 Schema
Grid (grid.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal-style attributes object with extra attributes to append to this component.

 object —
  • —
gutter

Spacing between the columns of the grid.

 string medium
  • none, small, medium, large
row_gutter

Spacing between the rows of the grid.

 string medium
  • none, small, medium, large
items

Array of grid items to render inside the grid.

 array —
    • attributes

      A Drupal-style attributes object with extra attributes to append to this component.

      • —
    • content

      Content to render inside each grid item.

      • —
    • valign

      Vertical alignment of the grid item itself.

      • start, center, end
    • column_start

      The vertical starting point of the grid item. This accepts any number from 1 to 12, and their perspective responsive variations for advanced usage, for example, 6@small means the column start is set at 6 for any browser width larger and equal to the small breakpoint. This prop is required to make the grid work in Internet Explorer.

      • —
    • column_span

      The number of columns the grid item should span across. This accepts any number from 1 to 12, and their perspective responsive variations for advanced usage, for example, 6@small means the column span is set at 6 for any browser width larger and equal to the small breakpoint.

      • —
    • row_start

      The horizontal starting point of the grid item. This prop is required to make the grid work in Internet Explorer.

      • —
    • row_span

      The number of rows the grid item should span across.

      • —
Grid Item (grid-item.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal-style attributes object with extra attributes to append to this component.

 object —
  • —
valign

Vertical alignment of the grid item itself

 string auto
  • auto, start, center, end
column_start

The general column the grid item should start on. For example, a with the attributes columns="3" start-column="2" would start on the 2nd column and extend for 3 columns so it would span the 2nd, 3rd and 4th column.

 string —
  • —
column_end

The general column the grid item should stop on. For example, a with the attributes start-column="2" end-column="3" would start on the 2nd column and extend until the 3rd column.

 string —
  • —
column_span

The number of columns the should span across

 string —
  • —
row_start

Specifies a grid item’s start position within the grid row

 string auto
  • —
row_end

Specifies a grid item’s ending position within the grid row

 string auto
  • —
row_span

Specifies the number of rows a should span across

 string auto
  • —
Install Install 
npm install @bolt/layouts-grid
Dependencies @bolt/core

grid

Bolt Grid is a 12-column grid design approach

By using The Grid to design layouts, consistency is guaranteed. If your goal is to confine your layout to a 12-column grid and have elements spaced and lined up consistently using the Bolt spacing system, The Grid is for you. Otherwise, you should not use The Grid, there is the List component for simple layouts and alignments.

1 2 3 4 5 6 7 8 9 10 11 12

grid start and span

Column start and column span

The Bolt Grid is built on the concept of column start and column span, this allows the user to have full control of the grid layout.

Common usage

Main content in the center (column start 3 and column span 8) with 2 asides.

Aside
Main
Aside

Main content with an aside (column start 9 and column span 4).

Main
Aside

Row start and row span

Row start and row span are also available, they are for less common layouts.

Row
Row
Row
 Start at column 2 and row 2 and span 2 rows.
Row
Row
Row

All possible start and span options

Please refer to the Bolt Breakpoints for all possible breakpoint names. number@breakpoint-name means starting at that specific breakpoint, change to the number defined. For example: column_span: "6@small" means starting at the small breakpoint, span 6 columns.

Regular Option Responsive Option
column_start 1 to 12 1@breakpoint-name to 12@breakpoint-name
column_span 1 to 12 1@breakpoint-name to 12@breakpoint-name
row_start 1 to 12 1@breakpoint-name to 12@breakpoint-name
row_span 1 to 12 1@breakpoint-name to 12@breakpoint-name

grid gutter variations

None Gutter

Span 4 columns
Span 4 columns
Span 4 columns

Small Gutter

Span 4 columns
Span 4 columns
Span 4 columns

Medium Gutter

Span 4 columns
Span 4 columns
Span 4 columns

Large Gutter

Span 4 columns
Span 4 columns
Span 4 columns

grid row gutter variations

None Row Gutter

Span 12 columns
Span 12 columns
Span 12 columns

Small Row Gutter

Span 12 columns
Span 12 columns
Span 12 columns

Medium Row Gutter

Span 12 columns
Span 12 columns
Span 12 columns

Large Row Gutter

Span 12 columns
Span 12 columns
Span 12 columns

grid item column span variations

Each item can span from 1 to 12 columns

Span 3 columns
Span 6 columns
Span 9 columns
Span 12 columns

Use any combination that adds up to 12 columns to form a row

In this example, the item 1 is starting at column 1 and spanning 3 columns wide, the item 2 is starting at column 4 and spanning 9 columns.

Item 1
Item 2

In this example, the item 1 is starting at column 1 and spanning 6 columns wide, the item 2 is starting at column 7 and spanning 6 columns.

Item 1
Item 2

grid item row span variations

Each item can span from 1 to 12 rows

Row span works as long as you have multiple rows. For example, if you only have 2 rows of content, you cannot have an item to span 3 rows because the highest you can get is 2.

3 rows 6 rows 9 rows 12 rows
Row
Row
Row
Row
Row
Row
Row
Row
Row
Row
Row
Row

grid item responsive breakpoints

Responsive breakpoint options

Use the @breakpoint options to do advanced responsive layouts.

  • Item 1
    1. Up to small breakpoint: start at row 2 and span 12 columns
    2. Starting at small breakpoint: start at row 1 and span for 4 columns
    3. Starting at medium breakpoint: start at row 1 and span for 3 columns
    column_start: '1', column_span: '12 3@small 4@medium', row_start: '2 1@small'
  • Item 2
    1. Up to small breakpoint: start at row 1 and span 12 columns
    2. Starting at small breakpoint: start at row 1 and span for 8 columns
    3. Starting at medium breakpoint: start at row 1 and span for 9 columns
    column_start: '1 5@small 4@medium', column_span: '12 8@small 9@medium', row_start: '1 1@small'
Item 1
Item 2

grid item align variations

Horizontal item alignment

The alignment must be set manually by using column start and column span, that way the user can position the item exactly as intended with the flexibility doing more than the common start, center, and end alignments.

Standard alignments

To align an item to the start, set column start to 1.

Column start at 1 and span 4

To align an item to the center, set column start by using this formula: (12 - column_span) / 2 + 1.

Column start at 5 and span 4

To align an item to the end, set column start by using this formula: (12 - column_span) + 1.

Column start at 9 and span 4

Advanced alignments

Offset by 1 column from the center.

Column start at 4 and span 8

Offset by 1 column from the start.

Column start at 2 and span 2

grid item valign variations

Vertical item alignment

Vertical alignment of an item can simply be defined by the valign prop.

Start

Item
Item
Item

Center

Item
Item
Item

End

Item
Item
Item

grid traditional columns and rows

Traditional Columns and Rows

  1. Use a parent grid to create rows, each item span for 12 columns.
  2. Inside each item of the parent grid, pass a child grid to create columns.
Item
Item
Item
Item
Item
Item
Item
Item
Item

holy grail docs

Holy Grail

A page layout with a sidebar on the left and another on the right.
Twig Usage 
// Set up sidebar templates
{% set sidebar %}
  {% include '@bolt-layouts-holy-grail/holy-grail-sidebar.twig' with {
    content: 'Primary sidebar',
  } only %}
{% endset %}
{% set secondary_sidebar %}
  {% include '@bolt-layouts-holy-grail/holy-grail-secondary-sidebar.twig' with {
    content: 'Secondary sidebar',
  } only %}
{% endset %}

// Pass sidebars to main template
{% include '@bolt-layouts-holy-grail/holy-grail.twig' with {
  content: 'This is a holy grail layout.',
  sidebar: sidebar,
  secondary_sidebar: secondary_sidebar,
} only %}
 Schema
Holy Grail (holy-grail.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
content *

The main content area of the layout.

 any —
  • —
sidebar

The primary sidebar of the layout. Sidebar twig template is expected to be passed here.

 object —
  • —
secondary_sidebar

The secondary sidebar of the layout. Secondary sidebar twig template is expected to be passed here.

 object —
  • —
Holy Grail Sidebar (holy-grail-sidebar.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
content

Render content of the primary sidebar.

 any —
  • —
trigger_icon

Set the icon of the trigger button that is shown in smaller viewports.

 string —
  • —
trigger_label

Set the text of the trigger button that is shown in smaller viewports.

 string —
  • —
Holy Grail Secondary Sidebar (holy-grail-secondary-sidebar.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
content

Render content of the secondary sidebar.

 any —
  • —
Install Install 
npm install @bolt/layouts-holy-grail
Dependencies @bolt/core @bolt/elements-icon js-cookie

holy grail

Basic Holy Grail Layout The Holy Grail layout renders a sidebar on the left and another on the right. It is a top level page layout.
Important Notes: The sidebars are sticky at and above the medium breakpoint.The primary sidebar transforms into a modal below the medium breakpoint. User can tap a trigger button to activate the modal. trigger_icon and trigger_label props are available for customizing the icon and label text in the trigger button.The secondary sidebar disappears entirely below the medium breakpoint. This sidebar is intended for non-essential information.Holy Grail layout should be used in tandem with Site layout. It would go into the main content area.Tech Doc is a great example of using Holy Grail layout, Site layout, Side Nav, Content Pagination, and Article element together. View demoRead more about holy grail layout on Wikipedia.
Demo
Primary sidebar
Secondary sidebar
This is a holy grail layout.
Twig
// Set up sidebar templates
{% set sidebar %}
  {% include '@bolt-layouts-holy-grail/holy-grail-sidebar.twig' with {
    content: 'Primary sidebar',
  } only %}
{% endset %}
{% set secondary_sidebar %}
  {% include '@bolt-layouts-holy-grail/holy-grail-secondary-sidebar.twig' with {
    content: 'Secondary sidebar',
  } only %}
{% endset %}

// Pass sidebars to main template
{% include '@bolt-layouts-holy-grail/holy-grail.twig' with {
  content: 'This is a holy grail layout.',
  sidebar: sidebar,
  secondary_sidebar: secondary_sidebar,
} only %}
HTML
Not available in plain HTML. Please use Twig.

holy grail use case navigation

Use Case: Navigation The Holy Grail layout is commonly used for documentation design where a page would display a book nav and a page level table of contents.
Important Notes: The primary sidebar works best with the Side Nav component. The secondary sidebar works best with the Table of Contents component.
Demo

Section One

This is a holy grail layout.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis harum placeat magni voluptas maiores iure explicabo magnam delectus et molestias tempore, dolore sed voluptate voluptatibus! Voluptas pariatur rerum quidem blanditiis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae atque molestias esse iusto laboriosam, repellendus voluptate adipisci consequatur consectetur? Fuga recusandae excepturi deleniti quo natus voluptas sequi, optio nemo aspernatur.

Section Two

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis harum placeat magni voluptas maiores iure explicabo magnam delectus et molestias tempore, dolore sed voluptate voluptatibus! Voluptas pariatur rerum quidem blanditiis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae atque molestias esse iusto laboriosam, repellendus voluptate adipisci consequatur consectetur? Fuga recusandae excepturi deleniti quo natus voluptas sequi, optio nemo aspernatur.

Item number Description Assemblies
Build 2.0.1.0 — SR-49969 SR-49941 This hotfix changes Updater requirements for .NET. If you are using Updater with 7.1 or 8.0 Robotic Automation Runtime clients, you now need to have both .NET 4.0 and .NET 3.5 installed. OpenSpan.UpdaterService.Remoting.dll
OpenSpan.Updater.ServerClientInterface.dll
OpenSpan.Updater.ScheduledTasks.dll
OpenSpan.Updater.PrePostOperation.dll
OpenSpan.Updater.Git.dll
OpenSpan.VersionFinder.exe
OpenSpan.UpdaterService.exe
OpenSpan.Updater.X509tool.exe
OpenSpan.Updater.UserHelper.exe
OpenSpan.Updater.UninstallHelper.exe
OpenSpan.Updater.RuntimeLauncher.exe
OpenSpan.Updater.InstallHelper.exe
OpenSpan.Updater.Initializer.exe
Build 1.1.360 — SR-44891 SR-44869 This hotfix changes the system to better handle long file names. It also enhances VersionFinder to sort the list of branches, making it easier to find a specific branch. OpenSpan.Updater.Git.dll
SR-43163 This hotfix adds a list of post-update tasks to the RuntimeConfig.xml file. These tasks are run after files that match a pattern you specify are updated. OpenSpan.Updater.Git.dll
OpenSpan.Updater.Initializer.exe
OpenSpan.Updater.InstallHelper.exe
OpenSpan.Updater.PrePostOperation.dll
OpenSpan.Updater.PreReqCheck.dll
OpenSpan.Updater.RuntimeLauncher.exe
OpenSpan.Updater.ScheduledTasks.dll
OpenSpan.Updater.ServerClientInterface.dll
OpenSpan.Updater.ServerClientInterface.Tester.exe
OpenSpan.Updater.UninstallHelper.exe
OpenSpan.Updater.UserHelper.exe
OpenSpan.Updater.X509tool.exe
OpenSpan.UpdaterService.Remoting.dll
OpenSpan.UpdaterService.exe
Build 1.1.354 — SR-44889 SR-44850 This hotfix changes Updater to avoid an exception that could prevent it from correctly populating branches. ManagedOpenSsl.dll
Twig
// Set up sidebar templates
{% set sidebar %}
  {% include '@bolt-layouts-holy-grail/holy-grail-sidebar.twig' with {
    content: side_nav,
    trigger_icon: 'documentation',
    trigger_label: 'Book Navigation',
    attributes: {
      class: 't-bolt-gray-xlight',
    },
  } only %}
{% endset %}
{% set secondary_sidebar %}
  {% include '@bolt-layouts-holy-grail/holy-grail-secondary-sidebar.twig' with {
    content: table_of_contents,
  } only %}
{% endset %}

// Pass sidebars to main template
{% include '@bolt-layouts-holy-grail/holy-grail.twig' with {
  content: content,
  sidebar: sidebar,
  secondary_sidebar: secondary_sidebar,
} only %}
HTML
Not available in plain HTML. Please use Twig.

layout docs

Layout

The foundational template of any given layout.
Twig Usage 
{% set content %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: 'Layout item'
  } only %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: 'Layout item'
  } only %}
{% endset %}
{% include '@bolt-layouts-layout/layout.twig' with {
  content: content,
} only %}
 Schema
Layout (layout.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the <bolt-layout> tag.

 object —
  • —
content

Content of the layout. While anything can be passed, layout items are preferred.

 any —
  • —
template

Select from a predefined set of layout templates. Numbers represent % of each layout item widths. The @from-* keywords mean "starting from a particular breakpoint".

 array[string] —
  • 50, 50@from-small, 50@from-medium, 67, 67@from-small, 67@from-medium, 75, 75@from-small, 75@from-medium, 25/25/50@from-small, 25/25/50@from-medium, 25/50/25@from-small, 25/50/25@from-medium, 25/75@from-small, 25/75@from-medium, 33/67@from-small, 33/67@from-medium, 50/25/25@from-small, 50/25/25@from-medium, 67/33@from-small, 67/33@from-medium, 75/25@from-small, 75/25@from-medium, halves, halves@from-small, halves@from-medium, thirds@from-small, thirds@from-medium, fourths@from-small, fourths@from-medium, tiles, tiles@from-small, tiles@from-medium, flag, flag@from-small, flag@from-medium, full-vertical-push-last-item
gutter

Set the horizontal spacing in between layout items.

 string medium
  • none, small, medium, large, xlarge
row_gutter

Set the vertical spacing in between layout items.

 string medium
  • none, small, medium, large, xlarge
padding_top

Set the top padding of the layout.

 string medium
  • none, small, medium, large, xlarge
padding_bottom

Set the bottom padding of the layout.

 string medium
  • none, small, medium, large, xlarge
align_items

Control the horizontal alignment of all layout items.

 string center
  • start, center, end
valign_items

Control the vertical alignment of all layout items. Unset is required for setting equal-height layout items, do not set this prop if that is the intention.

 string —
  • start, center, end
full_bleed

Removes all outer spacing, allowing the layout to extend from edge to edge of its container.

 boolean false
  • —
background

A content container that delivers important messages to the user.

 object —
    • attributes

      A Drupal-style attributes object with extra attributes to append to this component.

      • —
    • opacity

      Overlay opacity

      • none, light, medium, heavy, full
    • fill

      Type of fill to use for the overlay.

      • solid or gradient
    • focal_point

      Point where the background gradient highlight should originate.

        • horizontal

          X-axis positioning for the background focal point

          • center, left, right
        • vertical

          Y-axis positioning for the background focal point

          • center, top, bottom
    • video

      Set to true if you like to use video as a background.

      • —
    • video_toggle_button

      A Drupal-rendered button that will play and pause a background video.

      • —
    • items

      An array of renderable items to place in the background.

      • [items]:
        • Type:any
    • shape_group

      Add a Bolt Background Shapes group.

      • A, B, none
    • shape_alignment

      Alignment of shape group.

      • left or right
Layout item (layout-item.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the <bolt-layout-item> tag.

 object —
  • —
content

Content of the layout item.

 any —
  • —
valign_self

Control the vertical alignment of the layout item. This will ignore the vertical alignment set on the layout.

 string —
  • start, center, end, start-offset, end-offset
order

Bring the layout item to the start or the end of the layout. Only use this if the order of layout items need to be adjusted at specific breakpoints. The @from-* keywords mean "starting from a particular breakpoint". The item order can be reset to the default order related to the HTML structure at larger breakpoint if needed. Use reset@from-* when the order should be default again. Please note that the reset option works only when first or last option is used. Do not laverage options for the same breakpoint like "first@from-small" and "reset@from-small" as this cannot work.

 array[string] —
  • first, last, first@from-small, first@from-medium, last@from-small, last@from-medium, reset@from-small, reset@from-medium
Install Install 
npm install @bolt/layouts-layout
Dependencies @bolt/core

site docs

Site

The classic pancake stack site layout that enables the footer to be always positioned on the bottom.
Twig Usage 
{% include '@bolt-layouts-site/site.twig' with {
  header: 'This is the header.',
  main: {
    content: 'This is the main content.',
    attributes: {
      'data-foo': 'bar',
    }
  },
  footer: 'This is the footer.',
} only %}
 Schema
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
header

The header of the site.

 any —
  • —
main

The main area of the site. This creates the <main> element.

 object —
    • attributes

      A Drupal attributes object. Applies extra HTML attributes to the <main> element.

      • —
    • content

      The main content of the site.

      • —
footer

The footer of the site.

 any —
  • —
Install Install 
npm install @bolt/layouts-site
Dependencies @bolt/core

site

Basic Site Layout Site layout renders the header, main, and footer landmarks of a page.
Important Notes: The content is already rendered inside a <main> element, do not pass another <main> element to the prop. The header and footer are freeform, the props are expecting <header> and <footer> elements repectively. The site layout must only contain <header>, <main>, and <footer> as immediate children. No additional elements can be a child. This is the replacement for the .c-bolt-site class.
Demo
This is the header.
This is the main content. The site layout is at least 100% of viewport height and the footer is always positioned on the bottom.
This is the footer.
Twig
{% include '@bolt-layouts-site/site.twig' with {
  header: '<header>This is the header.</header>',
  main: {
    content: 'This is the main content.',
    attributes: {
      id: 'main-content',
    }
  },
  footer: '<footer>This is the footer.</footer>',
} only %}
HTML
<div class="l-bolt-site">
  <header>
    // This is the header
  </header>
  <main id="main-content">
    // This is the main content
  </main>
  <footer>
    // This is the footer
  </footer>
</div>