ainsleyclark / mesh

A blazingly fast, versatile, pure CSS open source framework with a modular approach to a responsive grid system and a vast amount of utilities. mesh uses wireframing to show you what it could look like, not what it will look like.
MIT License
36 stars 5 forks source link

Add width-auto, height-auto classes. #46

Open ainsleyclark opened 5 years ago

ainsleyclark commented 5 years ago

Describe the bug Need to add width and height auto classes & at responsive breakpoints.

ainsleyclark commented 5 years ago

New loop in sizing page

@each $property, $abbrev in (width: w, height: h) {
    @each $modifier, $breakpoint in $grid-properties {
        @include create-mediaquery($breakpoint) {
            @each $value in $sizing-properties {
                //Rid of % in $value
                $class-value: str-replace(#{$value}, '%', '');
                .#{$abbrev}#{$modifier}-#{$class-value} {
                    #{$property}: #{$value} !important;
                }
            }
            //Auto classes
            .#{$abbrev}#{$modifier}-auto {
                #{$property}: auto !important;
            }
        }
    }
}
ainsleyclark commented 5 years ago

Add to docs page.