Neat - Documentation for Version 1.9.0

function

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

Name	Type	Default	Description
`query`	`List`	-	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)`	`$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

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

Arguments

Name	Type	Default	Description
`direction`	`String`	`left-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

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

Arguments

Name	Type	Default	Description
`display`	`String`	`block`	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

Forces the element to fill its parent container.

Example

SCSS

.element {
  @include fill-parent;
}

CSS Output

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

mixin

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

Arguments

Name	Type	Default	Description
`query`	`List`	-	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)`	`$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

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

Name	Type	Default	Description
`query`	`List`	`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

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

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

Name	Type	Default	Description
`local-max-width`	`Number [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

Adds padding to the element.

Arguments

Name	Type	Default	Description
`padding`	`List`	`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

SCSS

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

CSS Output

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

mixin

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

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

Name	Type	Default	Description
`display`	`String`	`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-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

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

Name	Type	Default	Description
`n-columns`	`Number (unitless)`	`1`	Number of columns by which the element shifts.

Example

SCSS

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

CSS Output

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

mixin

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

Arguments

Name	Type	Default	Description
`shift`	`List`	-	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

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

Name	Type	Default	Description
`span`	`List`	-	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`	`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

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

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

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

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 all deprecation warnings. Defaults to false. Set with a !global flag.

variable

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

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

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

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

variable

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

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

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

variable

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

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

variable

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

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