thoughtbot / bitters

Add a dash of pre-defined style to your Bourbon.
https://thoughtbot.com
MIT License
1.39k stars 142 forks source link

line-height missing em #221

Closed jjmulenex closed 8 years ago

jjmulenex commented 8 years ago

So the processed css is missing the "em" for the default processed bitters scss

example:

body {
  color: #333;
  font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  font-size: 1em;
  line-height: 1.5; }

I have attached the css generated. app copy.css.txt

Thanks Jeremy

whmii commented 8 years ago

This is intended. line-height does not require a unit (and it is generally preferred to not have one).

See: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#Prefer_unitless_numbers_for_line-height_values

jjmulenex commented 8 years ago

interesting when setting em as a value type there is a huge difference in display. So when using refills with the article snippets and dropping the the "em" the trailing carrot drops below the base line. [image: Screen Shot 2016-02-16 at 3.48.29 PM.png] I can load the site so you can see the problem across your products, which I love btw.

thanks Jeremy

On Tue, Feb 16, 2016 at 3:36 PM Will H McMahan notifications@github.com wrote:

This is intended. line-height does not require a unit (and it is generally preferred to not have one).

See: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#Prefer_unitless_numbers_for_line-height_values

— Reply to this email directly or view it on GitHub https://github.com/thoughtbot/bitters/issues/221#issuecomment-184883685.

jjmulenex commented 8 years ago

after reading: https://css-tricks.com/almanac/properties/l/line-height/ I see what you were intending. I guess the override is refills needs to be more specific.

thanks again. jeremy

On Tue, Feb 16, 2016 at 3:50 PM Jeremy Mulenex jeremy@aboutjm.com wrote:

interesting when setting em as a value type there is a huge difference in display. So when using refills with the article snippets and dropping the the "em" the trailing carrot drops below the base line. [image: Screen Shot 2016-02-16 at 3.48.29 PM.png] I can load the site so you can see the problem across your products, which I love btw.

thanks Jeremy

On Tue, Feb 16, 2016 at 3:36 PM Will H McMahan notifications@github.com wrote:

This is intended. line-height does not require a unit (and it is generally preferred to not have one).

See: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#Prefer_unitless_numbers_for_line-height_values

— Reply to this email directly or view it on GitHub https://github.com/thoughtbot/bitters/issues/221#issuecomment-184883685 .

tysongach commented 8 years ago

@poedenon I don’t think your screenshot made it to GitHub, can you re-post so we have a better sense of the issue?

If Refills is using a unit in line-height values, that’s a bug and we should probably remove those.

jjmulenex commented 8 years ago

Here is the screenshot

screen shot 2016-02-16 at 3 48 29 pm
whmii commented 8 years ago

@jjmulenex Yep, it also looks like the "Read More >" is display: inline-block and not just display: inline. You may have better luck just trying display: inline on the link. Alternatively you can mess with vertical-align: baseline which should be helpful… probably.

whmii commented 8 years ago

seems resolved. reopen if issue is continued