ch4o5/locomotive-boilerplate
Template
1
0
Fork 0
mirror of https://github.com/locomotivemtl/locomotive-boilerplate.git synced 2026-01-15 00:55:08 +08:00
Code Issues Projects Releases Wiki Activity

Add css grid system base styles

Browse Source
This commit is contained in:
Deven Caron
2022-03-24 17:54:53 -04:00
parent ad4a1c7d47
commit d0a075ff24
6 changed files with 342 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
assets/styles/utilities/_grid-column.scss Normal file
View File

@@ -0,0 +1,63 @@
// ==========================================================================
// Tools / Grid Columns
// ==========================================================================
//
// Grid layout system.
//
// This tool generates columns for all needed media queries.
// Unused classes will be purge by the css post-processor.
//
$colsMax: $base-column-nb + 1;
$breakpoints: (
"null" null,
"fromTiny" "from-tiny",
"fromSmall" "from-small",
"fromMedium" "from-medium",
"fromLarge" "from-large",
"fromBig" "from-big"
) !default;
@each $breakpoint-namespace, $breakpoint in $breakpoints {
@for $fromIndex from 1 through $colsMax {
@for $toIndex from 1 through $colsMax {
@if $breakpoint == null {
.u-gc-#{$fromIndex}\/#{$toIndex} {
grid-column-start: #{$fromIndex};
grid-column-end: #{$toIndex};
}
} @else {
.u-gc-#{$fromIndex}\/#{$toIndex}\@#{$breakpoint} {
@if $breakpoint-namespace == fromTiny {
@media (min-width: $from-tiny) {
grid-column-start: #{$fromIndex};
grid-column-end: #{$toIndex};
}
} @else if $breakpoint-namespace == fromSmall {
@media (min-width: $from-small) {
grid-column-start: #{$fromIndex};
grid-column-end: #{$toIndex};
}
} @else if $breakpoint-namespace == fromMedium {
@media (min-width: $from-medium) {
grid-column-start: #{$fromIndex};
grid-column-end: #{$toIndex};
}
} @else if $breakpoint-namespace == fromLarge {
@media (min-width: $from-large) {
grid-column-start: #{$fromIndex};
grid-column-end: #{$toIndex};
}
} @else if $breakpoint-namespace == fromBig {
@media (min-width: $from-big) {
grid-column-start: #{$fromIndex};
grid-column-end: #{$toIndex};
}
}
}
}
}
}
}