Origami Frontend Components & Services

SassDoc: o-grid

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 (L).

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

Example

// your-app/main.js
// Return the current layout (e.g. default, S, M, L, XL)
var getCurrentLayout = require('o-grid').getCurrentLayout;
console.log(getCurrentLayout());

// Return the current gutter (e.g. 10px, 20px)
var getCurrentGutter = require('o-grid').getCurrentGutter;
console.log(getCurrentGutter());

Links

oGridAddLayout(...)

Add a layout (breakpoint). This can be used to add a new breakpoint to a project, in addition to the default layouts (S, M, L, XL).

parameter type default description
layout-name Name of the layout (e.g. S)
layout-width Layout width in px
gutter-width (optional) null Gutter width in px

Example

@include oGridAddLayout($layout-name: P, $layout-width: 600px);
@include oGridAddLayout($layout-name: XXL, $layout-width: 1600px, $gutter-width: 30px);

Links

oGridGutter(layout-name)

Get the grid gutter at a given layout (breakpoint).

parameter type default description
layout-name (optional) default One of $o-grid-layouts breakpoints e.g. S, M, L...

Returns

Links

oGridGetMaxWidthForLayout(layout-name, grid-mode)

Get the max width of a layout (breakpoint).

parameter type default description
layout-name one of $o-grid-layouts
grid-mode (optional) $o-grid-mode

Returns

Example

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

Links

oGridColspan(span, total-cols)

% width of an element in the grid

parameter type default description
span 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

.one-half   { width: oGridColspan(1/2); }      // 50%
.other-half { width: oGridColspan(one-half); } // 50%
.sidebar    { width: oGridColspan(5); }        // 41.66667%
.two-thirds { width: oGridColspan(2/3); }      // 66.66667%
.4-out-of-6 { width: oGridColspan(4, 6); }     // 66.66667%

Links

oGridRespondTo(from, until)

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 Internet Explorer 8 only

Links

oGridTargetModernBrowsers

Target styles at modern browsers that support @media queries properly

Links

oGridColspan(span)

Base column styles and responsive layout width

parameter type default description
span (optional) null

Examples

Example #1

Block has column styles

el { @include oGridColspan(); }

Example #2

4-column wide block

el { @include oGridColspan(4); }

Example #3

Half-width block

el { @include oGridColspan(1/2); }

Example #4

Block is full-width by default, 8-column wide on Medium layouts and hidden on Large layouts

el { @include oGridColspan((default: 12, M: 8, L: hide)); }

Links

oGridContainer(grid-mode, bleed)

Grid container

parameter type default description
grid-mode (optional) $o-grid-mode
bleed (optional) false

Links

oGridRow

Base row styles

Links

oGridRowCompact(column-selector)

Remove gutters from columns in a row

parameter type default description
column-selector (optional) "[o-grid-colspan "] - CSS selector for row element

Links

oGridResetRow

Remove row styles

Links

oGridCenter

Center column

Links

oGridUncenter

Uncenter column

Links

oGridResetColumn

Remove column styles

Links

oGridPull(columns)

Reorder visually: pull

parameter type default description
columns

Links

oGridPush(columns)

Reorder visually: push

parameter type default description
columns

Links

oGridOffset(columns)

Offset: add space before a column

parameter type default description
columns

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-shuffle-selectors

Offset, push and pull selectors

Links

o-grid-human-friendly-selectors

Human-friendly selectors

Links

o-grid-mode

Grid mode

  • fluid: full width up to the largest layout's width
  • 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-debug-mode

Show the currently active breakpoint and output loaded settings

Links

o-grid-ie8-rules

Output IE 8-specific rules?

  • false: no IE8 support at all
  • 'only': serve code compatible with IE8 only
  • 'inline' (default): serve IE8 specific code alongside modern browsers code

Links

o-grid-columns

Number of columns

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

o-grid-gutters

Gutter sizes

Links

Switch component view

GitHub Repository

Install o-grid

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

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

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