thoughtbot/neat

View on GitHub
core/neat/settings/_settings.scss

Summary

Maintainability
Test Coverage
@charset "UTF-8";
/// This variable is a sass map that overrides Neat's default grid settings.
/// Use this to define your project's grid properties including gutters and
/// total column count.
///
/// @type map
///
/// @group settings
///
/// @name Neat grid
///
/// @property {number (unitless)} columns [12]
///   Default number of the total grid columns.
///
/// @property {number (with unit)} gutter [20px]
///   Default grid gutter width between columns.
///
/// @example scss
///   $neat-grid: (
///     columns: 12,
///     gutter: 20px,
///   );

$neat-grid: () !default;

/// If you need multiple grids in a single project, you can do
/// this by defining a new map stored within a variable of your choosing. This
/// variable can then be passed directly in to any of Neat's mixins like
/// [`grid-column(12, $my-custom-grid)`](#grid-column).
///
/// Custom grids are especially useful with [`grid-media`](#grid-media). By
/// defining a `media` attribute within your custom grid, you are able to easily
/// define gutter width and total column count as well the breakpoint at which
/// they should activate.
///
/// @type map
///
/// @group settings
///
/// @name Custom grids
///
/// @property {number (unitless)} columns [12]
///   Number of the total grid columns.
///
/// @property {number (with unit)} gutter [20px]
///   Grid gutter width between columns.
///
/// @property {number (with unit) | string | null} media [null]
///   The `@media` definition that is used by the [`grid-media`](#grid-media)
///   mixin to determine the media properties.
///
/// @property {color} color [null]
///   The color used by [`grid-visual`](#grid-visual) to create the guides.
///
/// @property {string} direction [ltr]
///   The float direction used throughout the grid.
///
/// @example scss
///   $my-custom-grid: (
///     columns: 12,
///     gutter: 20px,
///     media: 1200px,
///     color: rgba(#00d4ff, 0.25),
///     direction: ltr,
///   );
///
///   $other-custom-grid-for-print: (
///     columns: 14,
///     gutter: 1.5rem,
///     media: print,
///   );
///

$neat-custom-grid: () !default;