brigrid v1.4.0-alpha

Brigrid

A simple, powerful and fully customizable SASS grid system. Inspired by Neat, Gridle and Bootstrap

Table of content

1. Requirements
2. Installation
   • Installing with bower
   • Installing with npm
   • Installing with npm and using a Node-based asset pipeline
3. Documentation
   1. Configuration
      • Grid maps
      • Media maps
   2. Functions
      • get-grid-value
      • set-grid-value
      • prepare-grid
   3. Components
      • outer-container
      • grid-collapse
      • grid-container-base
      • grid-container-align
      • grid-container
      • grid-column-base
      • grid-column-width
      • grid-column-align
      • grid-column-gutter
      • grid-column-order
      • grid-column-clearfix
      • grid-column
      • grid-push
      • grid-shift
   4. Helpers
      • media-breakpoint-before
      • media-breakpoint-from
      • media-breakpoint-between
      • media-breakpoint-only

Requirements

• Sass 3.4+ or LibSass 3.3+
• Also I strongly recommend using css-mqpacker and autoprefixer to generate beautiful output CSS code

Installation

Installing with bower

1. Install brigrid:

   bower install --save brigrid

2. Import Brigrid in your stylesheet:

   @import "brigrid";

Installing with npm

1. Add Brigrid as a dev dependency:

   npm install --save-dev brigrid

2. Import Brigrid in your stylesheet:

   @import "node_modules/brigrid/core/brigrid";

Installing with npm and using a Node-based asset pipeline:

1. Add Brigrid as a dev dependency:

   npm install --save-dev brigrid

2. Require includePaths of the Brigrid:

   var brigridPaths = require("brigrid").includePaths;

3. Pass this array of directories to node-sass. Webpack example:

   var brigridPaths = require("brigrid").includePaths;
   module.exports = {
      module: {
          rules: [
              {
                  test: /\.scss$/,
                  use: [
                      'style-loader',
                      'css-loader',
                      {
                          loader: 'sass-loader',
                          options: { includePaths: brigridPaths }
                      }
                  ]
              }
          ]
      }
   };

4. Import Brigrid in your stylesheet:

   @import "brigrid";

Documentation

Configuration

To generate CSS properties, all components in Brigrid use grid-map, which defines the general grid settings. By default, all components use the global variable $default-grid as the grid-map. All the possible grid-map options are listed below.

Grid maps

You can override the $default-grid by assigning it a map, where each key-value pair replaces the default settings. For all non-overridden keys, the standard values will be used.

Example SCSS:

$default-grid: prepare-grid((
    driver: float,
    columns: 16
));
.element {
    @include grid-container(); // By default, $default-grid will be used
}

Alternatively, you can create custom grid-map, prepare it with the function prepare-grid and pass it to components via the $grid argument.

Example SCSS:

$my-grid: prepare-grid((
    driver: float,
    columns: 16
));
.element {
    @include grid-container(
        $grid: $my-grid
    );
}

Media maps

For some grid settings you can set a dynamic value that will change for each breakpoint specified. Such values are called media-maps and are defined by the SASS map, each key of which is the breakpoint name, and the value specifies the state for this breakpoint.

Example SCSS:

$example-grid: prepare-grid((
    align-x: (
        md: left,
        lg: center,
        xl: right
    ),
    align-y: (
        md: top,
        lg: center,
        xl: bottom
    ),
    gutter: (
        md: 10px,
        lg: 20px,
        xl: 30px
    ),
));
.element {
    @include grid-container(
        $grid: $example-grid
    );
}

Output CSS:

.element {
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: row;
}
@media only screen and (min-width: 992px) {
    .element {
        justify-content: center;
        align-items: center;
    }
}
@media only screen and (min-width: 1200px) {
    .element {
        justify-content: flex-end;
        align-items: flex-end;
    }
}

Functions

get-grid-value

Returns the value of the requested key in the grid-map. If there is no value for the required key in grid-map, the function will return the default value.

Arguments

Example SCSS:

$example-grid: prepare-grid((
    driver: flex,
    columns: 16,
));

@debug get-grid-value(driver, $example-grid); // > flex
@debug get-grid-value(columns, $example-grid); // > 16
@debug get-grid-value(align-x, $example-grid); // > left (returns the default value)

set-grid-value

Sets the value for the key in the grid-map.

Arguments

Example SCSS:

$example-grid: prepare-grid((
    driver: flex,
    columns: 16,
));

$example-grid: set-grid-value(columns, 14,  $example-grid);
$example-grid: set-grid-value(align-x, center, $example-grid);

@debug $example-grid;
// > (
//      driver: flex,
//      columns: 14,
//      breakpoints: ( // the default value is used
//          xs: 0,
//          sm: 576px,
//          md: 768px,
//          lg: 992px,
//          xl: 1200px,
//          xx: 1600px
//      ),
//      _breakpoints-sorting: min, // automatically created by sorting function
//      align-x: center
//   )

prepare-grid

Prepares a grid-map for use in components, helpers and functions (sorts breakpoints).

Arguments

Example SCSS:

$example-grid: prepare-grid((
    driver: float,
    columns: 12,
    breakpoints: (
        xx: 1600px,
        sm: 576px,
        lg: 992px,
        md: 768px,
        xs: 0,
        xl: 1200px
    ),
));

@debug $example-grid;
// > (
//     driver: float,
//     columns: 12,
//     breakpoints: ( // was sorted
//          xs: 0,
//          sm: 576px,
//          md: 768px,
//          lg: 992px,
//          xl: 1200px,
//          xx: 1600px),
//     _breakpoints-sorting: min // was added automatically
//   )

Components

outer-container

Creates an outer container by centering it in the viewport and setting its max-width.

Arguments

Example SCSS:

$example-grid: prepare-grid((
    breakpoints: (
        xs: 0, // Extra small screen
        sm: 576px, // Small screen
        md: 768px, // Medium screen
        lg: 992px, // Large screen
        xl: 1200px, // Extra large screen
        xx: 1600px // Extra extra large screen
    ),
    container-widths: (
        md: 768px, // Medium screen
        lg: 960px, // Large screen
        xl: 1170px, // Extra large screen
        xx: 1400px // Extra extra large screen
    )
));
.element {
    @include outer-container($grid: $example-grid);
}

Output CSS:

.element {
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    max-width: 768px;
}
@media only screen and (min-width: 992px) {
    .element {
        max-width: 960px;
    }
}
@media only screen and (min-width: 1200px) {
    .element {
        max-width: 1170px;
    }
}
@media only screen and (min-width: 1600px) {
    .element {
        max-width: 1400px;
    }
}

grid-collapse

Collapses grid container by consuming the gutters of its container, for use in nested layouts.

Arguments

Example SCSS:

$example-grid: prepare-grid((
    gutter: (
        md: 20px,
        xl: 30px
    )
));
.element {
    @include grid-collapse(
        $grid: $example-grid
    );
}

Output CSS:

.element {
    margin-left: -10px;
    margin-right: -10px;
}
@media only screen and (min-width: 1200px) {
    .element {
        margin-left: -15px;
        margin-right: -15px;
    }
}

grid-container-base

Creates container base by $grid options

Arguments

Example SCSS:

$example-grid: prepare-grid((
    driver: flex,
    align-x: left,
    align-y: top,
    gutter: (
        sm: 20px,
        md: 30px
    ),
    collapse: true,
    reversed: false,
    breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xx: 1600px
    )
));
.element {
    @include grid-container-base(
        $grid: $example-grid
    );
}

Output CSS:

.element {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    margin-left: -10px;
    margin-right: -10px;
    flex-direction: row;
}
@media only screen and (min-width: 768px) {
    .element {
        margin-left: -15px;
        margin-right: -15px;
    }
}

grid-container-align

Creates grid columns alignment in container (Supported only in flex driver)

Arguments

Example SCSS:

$example-grid: prepare-grid((
    driver: flex,
    align-x: left, // will be ignored, because it uses align-x declared in grid-column-align
    align-y: top, // will be ignored, because it uses align-y declared in grid-column-align
    breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xx: 1600px
    )
));
.element {
    @include grid-container-align(
        $align-x: (
            md: left,
            lg: center,
            xl: right
        ),
        $align-y: (
            md: top,
            lg: center,
            xl: bottom
        ),
        $grid: $example-grid
    );
}

Output CSS:

.element {
    justify-content: flex-start;
    align-items: flex-start;
}
@media only screen and (min-width: 992px) {
    .element {
        justify-content: center;
        align-items: center;
    }
}
@media only screen and (min-width: 1200px) {
    .element {
        justify-content: flex-end;
        align-items: flex-end;
    }
}

grid-container

Creates a grid container.

Arguments

Example SCSS (Float driver):

$example-grid: prepare-grid((
    driver: float,
    breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xx: 1600px
    ),
    align-x: ( // will be ignored, because alignment is not supported in float driver
        md: left,
        lg: center,
        xl: right
    ),
    align-y: ( // will be ignored, because alignment is not supported in float driver
        md: top,
        lg: center,
        xl: bottom
    ),
    gutter: (md: 10px, lg: 20px, xl: 30px),
    collapse: true
));
.element {
    @include grid-container(
        $grid: $example-grid
    );
}

Output CSS (Float driver):

.element {
    box-sizing: border-box;
    margin-left: -5px;
    margin-right: -5px;
}
.element::before, .element::after {
    display: table;
    content: "";
}
.element::after {
    clear: both;
}
@media only screen and (min-width: 992px) {
    .element {
        margin-left: -10px;
        margin-right: -10px;
    }
}
@media only screen and (min-width: 1200px) {
    .element {
        margin-left: -15px;
        margin-right: -15px;
    }
}

Example SCSS (Flex driver):

$example-grid: prepare-grid((
    driver: flex,
    breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xx: 1600px
    ),
    align-x: (
        md: left,
        lg: center,
        xl: right
    ),
    align-y: (
        md: top,
        lg: center,
        xl: bottom
    ),
    gutter: (md: 10px, lg: 20px, xl: 30px),
    collapse: true
));
.element {
    @include grid-container(
        $grid: $example-grid
    );
}

Output CSS (Flex driver):

.element {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: -5px;
    margin-right: -5px;
    flex-direction: row;
}
@media only screen and (min-width: 992px) {
    .element {
        justify-content: center;
        align-items: center;
        margin-left: -10px;
        margin-right: -10px;
    }
}
@media only screen and (min-width: 1200px) {
    .element {
        justify-content: flex-end;
        align-items: flex-end;
        margin-left: -15px;
        margin-right: -15px;
    }
}

grid-column-base

Creates column base by $grid options

Arguments

Example SCSS:

$example-grid: prepare-grid((
    driver: flex,
    align-x: left,
    align-y: top,
    gutter: (
        sm: 20px,
        md: 30px
    ),
    collapse: true,
    reversed: false,
    breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xx: 1600px
    )
));

.element {
    @include grid-column-base(
        $grid: $example-grid
    );
}

Output CSS:

.element {
    box-sizing: border-box;
    min-height: 1px;
    padding-left: 10px;
    padding-right: 10px;
}

@media only screen and (min-width: 768px) {
    .element {
        padding-left: 15px;
        padding-right: 15px;
    }
}

grid-column-width

Sets column width properties based on the number of occupied columns and grid settings.

Arguments

Example SCSS:

$example-grid: prepare-grid((
    driver: flex,
    columns: 12,
    breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xx: 1600px
    )
));
.element {
    @include grid-column-width(
        $columns: (
            sm: 12,
            lg: 6,
            xl: hidden
        ),
        $grid: $example-grid
    );
}

Output CSS:

.element {
    display: block;
    max-width: 100%;
    width: 100%;
}
@media only screen and (min-width: 992px) {
    .element {
        display: block;
        max-width: 50%;
        width: 50%;
    }
}
@media only screen and (min-width: 1200px) {
    .element {
        display: none;
    }
}

grid-column-align

Creates column alignment (Supported only in flex driver)

Arguments

Example SCSS:

$example-grid: prepare-grid((
    driver: flex,
    breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xx: 1600px
    )
));
.element {
    @include grid-column-align(
        $align-x: (
            md: left,
            lg: center,
            xl: right
        ),
        $align-y: (
            md: top,
            lg: center,
            xl: bottom
        ),
        $grid: $example-grid
    );
}

Output CSS:

.element {
    margin-right: auto;
    margin-left: 0;
    align-self: flex-start;
}
@media only screen and (min-width: 992px) {
    .element {
        margin-left: auto;
        margin-right: auto;
        align-self: center;
    }
}
@media only screen and (min-width: 1200px) {
    .element {
        margin-left: auto;
        margin-right: 0;
        align-self: flex-end;
    }
}

grid-column-gutter

Sets grid gutter width around column, ignoring the gutter property in grid map.

Arguments

Example SCSS:

$example-grid: prepare-grid((
    gutter: 50px, // will be ignored
    breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xx: 1600px
    )
));
.element {
    @include grid-column-gutter(
        $gutter: (
            sm: 10px,
            lg: 20px,
            xl: 30px
        ),
        $grid: $example-grid
    );
}

Output CSS:

.element {
    padding-left: 5px;
    padding-right: 5px;
}
@media only screen and (min-width: 992px) {
    .element {
        padding-left: 10px;
        padding-right: 10px;
    }
}
@media only screen and (min-width: 1200px) {
    .element {
        padding-left: 15px;
        padding-right: 15px;
    }
}

grid-column-order

Creates column order (Supports only in flex driver)

Arguments

Example SCSS:

$example-grid: prepare-grid((
    driver: flex,
    breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xx: 1600px
    )
));
.element {
    @include grid-column-order((
        md: -1,
        lg: 0,
        xl: 1
    ));
}

Output CSS:

.element {
    order: -1;
}
@media only screen and (min-width: 992px) {
    .element {
        order: 0;
    }
}
@media only screen and (min-width: 1200px) {
    .element {
        order: 1;
    }
}

grid-column-clearfix

Clears float from grid-column elements. It can target a specific element, or every nth-child occurrence. (Supports only in float driver)

Arguments

Example #1 SCSS:

$example-grid: prepare-grid((
    driver: float,
    breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xx: 1600px
    )
));

.column-clearfix {
    @include grid-column-clearfix(
        $grid: $example-grid
    );
}

Output #1 CSS:

.column-clearfix {
    clear: left;
}

Example #2 SCSS:

$example-grid: prepare-grid((
    driver: float,
    breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xx: 1600px
    )
));

.test-column {
    @include grid-column(
        $columns: (
            xs: 12,
            sm: 6,
            md: 4,
            lg: 3,
            xl: 2,
            xx: 1
        ),
        $grid: $example-grid
    );
    @include grid-column-clearfix(
        $nth-child: (
            xs: '1n+1',
            sm: '2n+1',
            md: '3n+1',
            lg: '4n+1',
            xl: '6n+1',
            xx: '12n+1'
        ),
        $grid: $example-grid
    )
}

Output #2 CSS:

.test-column {
    float: left;
    display: block;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.test-column:nth-child(1n+1) {
    clear: left;
}

@media only screen and (min-width: 576px) {
    .test-column {
        display: block;
        width: 50%;
    }
    .test-column:nth-child(1n+1) {
        clear: none;
    }
    .test-column:nth-child(2n+1) {
        clear: left;
    }
}

@media only screen and (min-width: 768px) {
    .test-column {
        display: block;
        width: 33.33333%;
    }
    .test-column:nth-child(2n+1) {
        clear: none;
    }
    .test-column:nth-child(3n+1) {
        clear: left;
    }
}

@media only screen and (min-width: 992px) {
    .test-column {
        display: block;
        width: 25%;
    }
    .test-column:nth-child(3n+1) {
        clear: none;
    }
    .test-column:nth-child(4n+1) {
        clear: left;
    }
}

@media only screen and (min-width: 1200px) {
    .test-column {
        display: block;
        width: 16.66667%;
    }
    .test-column:nth-child(4n+1) {
        clear: none;
    }
    .test-column:nth-child(6n+1) {
        clear: left;
    }
}

@media only screen and (min-width: 1600px) {
    .test-column {
        display: block;
        width: 8.33333%;
    }
    .test-column:nth-child(6n+1) {
        clear: none;
    }
    .test-column:nth-child(12n+1) {
        clear: left;
    }
}

grid-column

Creates a grid column based on the driver specified in the grid map.

Arguments

Example SCSS (Flex driver):

$example-grid: prepare-grid((
    driver: flex,
    columns: 12,
    gutter: 50px,
    breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xx: 1600px
    )
));
.element {
    @include grid-column(
        $columns: (
            xs: 12,
            sm: 6,
            lg: 1,
            xx:hidden
        ),
        $align-x: (
            md: left,
            lg: center,
            xl: right
        ),
        $align-y: (
            md: top,
            lg: center,
            xl: bottom
        ),
        $gutter: (
            sm: 10px,
            lg: 20px,
            xl: 30px
        ),
        $order: (
            sm: -1,
            lg: 0,
            xl: 1
        ),
        $grid: $example-grid
    );
}

Example CSS (Flex driver):

.element {
    box-sizing: border-box;
    display: block;
    max-width: 100%;
    width: 100%;
    min-height: 1px;
    padding-left: 5px;
    padding-right: 5px;
    margin-right: auto;
    margin-left: 0;
    align-self: flex-start;
    order: -1;
}
@media only screen and (min-width: 576px) {
    .element {
        display: block;
        max-width: 50%;
        width: 50%;
    }
}
@media only screen and (min-width: 992px) {
    .element {
        display: block;
        max-width: 8.33333%;
        width: 8.33333%;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: auto;
        margin-right: auto;
        align-self: center;
        order: 0;
    }
}
@media only screen and (min-width: 1200px) {
    .element {
        padding-left: 15px;
        padding-right: 15px;
        margin-left: auto;
        margin-right: 0;
        align-self: flex-end;
        order: 1;
    }
}
@media only screen and (min-width: 1600px) {
    .element {
        display: none;
    }
}

Example SCSS (Float driver):

$example-grid: prepare-grid((
    driver: float,
    columns: 12,
    gutter: 50px,
    breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xx: 1600px
    )
));
.element {
    @include grid-column(
        $columns: (xs: 12, sm: 6, lg: 1, xx:hidden),
        $align-x: (
            md: left,
            lg: center,
            xl: right
        ), // ! will be ignored because alignment is not supported in float driver!
        $align-y: (
            md: top,
            lg: center,
            xl: bottom
        ), // ! will be ignored because alignment is not supported in float driver!
        $gutter: (
            sm: 10px,
            lg: 20px,
            xl: 30px
        ),
        $order: (
            sm: -1,
            lg: 0,
            xl: 1
        ), // ! will be ignored because order is not supported in float driver!
        $grid: $example-grid
    );
}

Output CSS (Float driver):

.element {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-height: 1px;
    padding-left: 5px;
    padding-right: 5px;
    float: left;
}
@media only screen and (min-width: 576px) {
    .element {
        display: block;
        width: 50%;
    }
}
@media only screen and (min-width: 992px) {
    .element {
        display: block;
        width: 8.33333%;
        padding-left: 10px;
        padding-right: 10px;
    }
}
@media only screen and (min-width: 1200px) {
    .element {
        padding-left: 15px;
        padding-right: 15px;
    }
}
@media only screen and (min-width: 1600px) {
    .element {
        display: none;
    }
}

grid-push

Push or pull a grid column by manipulating its left margin.

Arguments

Example SCSS:

$example-grid: prepare-grid((
    driver: float,
    columns: 12,
    breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xx: 1600px
    )
));
.element {
    @include grid-push(
        $columns: (md: 2, lg: 3, xl: 4),
        $grid: $example-grid
    );
}

Output CSS:

.element {
    margin-left: 33.33333%;
}
@media screen and (max-width: 991px) {
    .element {
        margin-left: 16.66667%;
    }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .element {
        margin-left: 25%;
    }
}

grid-shift

Shifts columns and reorder them within their container using relative positioning.

Arguments

Example SCSS:

$example-grid: prepare-grid((
    driver: float,
    columns: 12,
    breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xx: 1600px
    )
));
.element {
    @include grid-shift(
        $columns: (md: 2, lg: 3, xl: 4),
        $grid: $example-grid
    );
}

Output CSS:

.element {
    position: relative;
    left: 16.66667%;
}
@media only screen and (min-width: 992px) {
    .element {
       left: 25%;
    }
}
@media only screen and (min-width: 1200px) {
    .element {
        left: 33.33333%;
    }
}

Helpers

media-breakpoint-before

Creates a media query before the breakpoint width and applies @content to it.

Arguments

Example SCSS:

$example-grid: prepare-grid((
    breakpoints: (
        xs: 0, // Extra small screen
        sm: 576px, // Small screen
        md: 768px, // Medium screen
        lg: 992px, // Large screen
        xl: 1200px, // Extra large screen
        xx: 1600px // Extra extra large screen
    )
));
.element {
    display: block;
    @include media-breakpoint-before(sm, $grid: $example-grid) {
        display: none;
    }
}

Output CSS:

.element {
    display: block;
}
@media only screen and (max-width: 575px) {
    .element {
        display: none;
    }
}

media-breakpoint-from

Creates a media query from the breakpoint width and applies @content to it.

Arguments

Example SCSS:

$example-grid: prepare-grid((
    breakpoints: (
        xs: 0, // Extra small screen
        sm: 576px, // Small screen
        md: 768px, // Medium screen
        lg: 992px, // Large screen
        xl: 1200px, // Extra large screen
        xx: 1600px // Extra extra large screen
    )
));
.element {
    display: block;
    @include media-breakpoint-from(sm) {
        display: none;
    }
}

Output CSS:

.element {
    display: block;
}
@media only screen and (min-width: 576px) {
    .element {
        display: none;
    }
}

media-breakpoint-between

Creates a media query that spans multiple breakpoint widths and applies @content to it.

Arguments

Example SCSS:

$example-grid: prepare-grid((
    breakpoints: (
        xs: 0, // Extra small screen
        sm: 576px, // Small screen
        md: 768px, // Medium screen
        lg: 992px, // Large screen
        xl: 1200px, // Extra large screen
        xx: 1600px // Extra extra large screen
    )
));
.element {
    display: block;
    @include media-breakpoint-between($from: sm, $to: lg, $grid: $example-grid) {
        display: none;
    }
}

Output CSS:

.element {
    display: block;
}
@media only screen and (min-width: 576px) and (max-width: 991px) {
    .element {
        display: none;
    }
}

media-breakpoint-only

Creates a media query between the breakpoint's minimum and maximum widths and applies @content to it.

Arguments

Example SCSS:

$example-grid: prepare-grid((
    breakpoints: (
        xs: 0, // Extra small screen
        sm: 576px, // Small screen
        md: 768px, // Medium screen
        lg: 992px, // Large screen
        xl: 1200px, // Extra large screen
        xx: 1600px // Extra extra large screen
    )
));
.element {
    display: block;
    @include media-breakpoint-only(sm, $grid: $example-grid) {
        display: none;
    }
}

Output CSS:

.element {
    display: block;
}
@media screen and (min-width: 576px) and (max-width: 767px) {
    .element {
        display: none;
    }
}