search

sakamies / postcss-gridlover

Enables using Gridlover sx and gr units in your CSS
MIT License
13 stars 1 forks source link

Calculating incorrectly? #3

Closed custa1200 closed 8 years ago

custa1200 commented 8 years ago 
html {
  --base-font-size: 1rem;
  --base-line-height: 1.5;
  --base-scale-factor: 1.618;
  --base-units: rem;
}

body {
  padding: 0;
  margin: 0;
  font-size: 0sx;
  line-height: 0gr;
}

Outputs as:

html {
  --base-font-size: 16px;
  --base-font-size: 1rem;
  --base-line-height: 1.5;
  --base-scale-factor: 1.618;
  --base-units: rem;
}
body {
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-size: 1rem;
  line-height: 32px;
  line-height: 2rem;
}

But it should only be line height 24px and 1.5rem?

sakamies commented 8 years ago

Well, there's definately a bug in the code here, it shouldn't duplicate css declarations, but in any case you need to always define --base-font-size in px. The calculations should work then. Also since you're using rem or em units, you should add font-size: var(--base-font-size); to your html block so that the grid will snap to pixels correctly.

html {
  --base-font-size: 16px;
  --base-line-height: 1.5;
  --base-scale-factor: 1.618;
  --base-units: rem;
  font-size: var(--base-font-size);
}
body {
  font-size: 0sx;
  line-height: 0gr;
}

I'm also working on a better readme so usage would be a bit clearer. :)

custa1200 commented 8 years ago

This fixed that issue if I set the base font in px. 👍