nth-grid

variables

nth-grid-columns

$nth-grid-columns: 1 !default;

Description

Default Nth-Grid columns setting.

Type

Number</code> or <code>List

See

[mixin] nth-grid

Author

John Hildenbiddle

nth-grid-gap

$nth-grid-gap: 0 !default;

Description

Default Nth-Grid gap setting.

Type

Length</code> or <code>List

See

[mixin] nth-grid

Author

John Hildenbiddle

nth-grid-margin

$nth-grid-margin: 0 !default;

Description

Default Nth-Grid margin setting.

Type

Length</code> or <code>List

See

[mixin] nth-grid

Author

John Hildenbiddle

nth-grid-direction

$nth-grid-direction: ltr !default;

Description

Default Nth-Grid direction setting.

Type

String

See

[mixin] nth-grid

Author

John Hildenbiddle

nth-grid-flex

$nth-grid-flex: true !default;

Description

Default Nth-Grid flex setting.

Type

Boolean

See

[mixin] nth-grid

Author

John Hildenbiddle

nth-grid-flex-legacy

$nth-grid-flex-legacy: false !default;

Description

Default Nth-Grid flex-legacy setting.

Type

Boolean

See

[mixin] nth-grid

Author

John Hildenbiddle

nth-grid-float

$nth-grid-float: false !default;

Description

Default Nth-Grid float setting.

Type

Boolean

See

[mixin] nth-grid

Author

John Hildenbiddle

nth-grid-float-legacy

$nth-grid-float-legacy: false !default;

Description

Default Nth-Grid float-legacy setting.

Type

Boolean

See

[mixin] nth-grid

Author

John Hildenbiddle

nth-grid-debug

$nth-grid-debug: false !default;

Description

Default Nth-Grid debug setting.

Type

Boolean

See

[mixin] nth-grid

Author

John Hildenbiddle

nth-grid-debug-background-color

$nth-grid-debug-background-color: #000 !default;

Description

Default Nth-Grid debug-background-color setting.

Type

String

See

[mixin] nth-grid

Author

John Hildenbiddle

nth-grid-debug-text-color

$nth-grid-debug-text-color: #ccc !default;

Description

Default Nth-Grid debug-text-color setting.

Type

String

See

[mixin] nth-grid

Author

John Hildenbiddle

nth-grid-overlay

$nth-grid-overlay: false !default;

Description

Default Nth-Grid ovelay setting.

Type

Boolean

See

[mixin] nth-grid

Author

John Hildenbiddle

nth-grid-overlay-column-color

$nth-grid-overlay-column-color: #7c48c3 !default;

Description

Default Nth-Grid ovelay-column-color setting.

Type

String

See

[mixin] nth-grid

Author

John Hildenbiddle

nth-grid-overlay-margin-color

$nth-grid-overlay-margin-color: #dabfff !default;

Description

Default Nth-Grid ovelay-margin-color setting.

Type

String

See

[mixin] nth-grid

Author

John Hildenbiddle

nth-grid-overlay-text-color

$nth-grid-overlay-text-color: #fff !default;

Description

Default Nth-Grid ovelay-text-color setting.

Type

String

See

[mixin] nth-grid

Author

John Hildenbiddle

nth-grid-rem-base

$nth-grid-rem-base: 16 !default;

Description

Sets the base font size for rem-to-pixel conversion for IE 7/8. This option is only necessary when the font size of the root element has been changed from the browser default.

Type

Number</code> or <code>Length

Author

John Hildenbiddle

nth-grid-warnings

$nth-grid-warnings: true !default;

Description

Default Nth-Grid warnings setting.

Type

Boolean

See

[mixin] nth-grid

Author

John Hildenbiddle

mixins

nth-grid

@mixin nth-grid($columns: 1, $gap: 0, $margin: 0, $width: auto, $order: false, $direction: ltr, $flex: true, $flex-legacy: false, $float: false, $float-legacy: false, $debug: false, $debug-background-color: #000, $debug-text-color: #ccc, $overlay: false, $overlay-column-color: #333, $overlay-margin-color: #999, $overlay-text-color: #fff, $warnings: true) { ... }

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$columns`	Sets the column count, width and order for each grid row. All grids can be fixed- or fluid-width, determined by the width of container element.	`Number` or `List`	`1`
`$gap`	Sets the vertical gaps (between rows) and horizontal gaps (between columns).	`Length` or `List`	`0`
`$margin`	Sets the vertical and horizontal margins of the grid within the grid container.	`Length` or `List`	`0`
`$width`	Sets the width of the grid container.	`Length`	`auto`
`$order`	Sets the column presentation order.	`List`	`false`
`$direction`	Sets the direction of the grid layout to support left-to-right (default) or right-to-left layouts. This sets the flow of grid columns but not the flow of content within columns. Content flow should be set by applying `dir="rtl"` to an HTML element or adding a `direction: rtl;` rule in your CSS.	`String`	`ltr`
`$flex`	Generates flexbox-based grid CSS rules	`Boolean`	`true`
`$flex-legacy`	Sets legacy compatibility mode for flexbox-based grids. Setting this option to `true` will result in additional CSS being generated for older browsers that support vendor-prefixed and "tweener" flexbox syntax.	`Boolean`	`false`
`$float`	Generates float-based grid CSS rules	`Boolean`	`false`
`$float-legacy`	Sets legacy compatibility mode for float-based grids. Setting this option to `true` will result in additional CSS being generated for IE7/8 compatibility. It is not necessary to set this option for IE9+.	`Boolean`	`false`
`$debug`	Sets the display of grid debug information. Debug information is displayed above the grid and provides an easy way to view the values used by Nth-Grid to calculate the grid layout.	`Boolean`	`false`
`$debug-background-color`	Sets the background color of the grid debug information.	`Color`	`#000`
`$debug-text-color`	Sets the color of the grid debug text.	`Color`	`#ccc`
`$overlay`	Sets the display of the grid column overlay. The overlay will render on top of your column content and display column information such as the original position (before `order` or `rtl` is applied) and calculated width.	`Boolean`	`false`
`$overlay-column-color`	Sets the background color of the grid column overlay.	`Color`	`#333`
`$overlay-margin-color`	Sets the background color of the grid margin overlay.	`Color`	`#999`
`$overlay-text-color`	Sets the color of the column overlay text.	`Color`	`#fff`
`$warnings`	Sets the output of grid layout warnings during compilation. Compilation warnings are generated when `float-legacy` is set to `true` and a grid configuration is defined that is not compatible with legacy browsers.	`Boolean`	`true`

Example

HTML

<!--
  Example 1: We'll define a three column grid on the <main> element.
  Since this element has three child elements, this will produce a grid
  with one row.
-->
<main>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!--
  Example 2: We'll define a *different* three column grid on the .myClass
  element. Since this element has *six* child elements, this will produce
  a grid with two rows. Adding additional child elements will create
  additional rows, each with three columns.
-->
<div class="myclass">
  <!-- Row 1 -->
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <!-- Row 2 -->
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <!-- Add elements for additional rows... -->
</div>

SCSS

// Import the Nth-Grid mixin
@import "path/to/nth-grid/dist/sass/_nth-grid";

// Minimal grid settings
main {
  .nth-grid(3); // 3 symmetric colums, each 1/3 of <main> width
}

// All grid settings
.myclass {
  .nth-grid(
    $columns     : 1 2 3, // 3 asymmetric colums: 1/6, 2/6, 3/6 of $width
    $gap         : 1%,    // 1% horizontal and vertical column gaps
    $margin      : 0 1%,  // 0% horizontal, 1% vertical grid margins
    $width       : 960px, // Fixed 960px container
    $order       : 3 1 2, // Column order
    $direction   : ltr,   // Grid direction
    $flex        : true,  // Flexbox-based grid
    $flex-legacy : false, // Legacy flexbox support (IE10+)
    $float       : false, // Float-based grid
    $float-legacy: false, // Legacy float support (IE7/8)
    $debug       : false, // Debug information displayed above grid
    $overlay     : false  // Grid column overlay
  );
}

See

[variable] nth-grid-columns
[variable] nth-grid-gap
[variable] nth-grid-margin
[variable] nth-grid-direction
[variable] nth-grid-flex
[variable] nth-grid-flex-legacy
[variable] nth-grid-float
[variable] nth-grid-float-legacy
[variable] nth-grid-debug
[variable] nth-grid-debug-background-color
[variable] nth-grid-debug-text-color
[variable] nth-grid-overlay
[variable] nth-grid-overlay-column-color
[variable] nth-grid-overlay-margin-color
[variable] nth-grid-overlay-text-color
[variable] nth-grid-rem-base
[variable] nth-grid-warnings

Author

John Hildenbiddle

nth-grid

variables

Description

Type

See

Links

Author

Description

Type

See

Links

Author

Description

Type

See

Links

Author

Description

Type

See

Links

Author

Description

Type

See

Links

Author

Description

Type

See

Links

Author

Description

Type

See

Links

Author

Description

Type

See

Links

Author

Description

Type

See

Links

Author

Description

Type

See

Links

Author

Description

Type

See

Links

Author

Description

Type

See

Links

Author

Description

Type

See

Links

Author

Description

Type

See

Links

Author

Description

Type

See

Links

Author

Description

Type

Links