function

new-breakpoint

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.

Arguments
NameTypeDefaultDescription
queryList-

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-columnsNumber (unitless)-

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

Example

Usage

SCSS
$mobile: new-breakpoint(max-width 480px 4);

.element {
  @include media($mobile) {
    @include span-columns(4);
  }
}

CSS Output

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

direction-context

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

Arguments
NameTypeDefaultDescription
directionString-

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

Example

Usage

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

CSS Output

CSS Output
.right-to-left-block {
  float: right;
   ...
}
mixin

display-context

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

Arguments
NameTypeDefaultDescription
displayString-

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

Example
SCSS
@include display(table) {
 .display-table {
   @include span-columns(6);
  }
}
CSS Output
.display-table {
   display: table-cell;
   ...
}
mixin

fill-parent

Forces the element to fill its parent container.

Example

Usage

SCSS
.element {
  @include fill-parent;
}

CSS Output

CSS Output
.element {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
mixin

media

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

Arguments
NameTypeDefaultDescription
queryList-

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-columnsNumber (unitless)-

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

Example

Usage

SCSS
 .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

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

omega

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.

Arguments
NameTypeDefaultDescription
queryList-

(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

SCSS
.element {
  @include omega;
}

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

CSS Output

CSS Output
.element {
  margin-right: 0;
}

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

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

outer-container

Makes an element a outer container by centring 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.

Arguments
NameTypeDefaultDescription
local-max-widthNumber (unit)-

($max-width) Max width to be applied to the element. Can be a percentage or a measure.

Example

Usage

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

CSS Output

CSS Output
.element {
  *zoom: 1;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.element:before, .element:after {
  content: " ";
  display: table;
}

.element:after {
  clear: both;
}
mixin

pad

Adds padding to the element.

Arguments
NameTypeDefaultDescription
paddingList-

(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

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

CSS Output

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

row

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.

Arguments
NameTypeDefaultDescription
displayString-

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

directionString-

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

Example

Usage

SCSS
.element {
  @include row();
}

CSS Output

CSS Output
 .element {
   *zoom: 1;
   display: block;
 }

.element:before, .element:after {
  content: " ";
  display: table;
}

.element:after {
  clear: both;
}
mixin

shift

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.

Arguments
NameTypeDefaultDescription
n-columnsNumber (unitless)-

(1) Number of columns by which the element shifts.

Example

Usage

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

CSS output

CSS Output
.element {
  margin-left: -25.58941%;
}
mixin

shift-in-context

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

Arguments
NameTypeDefaultDescription
shiftList-

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

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

CSS output

CSS Output
.element {
  margin-left: -52.41458%;
}
mixin

span-columns

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.

Arguments
NameTypeDefaultDescription
spanList-

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.

displayString-

(block) Sets the display property of the element. By default it sets the display propert 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

SCSS
 .element {
   @include span-columns(6);

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

CSS Output

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

reset-display

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

Example

Usage

SCSS
.element {
  @include row(table);
  // Context changed to table display
}

@include reset-display;
// Context is reset to block display
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.

Example

Usage

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

@include reset-layout-direction;
// Context is reset to left-to-right
mixin

reset-all

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

Example

Usage

SCSS
.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
variable

disable-warnings

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

variable

column

Sets the relative width of a single grid column. The unit used should be the same one used to define $gutter. To learn more about golden-ratio() see Bourbon docs. Set with a !global flag.

variable

gutter

Sets the relative width of a single grid gutter. The unit used should be the same one used to define $column. To learn more about golden-ratio() see Bourbon docs. Set with the !global flag.

variable

grid-columns

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.

variable

max-width

Sets the max-width property of the element that includes outer-container(). To learn more about em() see Bourbon docs. Set with the !global flag.

variable

border-box-sizing

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

Example

CSS Output

CSS Output
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}
variable

default-feature

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

variable

default-layout-direction

Sets the default layout direction of the grid. Can be LTR or RTL. Set with a !global flag.

variable

visual-grid

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.

variable

visual-grid-color

Sets the visual grid color. Set with !global flag.

variable

visual-grid-index

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

variable

visual-grid-opacity

Sets the opacity property of the visual grid. Set with !global flag.