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

direction-context

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

Arguments
NameTypeDefaultDescription
directionStringleft-to-right

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

Example
SCSS
@include direction-context(right-to-left) {
 .right-to-left-block {
   @include span-columns(6);
  }
}
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
displayStringblock

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

Example
SCSS
@include display-context(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
SCSS
.element {
  @include fill-parent;
}
CSS Output
.element {
  width: 100%;
  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
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
@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
queryListblock

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

outer-container

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.

Arguments
NameTypeDefaultDescription
local-max-widthNumber [unit]$max-width

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

Example
SCSS
.element {
  @include outer-container(100%);
}
CSS Output
.element {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.element::after {
  clear: both;
  content: "";
  display: table;
}
mixin

pad

Adds padding to the element.

Arguments
NameTypeDefaultDescription
paddingListflex-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
SCSS
.element {
  @include pad(30px -20px 10px default);
}
CSS Output
.element {
  padding: 30px -20px 10px 2.35765%;
}
mixin

reset-display

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

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

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

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
SCSS
.element {
  @include row();
}
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
SCSS
.element {
  @include shift(-3);
}
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
SCSS
.element {
  @include shift(-3 of 6);
}
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.

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

displayStringblock

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

clearfix

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

Example
SCSS
.element {
  @include clearfix;
}
CSS Output
.element::after {
  clear: both;
  content: "";
  display: block;
}
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. 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. 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(). 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
html {
  box-sizing: border-box; }

*, *::after, *::before {
  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.