fewagency / boilerplate-pattern-library

A boilerplate for a PHP project with a macropiche pattern-library
1 stars 1 forks source link

Fix superscript when baseline flow has been reset #16

Closed bjuppa closed 7 years ago

bjuppa commented 7 years ago

<sup> tags within a flow-baseline-rhythm-reset() context are broken because the reset does

position: initial;
top: initial;

and the <sup> tag needs to keep it's position: relative; and top: -0.5em;

This could potentially be a problem in <sub> too, but I have not confirmed that.

It could be fixed using !important for sup and sub in _typography.scss but I'd like to see a cleaner solution!

bjuppa commented 7 years ago

Maybe this is not a problem... the reset mixin only resets position on the specified element... not it's children, so any <sub> or <sup> within may be left unharmed.

https://github.com/fewagency/boilerplate-pattern-library/blob/master/resources/assets/sass/modules/_flow-rhythm.scss#L19

bjuppa commented 7 years ago

...it is still a problem because the flow-baseline-rhythm mixin does reset on * within it which targets any <sub> and <sub> however deeply nested.

https://github.com/fewagency/boilerplate-pattern-library/blob/master/resources/assets/sass/modules/_flow-rhythm.scss#L31

bjuppa commented 7 years ago

What if we let the flow-baseline-rhythm mixin do the reset on specific elements within, like <p>? Or at least not on some common inline elements like <small>, <sub>, <sup>, <span> etc.

bjuppa commented 7 years ago

I suggest we let the flow-baseline-rhythm mixin do reset on only these elements within: p, blockquote, address, li, dt, dd

...and then encourage manual use of the flow-baseline-rhythm-reset mixin on other elements within when using flow-baseline-rhythm!

(also add address to the default baseline block elements in _typogtaphy.scss)