breakpoint configuration

currently, the logic generates breakpoints based on the following breakpoint so it seems, that the breakpoint ns which is available in the regular tachyons cannot be produced

I want to mirror the material design breakpoints, which include not only xs, sm, md, lg, xl, but also gt-xs, gt-sm, gt-md, gt-lg (greater-than). They have the same semantic logic as tachyons’ ns, basically only describing the min-width

as for the json config, this could be indicated with <= and/or >=

  "customMedia": [
    { "sm": "600px" },
    { "md": "960px" },
    { "lg": "1280px" },
    { "xl": "1920px" },
    { "gt-xs": ">=600px" },
    { "gt-sm": ">=960px" },
    { "gt-md": ">=1280px" },
    { "gt-lg": ">=1920px" }
  ],

where >=600px would result in screen and min-width(600px) I admit, this does not look nice, but thats only from the top of my head

[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 : )

[johno]

No worries, glad it works! 😸