Mixins

fill-parent View source

fill-parent()

Forces the element to fill its parent container.

Example

.element {
  // $border-box-sizing: false;
  @include fill-parent;
}

// CSS
.element {
  width: 100%;
  // Also sets box-sizing if global $border-box-sizing is set to 'false'
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

media View source

media([$first-feature] $first-value [$second-feature
$second-value...$nth-feature $nth-value], [$total-columns])

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

@param $first-feature
  type: string
  default: $default-feature
@param $first-value (required)
  type: number (positive, unit)
  • Breakpoint value to use on the first query.
@param $nth-feature
  type: string
@param $nth-value
  type: number (positive, unit)
  • Breakpoint value to use on the nth query.
@param $total-columns
  type: number (positive, unitless)
  default: $grid-columns
  • Number of columns to use in the new grid context.

Shorthand syntax

media($first-feature $first-value [$second-feature, $second-value] [$total-columns])

Example

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

span-columns View source

span-columns($columns [of $container-columns], [$display])

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.

@param $columns (required)
  type: number (positive, unitless)
  • The number of columns the element spans.
@param $container-columns
  type: number (positive, unitless)
  default: $grid-columns
  • The number of columns the parent element spans.
@param $display
  type: string
  default: block
  • Sets the display property of the element.
    • block sets the display property to block.
    • block-collapse sets the display property to block and removes the margin gutter by adding it to the element width.
    • table 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

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

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

// CSS
.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;
}

pad View source

pad([$padding-shorthand])

Adds padding to the element.

@param $padding-shorthand
  type: list (space-separated)
  list-item-type: number (unit)
  default: flex-gutter()
  • Shorthand syntax for CSS padding properties padding-top, padding-right, padding-bottom, padding-left.

Example

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

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

omega View source

omega([$pseudo-target $display])

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.

@param $pseudo-target
  type: string
  • The nth-child pseudo selector to target.
    • auto targets the :last-child pseudo selector.
@param $display
  type: string
  default: block
  • Sets the display property of the element.
    • block removes gutter margin.
    • (deprecated) table removes padding.

Usage Notes

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

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

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

outer-container View source

outer-container()

Centers the element in the viewport, clears its floats, and sets its max-width.

Usage Notes

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.

Example

.element {
  @include outer-container;
}

// CSS
.element {
  *zoom: 1;
  max-width: 68em;
  margin-left: auto;
  margin-right: auto;
}
.element:before, .element:after {
  content: " ";
  display: table;
}
.element:after {
  clear: both;
}

reset-display View source

reset-display()

Resets the active display property to block.

Usage Notes

This mixin is particularly useful when changing the display property in a single row.

Example

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

@include reset-display;
// Context is reset to block display

reset-layout View source

reset-layout-direction()

Resets the active layout direction to the default value set in $default-layout-direction.

Usage Notes

This mixin is particularly useful when changing the layout direction in a single row.

Example

.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

reset-all()

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

Syntax

.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

row View source

row([$display, $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.

@param $display
  type: string
  default: block
  • Sets the display property of the element and the display context that will be used by its children.
    • block sets the display property to block.
    • table sets the display property to table.
@param $direction
  type: string
  default: $default-layout-direction
  • Sets the layout direction.
    • LTR sets the direction of the layout to left-to-right
    • RTL sets the direction of the layout to right-to-left

Usage Notes

Rows can't be nested, but there can be more than one row element—with different display properties—per layout.

Example

.element {
  @include row();
}

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

shift View source

shift($columns [of $container-columns])

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.

@param $columns (required)
  type: number (unitless)
  default: 1
  • Number of columns by which the element shifts.
@param $container-columns
  type: number (positive, unitless)
  default: $grid-columns
  • The number of columns the parent element spans. If not specified, the mixin uses the $container-columns argument of the last span-columns() call, or $grid-columns if none.

Example

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

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

Functions

new-breakpoint View source

new-breakpoint($first-feature $first-value $second-feature $second-value $total-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.

@param $first-feature
  type: string
  default: $default-feature
@param $first-value (required)
  type: number (positive, unit)
  • Breakpoint value to use on the first query.
@param $second-feature
  type: string
@param $second-value
  type: number (positive, unit)
  • Breakpoint value to use on the second query.
@param $total-columns
  type: number (positive, unitless)
  default: $grid-columns
  • Number of columns to use in the new grid context.

Shorthand syntax

media($first-feature $first-value [$second-feature, $second-value] [$total-columns])

Example

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

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

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

Variables

border-box-sizing

$border-box-sizing
  type: bool
  default: true

When set to true, it sets the box-sizing property of all elements to border-box.

Example

// CSS
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

column

$column
  type: number (positive, unit)
  default: golden-ratio(1em, 3)

Sets the relative width of a single grid column.

Usage Notes

  • The unit used should be the same one used to define $gutter.
  • To learn more about golden-ratio() see Bourbon docs.

default-feature

$default-feature
  type: string
  default: min-width

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

default-layout-direction

$default-layout-direction
  type: string
  default: LTR

Sets the default layout direction of the grid.

  • LTR for a left-to-right layout
  • RTL for a right-to-left layout

grid-columns

$grid-columns
  type: number (positive, unitless)
  default: 12

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

gutter

$gutter
  type: number (positive, unit)
  default: golden-ratio(1em, 1)

Sets the relative width of a single grid gutter.

Usage Notes

  • The unit used should be the same one used to define $column.
  • To learn more about golden-ratio() see Bourbon docs.

max-width

$max-width
  type: number (positive, unit)
  default: em(1088)

Sets the max-width property of the element that includes outer-container().

Usage Notes

visual-grid-color

$visual-grid-color
  type: color
  default: #eee

Sets the visual grid color.

visual-grid-index

$visual-grid-index
  type: string
  default: back

Sets the z-index property of the visual grid.

  • back visual grid appears under the content.
  • front visual grid appears over the content.

visual-grid-opacity

Syntax

$visual-grid-opacity
  type: number (0.0-1.0)
  default: 0.4

Sets the opacity property of the visual grid.

visual-grid

$visual-grid
  type: bool
  default: false

Displays the visual grid when set to true.

Usage Notes

  • The overlaid grid may be few pixels off depending on the browser's rendering engine and pixel rounding algorithm.