Hi guys! and thanks for a nice boilerplate! How do you guys create the breakpoints? I tried this
@mixin widths($columns, $breakpoint: null, $important: false) {
//$important: important($important);
// Loop through the number of columns for each denominator of our fractions.
@each $denominator in $columns {
// Begin creating a numerator for our fraction up until we hit the
// denominator.
@for $numerator from 1 through $denominator {
// Build a class in the format `.u-3/4[@]`.
//
.u-#{$numerator}#{$fractions-delimiter}#{$denominator}#{$breakpoint} {
width: ($numerator / $denominator) * 100%;
}
@if ($widths-offsets == true) {
// Build a class in the format `.u-push-1/2[@]`.
.u-push-#{$numerator}#{$fractions-delimiter}#{$denominator}#{$breakpoint} {
position: relative $important;
right: auto $important;
left: ($numerator / $denominator) * 100%;
}
// Build a class in the format `.u-pull-5/6[@]`.
.u-pull-#{$numerator}#{$fractions-delimiter}#{$denominator}#{$breakpoint} {
position: relative $important;
right: ($numerator / $denominator) * 100%;
left: auto $important;
}
}
}
@media only screen and (min-width: $from-small) {
@for $numerator from 1 through $denominator {
.u-#{$numerator}#{$fractions-delimiter}#{$denominator}#{$breakpoint}\@small {
width: ($numerator / $denominator) * 100%;
}
}
}
@media only screen and (min-width: $from-medium) {
@for $numerator from 1 through $denominator {
.u-#{$numerator}#{$fractions-delimiter}#{$denominator}#{$breakpoint}\@medium {
width: ($numerator / $denominator) * 100%;
}
}
}
}
}
It's working, but if I have u-1/2@small and u-1/6@medium it always gonna be "small" that's the first alternative, but if I set it to u-1/6@small and u-1/2@medium it's working
Hi guys! and thanks for a nice boilerplate! How do you guys create the breakpoints? I tried this
It's working, but if I have
u-1/2@small
andu-1/6@medium
it always gonna be "small" that's the first alternative, but if I set it tou-1/6@small
andu-1/2@medium
it's working