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.

Links

Support Status
active
Switch component view

GitHub Repository

Install o-grid

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

If running a Manual Build, run bower install --save "o-grid@^5.2.6".

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