o-grid

mixins

oGridDebugInfo

@mixin oGridDebugInfo($layouts) { ... }

Description

Output debug information about the currently loaded layouts.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$layouts

Map of layouts

Mapnone

Requires

Links

oGridSurfaceCurrentLayout

@mixin oGridSurfaceCurrentLayout() { ... }

Description

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

In IE 8, assume it is $o-grid-fixed-layout.

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

Parameters

None.

Example

var getCurrentLayout = require('o-grid/src/js/getCurrentLayout');
var currentLayout = getCurrentLayout; // One of $o-grid-layouts

Requires

Links

oGridRespondTo

@mixin oGridRespondTo($from, $until) { ... }

Description

Apply styles at a given layout size Wrapper for the Sass MQ mq() mixin

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$from

one of $o-grid-layouts

Stringnone
$until

one of $o-grid-layouts

Stringnone

Content

This mixin allows extra content to be passed (through the @content directive).

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

Requires

Used by

Links

oGridTargetIE8

@mixin oGridTargetIE8() { ... }

Description

Target styles at IE 8 only

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

Links

oGridTargetModernBrowsers

@mixin oGridTargetModernBrowsers() { ... }

Description

Target styles at modern browsers that support @media queries properly

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

Links

oGridHumanFriendlyPortions

@mixin oGridHumanFriendlyPortions($layout-name: null) { ... }

Description

Human friendly names for portions:

  • hide
  • full-width
  • one-half / two-quarters
  • one-third
  • two-thirds
  • one-quarter
  • three-quarters

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$layout-namenoneStringnull

Requires

Used by

Links

oGridColumn

@mixin oGridColumn($experience: null) { ... }

Description

Base column styles for the enhanced experience

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$experiencenoneStringnull

Requires

Used by

Links

oGridRow

@mixin oGridRow($experience: null, $grid-mode: $o-grid-mode, $selector: null) { ... }

Description

Base row styles

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$experiencenoneStringnull
$grid-modenoneString$o-grid-mode
$selector

e.g. '.o-grid-row'

Stringnull

Requires

Used by

Links

oGridLayout

@mixin oGridLayout($experience: null) { ... }

Description

Columns and rows base structure

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$experiencenoneStringnull

Requires

Used by

Links

oGridRemoveGutters

@mixin oGridRemoveGutters($side: null) { ... }

Description

Remove gutters from a column and re-align its child rows

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$side

left, right

Stringnull

Requires

Used by

Links

oGridModifiersForLayout

@mixin oGridModifiersForLayout($layout-name) { ... }

Description

Width and gutter removal modifiers for a given layout.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$layout-name

One of $o-grid-layouts

Stringnone

Output

[data-o-grid-colspan~="S1"] { width: %; } .o-grid-remove-gutters--S { … }

Requires

Used by

Links

oGridGenerate

@mixin oGridGenerate() { ... }

Description

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)

Parameters

None.

Requires

Links

functions

oGridGetMaxWidthForLayout

@function oGridGetMaxWidthForLayout($size) { ... }

Description

Get the max width of a layout

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$size

one of $layouts

Stringnone

Example

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

Requires

Used by

Links

oGridColumnWidth

@function oGridColumnWidth($colspan, $total-cols: $o-grid-columns) { ... }

Description

% width of an element in the grid

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$colspan

Number of columns the element spans over

Numbernone
$total-cols

Number of columns in the grid

Number$o-grid-columns

Returns

Number

width of the element in the grid, in percents

Example

.sidebar { width: oGridColumnWidth(5); } // 41.66667%
.4-out-of-6 { width: oGridColumnWidth(4, 6); } // 66.66667%

Requires

Used by

Links

[private] _oGridWidth

@function _oGridWidth($column-width) { ... }

Description

Full width of the grid: combined width of columns, gutters and outer margins for a specific column width

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$column-width

desired width of a grid column

Numbernone

Returns

Number

width of the grid, in pixels

Requires

Links

variables

o-grid-is-silent

$o-grid-is-silent: true !default;

Description

Silent mode

Type

Boolean

Links

o-grid-mode

$o-grid-mode: 'fluid' !default;

Description

Grid mode

  • fluid: full width until $o-grid-max-width (default: 1210px)
  • 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)

Type

String - one of fluid (default), snappy, fixed

Used by

Links

o-grid-fixed-layout

$o-grid-fixed-layout: 'L' !default;

Description

Layout to default to when the grid has a fixed width (not fluid)

Type

String - one of $o-grid-layouts

Used by

Links

o-grid-start-snappy-mode-at

$o-grid-start-snappy-mode-at: 'M' !default;

Description

When the grid start snapping between fixed-width layouts in the case where a row has the o-grid-row--snappy class

Type

String

Used by

Links

o-grid-enable-enhanced-experience

$o-grid-enable-enhanced-experience: true !default;

Description

Turn the enhanced experience on / off

When set to false, the core experience will be displayed (useful for debugging purposes)

Type

Boolean - set to false to view the core experience only

Used by

Links

o-grid-debug-mode

$o-grid-debug-mode: false !default;

Description

Show the currently active breakpoint and output loaded settings

Type

Boolean

Links

o-grid-columns

$o-grid-columns: 12 !default;

Description

Number of columns

Type

Number (unitless)

Used by

Links

o-grid-gutter

$o-grid-gutter: 10px !default;

Description

Gutter size, in pixels

Type

Number

Used by

Links

o-grid-min-width

$o-grid-min-width: 240px !default;

Description

Minimum width, in pixels

Type

Number

Used by

Links

o-grid-layouts

$o-grid-layouts: (
	S:  _oGridWidth($column-width: 30px), // 490px
	M:  _oGridWidth($column-width: 50px), // 730px
	L:  _oGridWidth($column-width: 70px), // 970px
	XL: _oGridWidth($column-width: 90px)  // 1210px
) !default;

Description

Layouts

Each layout is calculated following a specific column width, in order to base breakpoints on the structure of the grid itself

Type

Map

Used by

Links

[private] _o-grid-layout-names

$_o-grid-layout-names: map-keys($o-grid-layouts) !default;

Description

Layout names

Type

List

Used by

Links

[private] _o-grid-max-width

$_o-grid-max-width: map-get($o-grid-layouts, nth($_o-grid-layout-names, -1));

Description

Maximum grid width Defaults to the largest layout width

Type

Number

Used by

Links