Fixed heading sizes

[pjdufour]

For web applications with large "viewports", such as web maps with sidebars, it would be useful to keep headers, such as h6 fixed at the smaller size instead of activating the media query below.

Could you add an optional selector like .fixed or something to bypass these media queries (to the h elements directly or at body?

@media screen and (min-width: 48em) h6 {
  font-size: 1.5rem;
}

h6 {
    ...
    font-size: 18px;
    font-size: 1.125rem;
    ...
}

[matthewmorek]

@pjdufour We're planning to introduce variable type scale that will work across different media queries automatically, and thus we'll remove individual media queries from headings altogether.

We have also added (although not documented yet) helper classes in v0.13.0, that you can apply to individual elements to override their default behaviour. For example, you can add fs6-lg to h6, and this should override its default font size on lg viewport and use 0.875rem value.

If you're curious on what these helper classes are, check them out here:

• [declarations] https://github.com/wfp/ui/tree/master/scss/css
• [sources] https://github.com/wfp/ui/tree/master/scss/modules