Sha256: cb1a2e3493eefdd58e3382def3757f0b2203724ef85932ef8f252678e16d3b8f
Contents?: true
Size: 1.92 KB
Versions: 8
Compression:
Stored size: 1.92 KB
Contents
@charset "UTF-8";
/// `grid-media` allows you to change your layout based on a media query.
/// For example, an object can span 3 columns on small screens and 6 columns
/// on large screens.
///
/// You can take this a step further and set different grid attributes like
/// gutter size and total column count for each media query. So, for example,
/// you can have a `1rem` gutter on small screens, and a `2rem` gutter on large
/// screens.
///
/// @group features
///
/// @name Grid media
///
/// @argument {map} $grid
/// The grid to be used within the scope of the block.
/// This grid should include the `media` property to determine the expression
/// for the media query.
///
/// @content
/// Grid media will temporarily the override the default grid with the
/// attributes of the custom grid. This change is scoped to within the mixin
/// block, and once the mixin has ended the default grid will revert to its
/// original state as defined by `$neat-grid`. This allows for different
/// gutter width and column count based on screen size or other properties.
///
/// @example scss
/// $custom-neat-grid: (
/// columns: 12,
/// gutter: 50px,
/// media: 1000px,
/// );
///
/// .element {
/// @include grid-column(3);
///
/// @include grid-media($custom-neat-grid){
/// @include grid-column(6);
/// }
/// }
///
/// @example css
/// .element {
/// width: calc(25% - 25px);
/// float: left;
/// margin-left: 20px;
/// }
///
/// @media only screen and (min-width: 1000px) {
/// .element {
/// width: calc(50% - 75px);
/// float: left;
/// margin-left: 50px;
/// }
/// }
@mixin grid-media($grid) {
$_media: _retrieve-neat-setting($grid, media);
$_query: _neat-parse-media($_media);
@media #{$_query} {
$_default-neat-grid: $neat-grid;
$neat-grid: map-merge($neat-grid, $grid) !global;
@content;
$neat-grid: $_default-neat-grid !global;
}
}
Version data entries
8 entries across 8 versions & 5 rubygems