Open primary navigation
Origami Frontend Components & Services

JSDoc: o-grid

getGridProperties

Global Function

Grab grid properties

Returns

  • object - layout names and gutter widths

Links

getGridBreakpoints

Global Function

Get all layout sizes. CSS must be included so JavaScript can retrieve layout information. See the README for more information.

Returns

  • object - layout names and sizes

Links

getGridFromDoc(position)

Global Function

Grab grid properties surfaced in html:after and html:before's content

parameter type default description
position string Whether to get all properties in :before, or current properties in :after

Returns

  • object - layout names and gutter widths

Links

getCurrentLayout

Global Function

Grab the current layout. CSS must be included so JavaScript can retrieve layout information. See the README for more information.

Returns

  • string - Layout name

Links

getCurrentGutter

Global Function

Grab the current space between columns. CSS must be included so JavaScript can retrieve layout information. See the README for more information.

Returns

  • string - Gutter width in pixels

Links

enableLayoutChangeEvents

Global Function

This sets MediaQueryListeners on all the o-grid breakpoints and fires a o-grid.layoutChange event on layout change. CSS must be included so JavaScript can retrieve layout information. See the README for more information.

Returns

  • void

Links

Status
active
Switch component view

GitHub: o-grid@6.1.5

Install o-grid

If using the Build Service, add o-grid@^6.1.5 to your script and link tags.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-grid@^6.1.5".

Help & Support

o-grid is maintained directly by the Origami team. If you have any questions about o-grid or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com