Skip to content

Commit e6d8972

Browse files
committed
Add dynamically created column widths with [bs-width]
1 parent b47c252 commit e6d8972

File tree

2 files changed

+55
-0
lines changed

2 files changed

+55
-0
lines changed

scss/mixins/_breakpoints.scss

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,21 @@
6262
}
6363
}
6464

65+
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
66+
// Makes the @content apply to the given breakpoint and wider for all [bs-width] specified widths.
67+
// This allows the developer to "override" the behaviour of a container's columns by applying this data attribute.
68+
@mixin media-breakpoint-up-dynamic($name, $breakpoints: $grid-breakpoints) {
69+
$min: breakpoint-min($name, $breakpoints);
70+
@if $min {
71+
// Haha, it's a pun.
72+
[bs-width="#{$name}"] > .row > {
73+
@content;
74+
}
75+
} @else {
76+
@content;
77+
}
78+
}
79+
6580
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
6681
// Makes the @content apply to the given breakpoint and narrower.
6782
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {

scss/mixins/_grid-framework.scss

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,4 +62,44 @@
6262
}
6363
}
6464
}
65+
66+
@each $breakpoint in map-keys($breakpoints) {
67+
$infix: breakpoint-infix($breakpoint, $breakpoints);
68+
69+
@include media-breakpoint-up-dynamic($breakpoint, $breakpoints) {
70+
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
71+
.col#{$infix} {
72+
flex-basis: 0;
73+
flex-grow: 1;
74+
max-width: 100%;
75+
}
76+
.col#{$infix}-auto {
77+
flex: 0 0 auto;
78+
width: auto;
79+
}
80+
81+
@for $i from 1 through $columns {
82+
.col#{$infix}-#{$i} {
83+
@include make-col($i, $columns);
84+
}
85+
}
86+
87+
@each $modifier in (pull, push) {
88+
@for $i from 0 through $columns {
89+
.#{$modifier}#{$infix}-#{$i} {
90+
@include make-col-modifier($modifier, $i, $columns)
91+
}
92+
}
93+
}
94+
95+
// `$columns - 1` because offsetting by the width of an entire row isn't possible
96+
@for $i from 0 through ($columns - 1) {
97+
@if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-xs-0
98+
.offset#{$infix}-#{$i} {
99+
@include make-col-modifier(offset, $i, $columns)
100+
}
101+
}
102+
}
103+
}
104+
}
65105
}

0 commit comments

Comments
 (0)