typeplate/typeplate.github.io

margin-bottom ie8

africanmatt opened this issue · 1 comments

ie8 doesn't support rem's. The font-size has been solved with @mixin type-scale, but the margin bottom has not.

I fixed it by editing @function measure-margin:

@function measure-margin($scale, $measure, $value, $base) {
    //@return ($measure/$scale)#{$value};
    @return (($measure/$scale)*$base)#{px};
}

Perhaps there is a better way to do this?

@africanmatt
Ok this is fixed in v1.1.3. I adjusted the commented line below to output a px fallback when rem is used as a value. You can get the code from our Bower repo (https://github.com/typeplate/bower) if you want a jump start, but it should be up on the site shortly as well.

@mixin type-scale($scale, $base, $value, $measure:"") {

    @if $value == rem {

        font-size: $scale#{px};
    }

    font-size: context-calc($scale, $base, $value);

    @if $measure != "" {

        @if $value == rem {
            margin-bottom: measure-margin($scale, $measure, $value: px); // this line outputs your px fallback
        }

        margin-bottom: measure-margin($scale, $measure, $value);
    }
}