From 9275b3b8dba5edfcb249e796f928ee36df314b26 Mon Sep 17 00:00:00 2001 From: Black Mirror Date: Tue, 27 Mar 2018 17:43:00 +0200 Subject: [PATCH] simple grid system added --- scss/flavor.scss | 1 + scss/grid-system/grid-system.scss | 124 ++++++++++++++++++++++++++++++ scss/mixins/_box.scss | 6 ++ scss/mixins/_media.scss | 24 +----- scss/types/_array.scss | 12 +++ scss/variables.scss | 23 ++++++ 6 files changed, 168 insertions(+), 22 deletions(-) create mode 100644 scss/grid-system/grid-system.scss diff --git a/scss/flavor.scss b/scss/flavor.scss index 32fc892..4dc8e7b 100644 --- a/scss/flavor.scss +++ b/scss/flavor.scss @@ -1,3 +1,4 @@ @import 'variables'; @import '~bourbon/app/assets/stylesheets/bourbon'; @import 'core'; +@import 'grid-system/grid-system'; diff --git a/scss/grid-system/grid-system.scss b/scss/grid-system/grid-system.scss new file mode 100644 index 0000000..c58fdc3 --- /dev/null +++ b/scss/grid-system/grid-system.scss @@ -0,0 +1,124 @@ +@mixin container-breakpoints($breakpoints: $common-breakpoints, $gutter: $gutter-default) { + @each $key, $breakpoint in $breakpoints { + @include media($breakpoint) { + .container { + @include box-size(($breakpoint - $gutter) auto); + } + } + } +} + +@mixin columns-sizes($columns: $columns-default, $gutter: $gutter-default, $key: '') { + @for $i from 0 through $columns { + @if ($i==0) { + .col-#{$key}-push-0 { + left: auto; + } + + .col-#{$key}-pull-0 { + right: auto; + } + } + @else { + $col-percentage: percentage($i / $columns); + + .col-#{$key}-#{$i} { + width: $col-percentage; + } + + .col-#{$key}-push-#{$i} { + left: $col-percentage; + } + + .col-#{$key}-pull-#{$i} { + right: $col-percentage; + } + + .col-#{$key}-offset-#{$i} { + margin-left: $col-percentage; + } + } + } +} + +@mixin columns-breakpoints($breakpoints: $columns-breakpoints, $columns: $columns-default, $gutter: $gutter-default) { + @each $key, $breakpoint in $breakpoints { + @if ($breakpoint==$first-breakpoint) { + @include columns-sizes($columns, $gutter, $key); + } + @else { + @include media($breakpoint) { + @include columns-sizes($columns, $gutter, $key); + } + } + } +} + +@mixin columns($columns: $columns-default, $gutter: $gutter-default) { + // Columns + // + // Common styles for small and large grid columns + $columns-selectors: (); + + @for $i from 1 through $columns { + $columns-selectors: array-concat($columns-selectors, '[class*=\'col-\'][class*=\'-#{$i}\']'); + } + + #{array-join($columns-selectors)} { + @include position(relative); + @include display(inline-block); + @include padding(null $column-padding-right null $column-padding-right); + @include reset-inline-block; + + min-height: 1px; // Prevent columns from collapsing when empty + } + + @include columns-breakpoints($columns-breakpoints, $columns, $gutter) +} + +@mixin grid-system($columns: $columns-default, $gutter: $gutter-default) { + // Grid system + // -------------------------------------------------- + $row-margin-left: ceil(($gutter / -2)); + $row-margin-right: floor(($gutter / -2)); + + $column-padding-left: ceil(($gutter / 2)); + $column-padding-right: floor(($gutter / 2)); + + %container-base { + // container-base + @include display(block); + @include box-size(100% auto); + @include padding(0 $column-padding-right 0 $column-padding-left); + @include margin(0 auto); + } + + [class*='container'] { + // Container widths + // + // Set the container width, and override it for fixed navbars in media queries. + @extend %container-base; + + + [class*='container'] { + @include margin($gutter null null null); + } + + &:not([class*='-fluid']) { + @include container-breakpoints($common-breakpoints, $gutter); + } + } + + .row { + // Row + // + // Rows contain and clear the floats of your columns. + @include display(block); + @include margin(0 $row-margin-right 0 $row-margin-left); + + + .row { + @include margin($gutter null null null); + } + } + + @include columns($columns, $gutter); +} diff --git a/scss/mixins/_box.scss b/scss/mixins/_box.scss index dab94d8..dc18874 100644 --- a/scss/mixins/_box.scss +++ b/scss/mixins/_box.scss @@ -260,3 +260,9 @@ $backface-visibility-modes: array-concat((visible, hidden), $css-default-modes); @warn '`backface-visibility: #{$bv}` is not a valid backface-visibility value'; } } + +@mixin reset-inline-block { + letter-spacing: -.3em; + line-height: 0; + text-rendering: optimizespeed; +} diff --git a/scss/mixins/_media.scss b/scss/mixins/_media.scss index 3191eb7..326a345 100644 --- a/scss/mixins/_media.scss +++ b/scss/mixins/_media.scss @@ -1,25 +1,5 @@ -$breakpoints: (phone: 400px, phone-wide: 480px, phablet: 560px, tablet-small: 640px, tablet: 768px, tablet-wide: 1024px, desktop: 1248px, desktop-wide: 1440px); - @mixin media($width, $type: min) { - @if map_has_key($breakpoints, $width) { - $width: map_get($breakpoints, $width); - - @if $type == max { - $width: $width - 1px; - } - - @media only screen and (#{$type}-width: $width) { - @content; - } + @media screen and (#{$type}-width: $width) { + @content; } } - -// example -// .site-header { -// padding: 2rem; -// font-size: 1.8rem; -// @include mq('tablet-wide') { -// padding-top: 4rem; -// font-size: 2.4rem; -// } -// } diff --git a/scss/types/_array.scss b/scss/types/_array.scss index 11ec087..24f6c32 100644 --- a/scss/types/_array.scss +++ b/scss/types/_array.scss @@ -29,3 +29,15 @@ @return $concat-list; } + +@function array-join($list, $sep: ', ') { + $join-string: ''; + + @each $item in $list { + $join-string: $join-string + $sep + $item; + } + + $join-string: str-slice($join-string, str-length($sep) + 1); + + @return $join-string +} diff --git a/scss/variables.scss b/scss/variables.scss index bc95f41..afb1316 100644 --- a/scss/variables.scss +++ b/scss/variables.scss @@ -1 +1,24 @@ $output-bourbon-deprecation-warnings: false !default; + +$columns-default: 12 !default; // grid-system columns default number + +$gutter-default: 1.5rem !default; // grid-system grid gutter default number + +$common-breakpoints: ( + sm: 768px, // small devices + md: 992px, // medium devices + lg: 1200px, // large devices + xl: 1600px, // extra large devices + fhd: 1920px, // full HD devices + qhd: 2560px, // quad HD (2k) devices + uhd: 3840px // ultra HD (4k) devices +) !default; // common-breakpoints used as default for container breakpoints + +$first-column-breakpoint: 320px !default; //first column breakpoint used as default without media queries + +$columns-breakpoints: array-concat(( + sp: $first-column-breakpoint, // common smartphones + ip: 375px, // iphone (since iphone5) + ipp: 414px, // iphone plus (since iphone5) + xs: 576px // extra small devices +), $common-breakpoints) !default; // columns-breakpoints used for media queries and column classes sizes & positions