Objects THEME_NAME/core/css/objects

These are class-based selectors that define undecorated design patterns. They are vital for layout and structure.

Layout THEME_NAME/core/css/objects/layout.css

Grid-like layout mechanism for arranging components. When you combine this with our grid or width utility classes, you can create fluid and responsive page layouts.

  • .o-layout is the outer block class which adds offsets to counter the outer gutters, used similarly to the row classes found in other frameworks.
  • .o-layout__item is the element used for layout items which sets gutter spacing and essential styling. This can be augmented using the grid or width utilities in THEME_NAME/core/css/utilities in order to create layout structures sized accordingly. The .o-layout__item class is used similarly to .col classes in other frameworks.

All direct child elements of .o-layout must be .o-layout__item elements.

Example

Some Content
Some More Content
Still More Content

To reverse the layout direction, use .o-layout--row-reverse.

Example

Some Content
Some More Content
Still More Content

Use .o-layout--column to set the flex items vertically.

Example

Some Content
Some More Content
Still More Content

To reverse the column direction, use .o-layout--column-reverse.

Example

Some Content
Some More Content
Still More Content

Have smaller gutters between items.

Example

Some Content
Some More Content
Still More Content

Have larger gutters between items.

Example

Some Content
Some More Content
Still More Content

Have no gutters between items.

Example

Some Content
Some More Content
Still More Content

Include vertical gutters on layout items.
If we've chosen to change the size of the horizontal gutters, the vertical gutters will change accordingly.

Example

Some Content
Some More Content
Still More Content

There are additional layout object modifiers you can use to adjust the horizontal and vertical alignments of the layout items as well as specifying if an item should be the first or last in the order.

Lists THEME_NAME/core/css/objects/lists.css

Default list element.

Example

  • List Item 1
  • List Item 2
  • List Item 3

The o-list-bare object strips list-like appearance from lists by removing their bullets, and any indentation.

Example

  • List Item 1
  • List Item 2
  • List Item 3

The o-list-block displays any list of items into stacked blocks.

Example

  • List Item 1
  • List Item 2
  • List Item 3

The o-list-inline object simply displays a list of items in one line.

Example

  • List Item 1
  • List Item 2
  • List Item 3

Inline list items can have smaller margins.

Example

  • List Item 1
  • List Item 2
  • List Item 3

Inline list items can have larger margins.

Example

  • List Item 1
  • List Item 2
  • List Item 3

Tables THEME_NAME/core/css/objects/tables.css

Slightly more opinionated and structural styles for table elements.

Example

First Name Last Name Age
Roger Waters 73
Nick Mason 73
David Gilmour 71

The table cell widths can be fixed using o-table--fixed.

Example

First Name Last Name Age
Roger Waters 73
Nick Mason 73
David Gilmour 71

Wrapper THEME_NAME/core/css/objects/wrapper.css

These are large class selectors that can hold many other structures and components.

.o-wrapper can be used to constrain the container to the maximum site width variable while including the right and left padding.

.o-wrapper--full to .o-wrapper will set the container to 100vw.