Responsive using root font-size

[tttimur]

Maybe something like

var css = gr8({
  responsiveRoot: true,
  rootSizes: {
    xl: '250%',
    lg: '200%',
    md: '100%',
    sm: '62.5%'
  }
})

Which would return

@media (max-width: 1439px) {
  html{font-size: 250%}
}

@media (max-width: 1260px) {
  html{font-size: 200%}
}

@media (max-width: 1023px) {
  html{font-size: 100%}
}

@media (max-width: 767px) {
  html{font-size: 62.5%}
}

[jongacnik]

@siiiick thanks for the note! Working on some gr8 updates over the next week-ish, will keep this in mind. One thing I wonder is if the overhead of needing to drop those queries in manually is enough to warrant it part of the lib?

var css = gr8()

var responsiveRoot = `
  @media (max-width: 1439px) {
    html{font-size: 250%}
  }

  @media (max-width: 1260px) {
    html{font-size: 200%}
  }

  @media (max-width: 1023px) {
    html{font-size: 100%}
  }

  @media (max-width: 767px) {
    html{font-size: 62.5%}
  }
`

var mycss = responsiveRoot + css.toString()

[tttimur]

yea thats exactly what I'm doing right now, maybe I'll fork it and see if I can do something

[jongacnik]

feel free, but just as heads up v3 will have some api changes, details soon

[tttimur]

Good call, thanks!