Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // sass-lint:disable no-important no-vendor-prefixes
- // Grid Variables
- $cols: 12 !default;
- $gutter: 50px !default;
- $margins: 50px !default;
- // Breakpoints
- $breakpoints: (
- (l, 1199.98px, 100%, 1),
- (m, 991.98px, 100%, 1),
- (s, 767.98px, 100%, 2),
- (x, 575.98px, 100%, 3),
- (no, 0, 100%, 3)
- ) !default;
- // Animation
- $grid-animation: all 1s;
- // Globals
- html {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
- }
- body {
- box-sizing: inherit;
- margin: 0;
- padding: 0;
- }
- *,
- *::after,
- *::before {
- box-sizing: inherit;
- }
- * {
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
- font: inherit;
- font-kerning: normal;
- }
- // Grid
- .container {
- background-color: #0ff;
- display: block;
- max-width: 100%;
- padding: 0 $margins;
- position: relative;
- width: 100%;
- }
- .fluid {
- max-width: 100% !important;
- width: 100% !important;
- }
- .r {
- background-color: #eff;
- display: grid !important;
- grid-gap: $gutter;
- grid-template-columns: repeat($cols, 1fr);
- position: relative;
- transition: $grid-animation;
- }
- .nest {
- background-color: #0ff;
- display: grid !important;
- grid-gap: $gutter;
- grid-template-columns: repeat($cols, 1fr);
- position: relative;
- transition: $grid-animation;
- }
- [class*='c-'] {
- background-color: #faebd7;
- grid-column: span $cols;
- position: relative;
- }
- @for $i from 1 through $cols {
- .c-#{$i} {
- grid-column: span $i;
- }
- }
- .top {
- align-items: start;
- }
- .middle {
- align-items: center;
- }
- .bottom {
- align-items: end;
- }
- .left {
- justify-items: start;
- }
- .center {
- justify-items: center;
- }
- .right {
- justify-items: end;
- }
- .stretch {
- align-items: stretch;
- justify-items: stretch;
- }
- .gap-no {
- grid-gap: 0;
- margin-bottom: 0;
- }
- .gap-c-no {
- grid-column-gap: 0;
- }
- .gap-r-no {
- grid-row-gap: 0;
- margin-bottom: 0;
- }
- .first {
- order: 1;
- }
- .last {
- order: $cols;
- }
- .hide {
- display: none !important;
- }
- .show {
- display: initial !important;
- }
- @each $name, $size, $container, $divide in $breakpoints {
- @media only screen and (max-width: $size) {
- .container {
- max-width: $container;
- padding: 0 $margins / $divide;
- width: $container;
- }
- .full {
- max-width: 100% !important;
- width: 100% !important;
- }
- .r {
- grid-gap: $gutter / $divide;
- }
- .nest {
- grid-gap: $gutter / $divide;
- }
- @for $i from 1 through $cols {
- .#{$name}#{$i} {
- grid-column: span $i;
- }
- }
- .left-#{$name} {
- justify-items: start;
- }
- .center-#{$name} {
- justify-items: center;
- }
- .right-#{$name} {
- justify-items: end;
- }
- .first-#{$name} {
- order: 1;
- }
- .last-#{$name} {
- order: $cols;
- }
- .hide-#{$name} {
- display: none !important;
- }
- .show-#{$name} {
- display: initial !important;
- }
- }
- }
- // sass-lint:disable no-important no-vendor-prefixes
- // Grid Variables
- $cols: 12 !default;
- $gutter: 50px !default;
- $margins: 50px !default;
- // Breakpoints
- $breakpoints: (
- (l, 1199.98px, 100%, 1),
- (m, 991.98px, 100%, 1),
- (s, 767.98px, 100%, 2),
- (x, 575.98px, 100%, 3),
- (no, 0, 100%, 3)
- ) !default;
- @for $i from 1 through $cols {
- .c-#{$i} {
- width: calc(#{percentage($i / $cols)} - #{$gutter / 2}) !important;
- }
- }
- @mixin blueprint-fallback {
- .r,
- .nest {
- display: block !important;
- &::after {
- content: ' ';
- display: block;
- width: 100%;
- }
- }
- .r,
- .next {
- display: block !important;
- width: 100% !important;
- }
- .r > *,
- .nest > * {
- display: block !important;
- float: left !important;
- margin: 0 #{$gutter / 2} #{$gutter / 2} 0;
- &:last-child {
- margin-right: 0;
- }
- }
- @for $i from 1 through $cols {
- .r > .c-#{$i},
- .r .c-#{$i} > *,
- .nest > .c-#{$i},
- .nest .c-#{$i} > * {
- width: calc(#{percentage($i / $cols)} - #{$gutter / 2}) !important;
- }
- }
- @each $name, $size, $container, $divide in $breakpoints {
- @media only screen and (max-width: $size) {
- .show-#{$name} {
- display: block !important;
- }
- }
- }
- }
- // ie11
- @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
- @include blueprint-fallback()
- }
- @supports not (display: grid) {
- @include blueprint-fallback()
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement