mixins

direction-context

View source
@mixin direction-context($direction: left-to-right) { ... }

Changes the direction property used by other mixins called in the code block argument.

Parameters

$direction
    String Default:left-to-right

Layout direction to be used within the block. Can be left-to-right or right-to-left.

Example

Usage

@include direction-context(right-to-left) { .right-to-left-block { @include span-columns(6); } }

CSS Output

.right-to-left-block { float: right; ... }

display-context

View source
@mixin display-context($display: block) { ... }

Changes the display property used by other mixins called in the code block argument.

Parameters

$display
    String Default:block

Display value to be used within the block. Can be table or block.

Example

@include display-context(table) {
 .display-table {
   @include span-columns(6);
  }
}
.display-table {
   display: table-cell;
   ...
}

fill-parent

View source
@mixin fill-parent() { ... }

Forces the element to fill its parent container.

This mixin takes no parameters.

Example

Usage

.element { @include fill-parent; }

CSS Output

.element { width: 100%; box-sizing: border-box; }

media

View source
@mixin media($query, $total-columns: $grid-columns) { ... }

Outputs a media-query block with an optional grid context (the total number of columns used in the grid).

Parameters

$query
    List Required

A list of media query features and values, where each $feature should have a corresponding $value. For a list of valid values for $feature, click here.

If there is only a single $value in $query, $default-feature is going to be used.

The number of total columns in the grid can be set by passing $columns at the end of the list (overrides $total-columns).

$total-columns
    Number (unitless) Default:$grid-columns

Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter.

Example

Usage

.responsive-element { @include media(769px) { @include span-columns(6); } } .new-context-element { @include media(min-width 320px max-width 480px, 6) { @include span-columns(6); } }

CSS Output

@media screen and (min-width: 769px) { .responsive-element { display: block; float: left; margin-right: 2.35765%; width: 48.82117%; } .responsive-element:last-child { margin-right: 0; } } @media screen and (min-width: 320px) and (max-width: 480px) { .new-context-element { display: block; float: left; margin-right: 4.82916%; width: 100%; } .new-context-element:last-child { margin-right: 0; } }

omega

View source
@mixin omega($query: block) { ... }

Removes the element's gutter margin, regardless of its position in the grid hierarchy or display property. It can target a specific element, or every nth-child occurrence. Works only with block layouts.

Parameters

$query
    List Default:block

List of arguments. Supported arguments are nth-child selectors (targets a specific pseudo element) and auto (targets last-child).

When passed an nth-child argument of type *n with block display, the omega mixin automatically adds a clear to the *n+1 th element. Note that composite arguments such as 2n+1 do not support this feature.

Deprecation warning: The omega mixin will no longer take a $direction argument. To change the layout direction, use row($direction) or set $default-layout-direction instead.

Example

Usage

.element { @include omega; } .nth-element { @include omega(4n); }

CSS Output

.element { margin-right: 0; } .nth-element:nth-child(4n) { margin-right: 0; } .nth-element:nth-child(4n+1) { clear: left; }

outer-container

View source
@mixin outer-container($local-max-width: $max-width) { ... }

Makes an element a outer container by centering it in the viewport, clearing its floats, and setting its max-width. Although optional, using outer-container is recommended. The mixin can be called on more than one element per page, as long as they are not nested.

Parameters

$local-max-width
    Number [unit] Default:$max-width

Max width to be applied to the element. Can be a percentage or a measure.

Example

Usage

.element { @include outer-container(100%); }

CSS Output

.element { max-width: 100%; margin-left: auto; margin-right: auto; } .element::after { clear: both; content: ""; display: table; }

pad

View source
@mixin pad($padding: flex-gutter()) { ... }

Adds padding to the element.

Parameters

$padding
    List Default:flex-gutter()

A list of padding value(s) to use. Passing default in the list will result in using the gutter width as a padding value.

Example

Usage

.element { @include pad(30px -20px 10px default); }

CSS Output

.element { padding: 30px -20px 10px 2.35765%; }

reset-display

View source
@mixin reset-display() { ... }

Resets the active display property to block. Particularly useful when changing the display property in a single row.

This mixin takes no parameters.

Example

Usage

.element { @include row(table); // Context changed to table display } @include reset-display; // Context is reset to block display

row

View source
@mixin row($display: default, $direction: $default-layout-direction) { ... }

Designates the element as a row of columns in the grid layout. It clears the floats on the element and sets its display property. Rows can't be nested, but there can be more than one row element—with different display properties—per layout.

Parameters

$display
    String Default:default

Sets the display property of the element and the display context that will be used by its children. Can be block or table.

$direction
    String Default:$default-layout-direction

Sets the layout direction. Can be LTR (left-to-right) or RTL (right-to-left).

Example

Usage

.element { @include row(); }

CSS Output

.element { *zoom: 1; display: block; } .element:before, .element:after { content: " "; display: table; } .element:after { clear: both; }

shift

View source
@mixin shift($n-columns: 1) { ... }

Translates an element horizontally by a number of columns. Positive arguments shift the element to the active layout direction, while negative ones shift it to the opposite direction.

Parameters

$n-columns
    Number (unitless) Default:1

Number of columns by which the element shifts.

Example

Usage

.element { @include shift(-3); }

CSS output

.element { margin-left: -25.58941%; }

shift-in-context

View source
@mixin shift-in-context($shift) { ... }

Translates an element horizontally by a number of columns, in a specific nesting context.

Parameters

$shift
    List Required

A list containing the number of columns to shift ($columns) and the number of columns of the parent element ($container-columns).

The two values can be separated with any string such as of, /, etc.

Example

Usage

.element { @include shift(-3 of 6); }

CSS output

.element { margin-left: -52.41458%; }

span-columns

View source
@mixin span-columns($span, $display: block) { ... }

Specifies the number of columns an element should span. If the selector is nested the number of columns of its parent element should be passed as an argument as well.

Parameters

$span
    List Required

A list containing $columns, the unitless number of columns the element spans (required), and $container-columns, the number of columns the parent element spans (optional).

If only one value is passed, it is assumed that it's $columns and that that $container-columns is equal to $grid-columns, the total number of columns in the grid.

The values can be separated with any string such as of, /, etc.

$columns also accepts decimals for when it's necessary to break out of the standard grid. E.g. Passing 2.4 in a standard 12 column grid will divide the row into 5 columns.

$display
    String Default:block

Sets the display property of the element. By default it sets the display property of the element to block.

If passed block-collapse, it also removes the margin gutter by adding it to the element width.

If passed table, it sets the display property to table-cell and calculates the width of the element without taking gutters into consideration. The result does not align with the block-based grid.

Example

Usage

.element { @include span-columns(6); .nested-element { @include span-columns(2 of 6); } }

CSS Output

.element { display: block; float: left; margin-right: 2.35765%; width: 48.82117%; } .element:last-child { margin-right: 0; } .element .nested-element { display: block; float: left; margin-right: 4.82916%; width: 30.11389%; } .element .nested-element:last-child { margin-right: 0; }

reset-layout-direction

View source
@mixin reset-layout-direction() { ... }

Resets the active layout direction to the default value set in $default-layout-direction. Particularly useful when changing the layout direction in a single row.

This mixin takes no parameters.

Example

Usage

.element { @include row($direction: RTL); // Context changed to right-to-left } @include reset-layout-direction; // Context is reset to left-to-right

reset-all

View source
@mixin reset-all() { ... }

Resets both the active layout direction and the active display property.

This mixin takes no parameters.

Example

Usage

.element { @include row(table, RTL); // Context changed to table table and right-to-left } @include reset-all; // Context is reset to block display and left-to-right

clearfix

View source
@mixin clearfix() { ... }

Provides an easy way to include a clearfix for containing floats.

This mixin takes no parameters.

Example

.element {
  @include clearfix;
}
.element::after {
  clear: both;
  content: "";
  display: block;
}

Links

functions

new-breakpoint

View source
@function new-breakpoint($query, $total-columns: $grid-columns) { ... }

Returns a media context (media query / grid context) that can be stored in a variable and passed to media() as a single-keyword argument. Media contexts defined using new-breakpoint are used by the visual grid, as long as they are defined before importing Neat.

Parameters

$query
    List Required

A list of media query features and values. Each $feature should have a corresponding $value.

If there is only a single $value in $query, $default-feature is going to be used.

The number of total columns in the grid can be set by passing $columns at the end of the list (overrides $total-columns). For a list of valid values for $feature, click here.

$total-columns
    Number (unitless) Default:$grid-columns

Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter.

Example

Usage

$mobile: new-breakpoint(max-width 480px 4); .element { @include media($mobile) { @include span-columns(4); } }

CSS Output

@media screen and (max-width: 480px) { .element { display: block; float: left; margin-right: 7.42297%; width: 100%; } .element:last-child { margin-right: 0; } }

variables

disable-warnings

Bool View source
$disable-warnings: false !default;

Disable all deprecation warnings. Defaults to false. Set with a !global flag.

column

Number (Unit) View source
$column: 4.2358em !default;

Sets the relative width of a single grid column. The unit used should be the same one used to define $gutter. Set with a !global flag.

gutter

Number (Unit) View source
$gutter: 1.618em !default;

Sets the relative width of a single grid gutter. The unit used should be the same one used to define $column. Set with the !global flag.

grid-columns

Number (Unitless) View source
$grid-columns: 12 !default;

Sets the total number of columns in the grid. Its value can be overridden inside a media query using the media() mixin. Set with the !global flag.

max-width

Number (Unit) View source
$max-width: 1200px !default;

Sets the max-width property of the element that includes outer-container(). Set with the !global flag.

border-box-sizing

Bool View source
$border-box-sizing: true !default;

When set to true, it sets the box-sizing property of all elements to border-box. Set with a !global flag.

Example

CSS Output

html { box-sizing: border-box; } *, *::after, *::before { box-sizing: inherit; }

default-feature

String View source
$default-feature: min-width;

Sets the default media feature that media() and new-breakpoint() revert to when only a breakpoint value is passed. Set with a !global flag.

visual-grid

Bool View source
$visual-grid: false !default;

Displays the visual grid when set to true. The overlaid grid may be few pixels off depending on the browser's rendering engine and pixel rounding algorithm. Set with the !global flag.

visual-grid-index

String View source
$visual-grid-index: back !default;

Sets the z-index property of the visual grid. Can be back (behind content) or front (in front of content). Set with !global flag.