Output debug information about the currently loaded layouts.
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.
// 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());Add a layout
@include oGridAddLayout($layout-name: P, $layout-width: 600px);
@include oGridAddLayout($layout-name: XXL, $layout-width: 1600px, $gutter-width: 30px);Get the max width of a layout
.my-large-container { width: oGridGetMaxWidthForLayout(L); }% width of an element in the grid
.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%Apply styles at a given layout size Wrapper for the Sass MQ mq() mixin
// 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;
}
}Target styles at modern browsers that support @media queries properly
Base column styles and responsive layout width
Block has column styles
el { @include oGridColspan(); }4-column wide block
el { @include oGridColspan(4); }Half-width block
el { @include oGridColspan(1/2); }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)); }Remove gutters from columns in a row
Generate the grid with helper classes for:
Offset, push and pull selectors
Human-friendly selectors
Grid mode
Layout to default to when the grid has a fixed width (not fluid)
When the grid start snapping between fixed-width layouts
in the case where a row has the o-grid-row--snappy class
Show the currently active breakpoint and output loaded settings
Output IE 8-specific rules?
Layouts
Each layout is calculated following a specific column width, in order to base breakpoints on the structure of the grid itself