Origami Frontend Components & Services

SassDoc: o-grid active

oGridDebugInfo(layouts)

Output debug information about the currently loaded layouts.

parameter type default description
layouts Map of layouts

Links

oGridSurfaceCurrentLayout

Surface the layout currently displayed to make it readable in JS.

In IE 8, assume it is $o-grid-fixed-layout.

n.b.: Only works when silent mode is off.

Example

var getCurrentLayout = require('o-grid/src/js/getCurrentLayout');
var currentLayout = getCurrentLayout; // One of $o-grid-layouts

Links

oGridGetMaxWidthForLayout(size)

Get the max width of a layout

parameter type default description
size one of $layouts

Returns

Example

.my-large-container { width: oGridGetMaxWidthForLayout(L); }

Links

oGridColumnWidth(colspan, total-cols)

% width of an element in the grid

parameter type default description
colspan Number of columns the element spans over
total-cols (optional) $o-grid-columns Number of columns in the grid

Returns

Number - width of the element in the grid, in percents

Example

.sidebar { width: oGridColumnWidth(5); } // 41.66667%
.4-out-of-6 { width: oGridColumnWidth(4, 6); } // 66.66667%

Links

oGridRespondTo(from, until)

Apply styles at a given layout size Wrapper for the Sass MQ mq() mixin

parameter type default description
from one of $o-grid-layouts
until one of $o-grid-layouts

Example

// Turn the color of an element red at medium layout size and up
@include oGridRespondTo(M) {
	element {
		color: red;
	}
}
// Turn the color of an element blue until medium layout
element {
	@include oGridRespondTo($until: M) {
		color: blue;
	}
}
// Turn the color of an element green from small layout until medium layout
element {
	@include oGridRespondTo($from: S, $until: M) {
		color: green;
	}
}

Links

oGridTargetIE8

Target styles at IE 8 only

Links

oGridTargetModernBrowsers

Target styles at modern browsers that support @media queries properly

Links

oGridHumanFriendlyPortions(layout-name)

Human friendly names for portions:

  • hide
  • full-width
  • one-half / two-quarters
  • one-third
  • two-thirds
  • one-quarter
  • three-quarters
parameter type default description
layout-name (optional) null

Links

oGridColumn(experience)

Base column styles for the enhanced experience

parameter type default description
experience (optional) null

Links

oGridRow(...)

Base row styles

parameter type default description
experience (optional) null
grid-mode (optional) $o-grid-mode
selector (optional) null e.g. '.o-grid-row'

Links

oGridLayout(experience)

Columns and rows base structure

parameter type default description
experience (optional) null

Links

oGridRemoveGutters(side)

Remove gutters from a column and re-align its child rows

parameter type default description
side (optional) null left, right

Links

oGridModifiersForLayout(layout-name)

Width and gutter removal modifiers for a given layout.

[data-o-grid-colspan~="S1"] { width: %; } .o-grid-remove-gutters--S { … }

parameter type default description
layout-name One of $o-grid-layouts

Links

oGridGenerate

Generate the grid with helper classes for:

  • older browsers (no columns, @media query support)
  • IE 8 (fixed layout, with columns)
  • modern browsers (fluid layout, with columns)

Links

o-grid-is-silent

Silent mode

Links

o-grid-mode

Grid mode

  • fluid: full width until $o-grid-max-width (default: 1210px)
  • snappy: fluid width until the layout defined in $o-grid-start-snappy-mode-at (default: M), and then snaps into a larger fixed layout at each breakpoint
  • fixed: always fixed-width with the layout defined by $o-grid-fixed-layout (default: L)

Links

o-grid-fixed-layout

Layout to default to when the grid has a fixed width (not fluid)

Links

o-grid-start-snappy-mode-at

When the grid start snapping between fixed-width layouts in the case where a row has the o-grid-row--snappy class

Links

o-grid-enable-enhanced-experience

Turn the enhanced experience on / off

When set to false, the core experience will be displayed (useful for debugging purposes)

Links

o-grid-debug-mode

Show the currently active breakpoint and output loaded settings

Links

o-grid-columns

Number of columns

Links

o-grid-gutter

Gutter size, in pixels

Links

o-grid-min-width

Minimum width, in pixels

Links

o-grid-layouts

Layouts

Each layout is calculated following a specific column width, in order to base breakpoints on the structure of the grid itself

Links

Switch component view

GitHub Repository

Install o-grid

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

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

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: #ft-origami
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: #ft-origami
Email: origami.support@ft.com