Name: o-grid
Owner: Financial Times
Description: Responsive grid system
Created: 2013-11-06 11:45:14.0
Updated: 2018-01-09 15:43:34.0
Pushed: 2018-01-15 11:11:49.0
Homepage: http://registry.origami.ft.com/components/o-grid
Size: 2865
Language: CSS
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
A 12 column responsive, flexbox-based grid system for laying out documents, templates and modules.
Living off the grid and being kind of an outlaw brings a dangerous reality. Ron Perlman
This component is a collection of Sass styles to build a 12 column grid system, with a few JavaScript helpers.
Using the Origami Build Service:
d>
?
<link rel="stylesheet"
href="https://origami-build.ft.com/v2/bundles/css?modules=o-grid@^4.0.0" />
ad>
Or, to install it manually:
r install o-grid --save
css
our-app/main.scss
rid-is-silent: false;
ort 'o-grid/main';
s
our-app/main.js
eturn the current layout (e.g. default, S, M, L, XL)
getCurrentLayout = require('o-grid').getCurrentLayout;
ole.log(getCurrentLayout());
eturn the current gutter (e.g. 10px, 20px)
getCurrentGutter = require('o-grid').getCurrentGutter;
ole.log(getCurrentGutter());
o-grid works in browsers that support CSS @media queries and box-sizing, as well as Internet Explorer 8.
Older browsers: you may use a box-sizing polyfill to support give better support to IE < 8.
class="o-grid-container">
<div class="o-grid-row">
<!-- two divs, spanning a total of 12 columns -->
<div data-o-grid-colspan="8">A div, 8 columns wide</div>
<div data-o-grid-colspan="4">Another div, 4 columns wide</div>
</div>
v>
Set a number of columns per layout:
class="o-grid-container">
<div class="o-grid-row">
<div data-o-grid-colspan="6 L8" class="first-column">
Half by default, then 8 columns wide on Large layout and up
</div>
<div data-o-grid-colspan="6 L4" class="second-column">
Half by default, then 4 columns wide on Large layout and up
</div>
</div>
v>
css
{
@include oGridContainer();
> div {
@include oGridRow();
}
st-column {
// Half by default, then 8 columns wide on Large layout and up
@include oGridColspan((default: 6, L: 8));
ond-column {
// Half by default, then 4 columns wide on Large layout and up
@include oGridColspan((default: 6, L: 4));
{0-12}
- number of columns to span by defaultS{0-12}
- number of columns to span at the small layout and upM{0-12}
- number of columns to span at the medium layout and upL{0-12}
- number of columns to span at the large layout and upXL{0-12}
- number of columns to span at the extra large layout and up data-o-grid-colspan="6 L8"></div>
css
{ @include oGridColspan((default: 6, L: 8)); }
hide
one-half
one-third
, two-thirds
one-quarter
, three-quarters
data-o-grid-colspan="one-half Ltwo-thirds"></div>
css
{ @include oGridColspan((default: one-half, L: two-thirds)); }
A full width column for all sizes except large screens and up, where it spans on 9 columns:
data-o-grid-colspan="full-width L9"></div>
css
{ @include oGridColspan((default: full-width, L: 9)); }
A half width column that becomes full-width on medium screens and up:
data-o-grid-colspan="one-half M12"></div>
css
{ @include oGridColspan((default: one-half, M: 12)); }
A column which gradually takes up a greater portion of horizontal space as the screen gets smaller:
data-o-grid-colspan="4 M3 L2 XL1"></div>
css
{ @include oGridColspan((default: 4, M: 3, L: 2, XL: 1)); }
A column which has width: auto
on small screens, and then takes half the available space on medium screens and up:
data-o-grid-colspan="M6"></div>
css
{ @include oGridColspan((M: 6)); }
hide
the column, show it again at Large (L
) layout size, and hide it at the largest (XL
) layout size:
data-o-grid-colspan="hide L12 XLhide"></div>
css
{ @include oGridColspan((default: hide, L: 12, XL: hide)); }
center
the column and uncenter
it at Large (L
) layout size:
data-o-grid-colspan="center Luncenter"></div>
css
column {
@include oGridCenter;
@include oGridRespondTo(L) {
@include oGridUncenter;
}
data-o-grid-colspan="8 push4"></div>
data-o-grid-colspan="4 pull8"></div>
css
ontent is first in the source
tent {
@include oGridColspan(8);
@include oGridPush(4); // outputs left: -33.333333333%;
idebar comes second in the source but appears first on the left
ebar {
@include oGridColspan(4);
@include oGridPull(8); // outputs right: -66.666666667%;
Responsively:
data-o-grid-colspan="L8 Lpush4"></div>
data-o-grid-colspan="L4 Lpull8"></div>
css
ontent is first in the source
tent {
@include oGridColspan((L: 8));
@include oGridRespondTo(L) {
@include oGridPush(4); // outputs left: -33.333333333%;
}
idebar comes second in the source but appears first on the left
ebar {
@include oGridColspan((L: 4));
@include oGridRespondTo(L) {
@include oGridPull(8); // outputs right: -66.666666667%;
}
data-o-grid-colspan="8 offset4"></div>
data-o-grid-colspan="L8 Loffset4"></div>
css
{
@include oGridColspan(8);
@include oGridOffset(4); // outputs margin-left: 33.333333333%;
{
@include oGridColspan((L: 8));
@include oGridRespondTo(L) {
@include oGridOffset(4); // outputs margin-left: 33.333333333%;
}
The container size can snap between fixed-widths as the viewport gets larger:
Make the whole document snappy -->
y class="o-grid-snappy">
<div class="o-grid-container">
<div class="o-grid-row">
?
</div>
</div>
dy>
Make a container snappy -->
class="o-grid-container o-grid-container--snappy">
<div class="o-grid-row">
?
</div>
v>
To remove gutters from in between columns in a row, use the o-grid-row--compact
class or the oGridRowCompact()
mixin:
class="o-grid-row o-grid-row--compact">
<div data-o-grid-colspan="6">Look 'ma, no gutters</div>
<div data-o-grid-colspan="6">Look 'pa, no gutters here either</div>
v>
css
{
@include oGridContainer();
> div {
@include oGridRow();
@include oGridRowCompact('.column');
}
.column {
@include oGridColspan((default: full-width, S: 3));
}
To remove gutters from the left and right sides of the grid container, use the o-grid-container--bleed
class. Note that it is not possible to remove the outer gutters for an individual row, instead you need to start a new container.
class="o-grid-container o-grid-container--bleed">
<div class="o-grid-row o-grid-row--compact">
<div data-o-grid-colspan="6">Look 'ma, no gutters</div>
<div data-o-grid-colspan="6">Look 'pa, no gutters here either</div>
</div>
v>
For simplicity, examples below don't show the output code that brings support for Internet Explorer.
@include oGridColspan(); }
Outputs:
allbacks for Internet Explorer omitted in this example
sition: relative;
oat: left;
x-sizing: border-box;
ex: 1 1 0%;
dding-left: 10px;
ia (min-width: 46.25em) {
{
padding-left: 20px;
@include oGridColspan($span: 4); }
Outputs:
sition: relative;
oat: left;
x-sizing: border-box;
ex: 1 1 0%;
dding-left: 10px;
splay: block;
ex-basis: 33.33333%;
n-width: 33.33333%;
x-width: 33.33333%;
dth: 33.33333%;
ia (min-width: 46.25em) {
{
padding-left: 20px;
@include oGridColspan((
default: full-width,
M: 6
));
Outputs:
sition: relative;
oat: left;
x-sizing: border-box;
ex: 1 1 0%;
dding-left: 10px;
splay: block;
ex-basis: 100%;
n-width: 100%;
x-width: 100%;
dth: 100%;
ia (min-width: 46.25em) {
{
display: block;
flex-basis: 50%;
min-width: 50%;
max-width: 50%;
padding-left: 20px;
lude oGridRespondTo($from, $until) {
// Styles
To create styles that respond to the same breakpoints as the grid, this Sass mixin can be used to wrap the styles in the appropriate media query. It should be passed S
, M
, L
or XL
depending on which layout size the style should apply to e.g.
lude oGridRespondTo(S) {
.o-example-module .item-subheading {
font-size: 0.5em;
}
xample-module .item-subheading {
@include oGridRespondTo(XL) {
color: red;
}
xample-module .item-subheading {
@include oGridRespondTo($until: L) {
width: auto;
}
It relies on Sass MQ to output mobile-first @media queries.
$from
is inclusive but $until
is exclusive ? e.g. @include oGridRespondTo(S, L)
matches the breakpoints S
and M
, but not L
.
margin-left: oGridGutter();
@include oGridRespondTo(L) {
margin-left: oGridGutter(L);
}
Outputs:
rgin-left: 10px;
ia (min-width: 61.25em) {
{
margin-left: 20px;
rowify {
@include oGridResetRow;
columnify {
@include oGridResetColumn;
Some of the variables used by the grid (see _variables.scss) can be used to customise the grid system.
Here are the most useful ones:
witch Silent mode off
rid-is-silent: false;
isable outputting offset, push and pull selectors
rid-shuffle-selectors: true;
isable outputting human-friendly selectors
rid-human-friendly-selectors: true;
how the currently active breakpoint and output loaded settings
rid-debug-mode: true;
utters (distance between 2 columns), in pixels
rid-gutters: (default: 10px, M: 20px);
rid 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
(used by Next FT)
fixed: always fixed-width with the layout defined by
$o-grid-fixed-layout (default: L)
rid-mode: fluid (default) | snappy | fixed;
rid ie8 rules
inline: output ie8 selectors alongside modern browser selectors in the same stylesheet
only: only output ie8 selectors
none: output no ie8 selectors
rid-ie8-rules: inline (default) | only | none;
efault layouts
rid-layouts: (
S: 490px,
M: 740px,
L: 980px,
XL: 1220px,
Products who need to add other breakpoints/layouts should use the helper oGridAddLayout()
:
ort 'o-grid/main';
dd various layouts
lude oGridAddLayout(
$layout-name: XS,
$layout-width: 360px
lude oGridAddLayout(
$layout-name: P,
$layout-width: 600px,
$gutter-width: 24px
ayouts are now:
XS: 360px,
S: 490px,
P: 600px,
M: 740px,
L: 980px,
XL: 1220px
urface the layout currently displayed to make it readable in JS
lude oGridSurfaceCurrentLayout;
enerate grid helpers classes and data attributes
lude oGridGenerate;
Enable debug mode to see the currently active breakpoint in the top-right corner of the page (based on sass-mq's show-breakpoints feature).
rid-debug-mode: true;
getCurrentLayout()
Returns the name of the layout currently displayed.
oGrid = require('o-grid');
ole.log(oGrid.getCurrentLayout());
default | S | M | L | XL
getCurrentGutter()
Returns the width of the gutter currently displayed.
oGrid = require('o-grid');
ole.log(oGrid.getCurrentGutter());
10px | 20px
When using o-grid silent mode, make sure to surface the grid
information to make it readable by the JavaScript Helper
by adding @include oGridSurfaceCurrentLayout();
to your Sass file.
getGridBreakpoints()
Returns the sizes of all grid breakpoints available.
oGrid = require('o-grid');
ole.log(oGrid.getGridBreakpoints());
{ "layouts": { "S": "490px", "M": "740px", "L": "980px", "XL": "1220px" } }
When using o-grid silent mode, make sure to surface the grid
information to make it readable by the JavaScript Helper
by adding @include oGridSurfaceLayoutSizes;
to your Sass file.
enableLayoutChangeEvents()
Enable matchMedia queries that fire an o-grid.layoutChange
event upon layout change.
oGrid = require('o-grid');
d.addBreakpointListeners();
When using o-grid silent mode, make sure to surface the grid
information to make it readable by the JavaScript Helper
by adding @include oGridSurfaceLayoutSizes;
to your Sass file.
Create a new Bookmark with this URL:
script:(function(){var s=document.createElement("script");s.src="https://rawgit.com/Financial-Times/o-grid/master/bookmarklet/bookmarklet.js";document.head.appendChild(s);}());
Load a website
Click the bookmarklet (the overlay should appear)
Check the alignment of the layout on the grid
<div class="o-grid-row">
into <div class="o-grid-container">
.oGridColumn
and replace with oGridColspan
.oGridColspan
from v3 outputs a bit more code. Use oGridColspan($span, $width-only: true)
to only outputs widths. Note that with gzip this should not have any impact.$o-grid-gutter
becomes $o-grid-gutters
(plural) and now contains a map$o-grid-gutter
to oGridGutter()
. e.g. margin-left: $o-grid-gutter
becomes margin-left: oGridGutter()
If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #ft-origami or email Origami Support. If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #ft-origami or email Origami Support.
Copyright (c) 2016 Financial Times Ltd. All rights reserved.
This software is published under the MIT licence.