search

jongacnik / gr8

Customizable, functional css utilities
MIT License
174 stars 11 forks source link

Per breakpoint values #24

Open jongacnik opened 6 years ago

jongacnik commented 6 years ago

An idea been toying with is per-breakpoint values. This could be handy when doing something like font sizes for a site. Not sure if this would be a convoluted addition or not, conceptually goes against single purpose classes a bit... pseudo code:

fontSize = {
  1: {
    *: 6,
    md: 5,
    lg: 4
  },
  2: {
    *: 3,
    md: 2,
    lg: 1
  }
}
.fs1 { font-size: 6rem }
.fs2 { font-size: 3rem }

@media (min-width: 1024px) {
  .fs1 { font-size: 5rem }
  .fs2 { font-size: 2rem }
}

@media (min-width: 1280px) {
  .fs1 { font-size: 4rem }
  .fs2 { font-size: 1rem }
}
sonn-gamm commented 6 years ago

I'd love this! Though right now it's not too much hassle handling all these "extra" properties as separate from the defaults provided by gr8, and make custom gr8-utils rules.