locomotivemtl / locomotive-boilerplate

🚂 Front-end boilerplate for projects by Locomotive.
https://locomotivemtl-boilerplate.vercel.app/
MIT License
459 stars 71 forks source link

Breakpoints #65

Closed wezzou1 closed 4 years ago

wezzou1 commented 5 years ago

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