breakpoint configuration

[tachyons-css]

breakpoint configuration

[johno]

That's a great idea. I've gone ahead and spiked out an implementation (#66) that also adds further customization allowing you to pass an object instead of a media query value for further configurability:

customMedia: [
     { "sm": "600px" },
    { "md": "960px" },
    { "lg": "1280px" },
    { "xl": "1920px" },
    { "gt-xs": { "value": "600px", "minWidth": true } },
    { "gt-sm":  { "value": "960px", "minWidth": true }  },
    { "gt-md":  { "value": "1280px", "minWidth": true }  },
    { "gt-lg":  { "value": "1920px", "minWidth": true, "prefix": true, "delimiter": "@" }  }
]

The last mq options make the class naming become db@gt-lg for that breakpoint : )

[ctaepper]

while you're at it, you could also add maxWidth - although that does not really target mobile-first

[johno]

Done < 3

[ctaepper]

@johnotander works great!

except one thing:

  "customMedia": [
    { "xl": "1920px" },
    { "gt-lg": {"value": "1920px", "minWidth": true }}
  ],

the 2nd breakpoint doesn't get generated. i haven't looked into the code, but I assume it has something todo with both resulting in screen and (min-width: 1920px)

I am aware that it doesn't really make sense to have 2 identical breakpoints... the semantic meaning though is different. bottom line: I'm unsure if this is a bug or a feature

[johno]

I'll look into it to see what's going on today. Definitely think its a bug since they're named differently.

[johno]

Hey @ctaepper,

Just ran the generator with the xl and gt-lg media queries and they both seem to be generated for me. Are you sure the second isn't being generated?

[ctaepper]

I'm sorry, I have more breakpoints and I didn't realize, that the 2 breakpoints got merged together within one single media query

[johno]

No worries, glad it works! 😸