typeplate/typeplate.github.io

IE7-8 Boogie Men

Closed this issue · 7 comments

grayghostvisuals commented

IE7

  • Logo Header Font Size
  • Overflow-y scroll bar on site
  • Code Block bg color
  • Code block demo code exploding from container
  • Stats Tabs layout as a single list
  • Oddly enough the headers have a type scale on the demo but not the main site

IE8

  • Logo Header Font Size
  • Oddly enough the headers have a type scale on the demo but not the main site
  • Code Block bg color
caycefischer commented

Oddly enough the headers have a type scale on the demo but not on the main site

Might be because of this: be94a6b

grayghostvisuals commented

Why the p tags? Am I missing something here?

caycefischer commented

Why the IE bug? I'd wager because IE doesn't support rem units and we haven't put in a fallback yet.

Edit: Yes, I just tested and none of the elements using rem values are showing up in the sizes they're supposed to. Dang

grayghostvisuals commented

As far as the rem thing goes they only work for IE9 and above so obviously < IE8 won't support rem so you would need a pixel fallback or ems.

Secondly, why the <p> tags bro?

caycefischer commented

It's a tad pedantic, but the example is a figure—an example illustrating our point—it's not semantic structure that's part of our actual page. That's why we have the .tera, .mega, .alpha, .beta classes right, so we can make stuff that looks like a header but isn't one structurally.

Thus, the p tags.

grayghostvisuals commented

I think what I will do is modify our @mixin for modular scale to include pixel fall backs and offer people rems by default. And the <p> tags I guess makes sense and as long as it is semantic then god speed.

Modular Scale Mixin with pixel fallback

@mixin modular-scale($scale, $base, $value) {
  font-size: ($scale/$base) * $base#{px};
  font-size: calc-modular-scale($scale, $base, $value);
}
grayghostvisuals commented

closing this for now as things are moving too fast with changes still to monitor this 👊