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.
>Output all o-grid styles.</caption>
@include oGrid();>Output only basic grid styles.</caption>
@include oGrid($opts: ());>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')
));>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')
));Get the grid gutter at a given layout (breakpoint).
Get the max width of a layout (breakpoint).
.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%Output debug information about the currently loaded layouts.
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).
@include oGridAddLayout($layout-name: P, $layout-width: 600px);
@include oGridAddLayout($layout-name: XXL, $layout-width: 1600px, $gutter-width: 30px);// 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;
}
}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
Surface the layout currently displayed to make it readable in JS.
// 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);Surface the projects layouts (breakpoints) to make it readable in JS.
// 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);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
Layouts
Each layout is calculated following a specific column width, in order to base breakpoints on the structure of the grid itself
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.
>Output all o-grid styles.</caption>
@include oGrid();>Output only basic grid styles.</caption>
@include oGrid($opts: ());>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')
));>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')
));