Grid Templates

Easily create row layouts with our library of grid templates.


Overview

Certain components allow for items inside them to be laid out inline in a row-like fashion. These include the following rows and list items inside of both Panels and Cards. In order to make inline or row-based layouts simple and easy to build on the fly we've set up a number of template sets that employ CSS Grid templates. This means that you can add one of the grid template classes below onto any row-based layout element such as card rows or panel rows and the elements within will conform in a snap.

The method we employ sees layouts as being composed of one of two kinds of elements:

  • Fixed elements — these have a small instrinsic size, and they space they occupy fits snugly around them. Think of icons, small text labels, and option menu triggers.
  • Flexing elements — these are allowed to span wider and fill space that remains after fixed elements's sizes are accounted for. This means they may not always naturally fill this space, but can flow within the bounds of this space. Think of text that may be of varied size but can span between other fixed elements.

Since naming a series of abstract patterns is challenging to do in a way that is anything more than an enumerated list, we decided to use Morse Code as a base. As each letter in Morse Code is composed of a series of dots and dashes, so our layouts are composed of a series of fixed and flexing elements. So if fixed elements are "dots" and flexing elements are "dashes" we can easily analyze a layout to extract a "Morse-like" pattern.

Patterns

The patterns below use a simple combinations of just a few letters:

Type Description Single Double Triple
Dots Fixed elements such as icons, buttons, labels, and other controls

E .

I ..

S ...

Dashes Flexing elements such as text blocks

T -

M --

O ---

While these may be useful on their own, the power comes in their combination, where letters are combined for a compound layout pattern. Yet, it would also not be useful or practical to have two dot letters in a row, we thus allow for dots then dashes, dashes then dots, or dots, dashes, and dots. A full set of the possibilities are demonstrated below.

Note: Elements shown here are merely demonstrations; any fixed or flexible elements may be substituted.

Equal sized columns

m

--
HTML: .sage-grid-template-m
Rails: SageClassnames::GRID_TEMPLATES::M
React: SageClassnames.GRID_TEMPLATES.M

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

o

---
HTML: .sage-grid-template-o
Rails: SageClassnames::GRID_TEMPLATES::O
React: SageClassnames.GRID_TEMPLATES.O

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

Sed a tortor magna sed consectetur, sapien eget consequat.

ot

----
HTML: .sage-grid-template-ot
Rails: SageClassnames::GRID_TEMPLATES::OT
React: SageClassnames.GRID_TEMPLATES.OT

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

Sed a tortor magna sed consectetur, sapien eget consequat.

Phasellus semper nisi metus, vel pulvinar risus hendrerit non.

om

-----
HTML: .sage-grid-template-om
Rails: SageClassnames::GRID_TEMPLATES::OM
React: SageClassnames.GRID_TEMPLATES.OM

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

Sed a tortor magna sed consectetur, sapien eget consequat.

Phasellus semper nisi metus, vel pulvinar risus hendrerit non.

Integer nec ultricies nibh. Aenean sit amet faucibus massa.

oo

------
HTML: .sage-grid-template-oo
Rails: SageClassnames::GRID_TEMPLATES::OO
React: SageClassnames.GRID_TEMPLATES.OO

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

Sed a tortor magna sed consectetur, sapien eget consequat.

Phasellus semper nisi metus, vel pulvinar risus hendrerit non.

Integer nec ultricies nibh. Aenean sit amet faucibus massa.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Dots first

et

.-
HTML: .sage-grid-template-et
Rails: SageClassnames::GRID_TEMPLATES::ET
React: SageClassnames.GRID_TEMPLATES.ET

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

em

.--
HTML: .sage-grid-template-em
Rails: SageClassnames::GRID_TEMPLATES::EM
React: SageClassnames.GRID_TEMPLATES.EM

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

eo

.---
HTML: .sage-grid-template-eo
Rails: SageClassnames::GRID_TEMPLATES::EO
React: SageClassnames.GRID_TEMPLATES.EO

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

Sed a tortor magna sed consectetur, sapien eget consequat.

it

..-
HTML: .sage-grid-template-it
Rails: SageClassnames::GRID_TEMPLATES::IT
React: SageClassnames.GRID_TEMPLATES.IT
In progress

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

im

..--
HTML: .sage-grid-template-im
Rails: SageClassnames::GRID_TEMPLATES::IM
React: SageClassnames.GRID_TEMPLATES.IM
In progress

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

io

..---
HTML: .sage-grid-template-io
Rails: SageClassnames::GRID_TEMPLATES::IO
React: SageClassnames.GRID_TEMPLATES.IO
In progress

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

Sed a tortor magna sed consectetur, sapien eget consequat.

se

...-
HTML: .sage-grid-template-se
Rails: SageClassnames::GRID_TEMPLATES::SE
React: SageClassnames.GRID_TEMPLATES.SE
In progress

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

sm

...--
HTML: .sage-grid-template-sm
Rails: SageClassnames::GRID_TEMPLATES::SM
React: SageClassnames.GRID_TEMPLATES.SM
In progress

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

so

...---
HTML: .sage-grid-template-so
Rails: SageClassnames::GRID_TEMPLATES::SO
React: SageClassnames.GRID_TEMPLATES.SO
In progress

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

Sed a tortor magna sed consectetur, sapien eget consequat.

Dashes First

te

-.
HTML: .sage-grid-template-te
Rails: SageClassnames::GRID_TEMPLATES::TE
React: SageClassnames.GRID_TEMPLATES.TE

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

ti

-..
HTML: .sage-grid-template-ti
Rails: SageClassnames::GRID_TEMPLATES::TI
React: SageClassnames.GRID_TEMPLATES.TI

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

In progress

ts

-...
HTML: .sage-grid-template-ts
Rails: SageClassnames::GRID_TEMPLATES::TS
React: SageClassnames.GRID_TEMPLATES.TS

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

In progress

me

--.
HTML: .sage-grid-template-me
Rails: SageClassnames::GRID_TEMPLATES::ME
React: SageClassnames.GRID_TEMPLATES.ME

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

mi

--..
HTML: .sage-grid-template-mi
Rails: SageClassnames::GRID_TEMPLATES::MI
React: SageClassnames.GRID_TEMPLATES.MI

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

In progress

ms

--...
HTML: .sage-grid-template-ms
Rails: SageClassnames::GRID_TEMPLATES::MS
React: SageClassnames.GRID_TEMPLATES.MS

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

In progress

oe

---.
HTML: .sage-grid-template-oe
Rails: SageClassnames::GRID_TEMPLATES::OE
React: SageClassnames.GRID_TEMPLATES.OE

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

Sed a tortor magna sed consectetur, sapien eget consequat.

oi

---..
HTML: .sage-grid-template-oi
Rails: SageClassnames::GRID_TEMPLATES::OI
React: SageClassnames.GRID_TEMPLATES.OI

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

Sed a tortor magna sed consectetur, sapien eget consequat.

In progress

os

---...
HTML: .sage-grid-template-os
Rails: SageClassnames::GRID_TEMPLATES::OS
React: SageClassnames.GRID_TEMPLATES.OS

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

Sed a tortor magna sed consectetur, sapien eget consequat.

In progress

Dots on both sides

ete

.-.
HTML: .sage-grid-template-ete
Rails: SageClassnames::GRID_TEMPLATES::ETE
React: SageClassnames.GRID_TEMPLATES.ETE

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

In progress

eti

.-..
HTML: .sage-grid-template-eti
Rails: SageClassnames::GRID_TEMPLATES::ETI
React: SageClassnames.GRID_TEMPLATES.ETI

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

In progress

ets

.-...
HTML: .sage-grid-template-ets
Rails: SageClassnames::GRID_TEMPLATES::ETS
React: SageClassnames.GRID_TEMPLATES.ETS

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

In progress Verified

eme

.--.
HTML: .sage-grid-template-eme
Rails: SageClassnames::GRID_TEMPLATES::EME
React: SageClassnames.GRID_TEMPLATES.EME

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

In progress

emi

.--..
HTML: .sage-grid-template-emi
Rails: SageClassnames::GRID_TEMPLATES::EMI
React: SageClassnames.GRID_TEMPLATES.EMI

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

In progress

ems

.--...
HTML: .sage-grid-template-ems
Rails: SageClassnames::GRID_TEMPLATES::EMS
React: SageClassnames.GRID_TEMPLATES.EMS

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

In progress Verified

eoe

.---.
HTML: .sage-grid-template-eoe
Rails: SageClassnames::GRID_TEMPLATES::EOE
React: SageClassnames.GRID_TEMPLATES.EOE

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

Sed a tortor magna sed consectetur, sapien eget consequat.

In progress

eoi

.---..
HTML: .sage-grid-template-eoi
Rails: SageClassnames::GRID_TEMPLATES::EOI
React: SageClassnames.GRID_TEMPLATES.EOI

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

Sed a tortor magna sed consectetur, sapien eget consequat.

In progress

eos

.---...
HTML: .sage-grid-template-eos
Rails: SageClassnames::GRID_TEMPLATES::EOS
React: SageClassnames.GRID_TEMPLATES.EOS

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

Sed a tortor magna sed consectetur, sapien eget consequat.

In progress Verified

ite

..-.
HTML: .sage-grid-template-ite
Rails: SageClassnames::GRID_TEMPLATES::ITE
React: SageClassnames.GRID_TEMPLATES.ITE
In progress

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

iti

..-..
HTML: .sage-grid-template-iti
Rails: SageClassnames::GRID_TEMPLATES::ITI
React: SageClassnames.GRID_TEMPLATES.ITI
In progress

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Verified

its

..-...
HTML: .sage-grid-template-its
Rails: SageClassnames::GRID_TEMPLATES::ITS
React: SageClassnames.GRID_TEMPLATES.ITS
In progress

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Verified $5.99

ime

..--.
HTML: .sage-grid-template-ime
Rails: SageClassnames::GRID_TEMPLATES::IME
React: SageClassnames.GRID_TEMPLATES.IME
In progress

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

imi

..--..
HTML: .sage-grid-template-imi
Rails: SageClassnames::GRID_TEMPLATES::IMI
React: SageClassnames.GRID_TEMPLATES.IMI
In progress

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

Verified

ims

..--...
HTML: .sage-grid-template-ims
Rails: SageClassnames::GRID_TEMPLATES::IMS
React: SageClassnames.GRID_TEMPLATES.IMS
In progress

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

Verified $5.99

ioe

..---.
HTML: .sage-grid-template-ioe
Rails: SageClassnames::GRID_TEMPLATES::IOE
React: SageClassnames.GRID_TEMPLATES.IOE
In progress

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

Sed a tortor magna sed consectetur, sapien eget consequat.

ioi

..---..
HTML: .sage-grid-template-ioi
Rails: SageClassnames::GRID_TEMPLATES::IOI
React: SageClassnames.GRID_TEMPLATES.IOI
In progress

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

Sed a tortor magna sed consectetur, sapien eget consequat.

Verified

ios

..---...
HTML: .sage-grid-template-ios
Rails: SageClassnames::GRID_TEMPLATES::IOS
React: SageClassnames.GRID_TEMPLATES.IOS
In progress

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

Sed a tortor magna sed consectetur, sapien eget consequat.

Verified $5.99

ste

...-.
HTML: .sage-grid-template-ste
Rails: SageClassnames::GRID_TEMPLATES::STE
React: SageClassnames.GRID_TEMPLATES.STE
In progress

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Verified

sti

...-..
HTML: .sage-grid-template-sti
Rails: SageClassnames::GRID_TEMPLATES::STI
React: SageClassnames.GRID_TEMPLATES.STI
In progress

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Verified $5.99

sts

...-...
HTML: .sage-grid-template-sts
Rails: SageClassnames::GRID_TEMPLATES::STS
React: SageClassnames.GRID_TEMPLATES.STS
In progress

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Verified $5.99

sme

...--.
HTML: .sage-grid-template-sme
Rails: SageClassnames::GRID_TEMPLATES::SME
React: SageClassnames.GRID_TEMPLATES.SME
In progress

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

Verified

smi

...--..
HTML: .sage-grid-template-smi
Rails: SageClassnames::GRID_TEMPLATES::SMI
React: SageClassnames.GRID_TEMPLATES.SMI
In progress

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

Verified $5.99

sms

...--...
HTML: .sage-grid-template-sms
Rails: SageClassnames::GRID_TEMPLATES::SMS
React: SageClassnames.GRID_TEMPLATES.SMS
In progress

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

Verified $5.99

soe

...---.
HTML: .sage-grid-template-soe
Rails: SageClassnames::GRID_TEMPLATES::SOE
React: SageClassnames.GRID_TEMPLATES.SOE
In progress

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

Sed a tortor magna sed consectetur, sapien eget consequat.

Verified

soi

...---..
HTML: .sage-grid-template-soi
Rails: SageClassnames::GRID_TEMPLATES::SOI
React: SageClassnames.GRID_TEMPLATES.SOI
In progress

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

Sed a tortor magna sed consectetur, sapien eget consequat.

Verified $5.99

sos

...---...
HTML: .sage-grid-template-sos
Rails: SageClassnames::GRID_TEMPLATES::SOS
React: SageClassnames.GRID_TEMPLATES.SOS
In progress

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin aliquam tortor eget tortor suscipit blandit nunc sed.

Sed a tortor magna sed consectetur, sapien eget consequat.

Verified $5.99

Context

The grid templates above apply the desired row-based layout along with a particular gutter between columns. These are typically already applied inside Panels, Cards, and other components. In other cases where this is not the case, the following utilities may be used to apply the desired grid spacing on a container:

Name Spacing Code
panel 24px

HTML: sage-panel-grid
Rails: SageClassnames::GRID_PANEL
React: SageClassnames.GRID_PANEL

card 16px

HTML: sage-card-grid
Rails: SageClassnames::GRID_CARD
React: SageClassnames.GRID_CARD

Responsive Considerations

These layouts persist for tablet and desktop viewports, but for smartphone they will stack and flow with flexing elements filling the viewport and fixed elements lining up as long as space allows, wrapping otherwise.

Limitations and Customization

A number of limitations become apparent with this system, some of which include:

  • It is impossible to cover all possible layouts in a practical and digestible fashion. We have limited this library to up to three dots or dashes in a series, and only one set of dashes.
  • Fixed elements sometimes do need particular sizes to be specified; our system assumes they have an intrinsic size.
  • The responsive capability of the grid is quite hampered by a one-size-fits-all rule as we've employed here.
  • Source order independence is another capability of the grid is completely ignored by this system. Accessibility may therefore also be somewhat hampered, albeit no more than it has been hampered by layout techniques that predate the CSS Grid.

For these and other reasons, needs may arise where a custom grid template may be needed. In such a case consider this approach:

  • Unless a completely new component is needed, aim to use as much of the existing Panel and Card styles that exist so that all that remains is a custom grid template, possibly with additional responsive considerations.

  • In lieu of sage-panel__row or sage-card__row use sage-panel__custom-row or sage-card__custom-row. These will set up a basic grid with the appropraite spacings applied. Yet, if even this provides too much constraint, use the complete open sage-panel__block or sage-card__block instead.

  • In place of an existing grid template above set up a completely new one locally or within stylesheets/system/layout/_custom-grid-templates.scss named .sage-custom-grid-template-{template-name}. Set up the template as needed, including responsive adjustments.

  • If you want to adjust source order and use grid-area mappings nest those mappings within the above custom template style declaration so as to keep all relevant setup contained in this space.

An example of such a custom grid template is under development for future release.