Origami Frontend Components & Services

SassDoc: o-grid

oGrid(opts)

Output o-grid styles. This mixin outputs all styles by default. Pass an options argument to include styles granularly, see the README for more details.

parameter type default description
opts (optional) ('bleed': true, 'shuffle-selectors': true, 'friendly-selectors': true, 'surface': ('current-layout', 'layout-sizes'), 'rows': ('compact'))

Examples

Example #1

>Output all o-grid styles.</caption>

@include oGrid();

Example #2

>Output only basic grid styles.</caption>

@include oGrid($opts: ());

Example #3

>Output all o-grid styles except human friendly selectors.</caption>

@include oGrid($opts: (
	'bleed': true,
	'shuffle-selectors': true,
	'surface': ('current-layout', 'layout-sizes'),
	'rows': ('compact')
));

Example #4

>Output all o-grid styles except the styles required to surface layouts to o-grid JS.</caption>

@include oGrid($opts: (
	'bleed': true,
	'shuffle-selectors': true,
	'friendly-selectors': true,
	'surface': (),
	'rows': ('compact')
));

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

oGridDebugInfo(layouts)

Output debug information about the currently loaded layouts.

parameter type default description
layouts Map of layouts

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

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

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

oGridSurfaceCurrentLayout

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

Example

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

// Return the current gutter (e.g. 10px, 20px)
import oGrid from 'o-grid';
let currentGutter = oGrid.getCurrentGutter();
console.log(currentGutter);

Links

oGridSurfaceLayoutSizes

Surface the projects layouts (breakpoints) to make it readable in JS.

Example

// your-app/main.js
// Return the layouts (e.g. {"layouts": {"S": "490px","M": "740px","L": "980px","XL": "1220px"}})
import oGrid from 'o-grid';
let breakpoints = oGrid.getGridBreakpoints();
console.log(breakpoints);

Links

o-grid-is-silent

Silent mode

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

oGrid(opts)

Output o-grid styles. This mixin outputs all styles by default. Pass an options argument to include styles granularly, see the README for more details.

parameter type default description
opts (optional) ('bleed': true, 'shuffle-selectors': true, 'friendly-selectors': true, 'surface': ('current-layout', 'layout-sizes'), 'rows': ('compact'))

Examples

Example #1

>Output all o-grid styles.</caption>

@include oGrid();

Example #2

>Output only basic grid styles.</caption>

@include oGrid($opts: ());

Example #3

>Output all o-grid styles except human friendly selectors.</caption>

@include oGrid($opts: (
	'bleed': true,
	'shuffle-selectors': true,
	'surface': ('current-layout', 'layout-sizes'),
	'rows': ('compact')
));

Example #4

>Output all o-grid styles except the styles required to surface layouts to o-grid JS.</caption>

@include oGrid($opts: (
	'bleed': true,
	'shuffle-selectors': true,
	'friendly-selectors': true,
	'surface': (),
	'rows': ('compact')
));

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