grid system not working with style-fallback.css

smoglica commented 5 years ago

How to reproduce?

In index.html

add the link tag <link rel="stylesheet" href="assets/css/style-fallback.css"> and comment the block condition which checks the CSS custom variables support.
add a simple grid markup (e.g. taken from https://codepen.io/codyhouse/pen/orvKEq) and relative CSS styles.

<div class="parent grid grid-gap-xs">
  <div class="col-1"></div>
  <div class="col-1"></div>
  ...
</div>

What I expect?

After running the dev server (npm run gulp watch) the gird system should be identical to that one which supports CSS variables.

But I found out that there are some problems:

[class*="grid-gap"] margins are not applied. Apparently calc() it's not able to generate the correct output when a variable in this case var(--grid-gap) has also a fallback value (1em).

Screenshot from 2019-09-25 10-25-52

.grid-gap-{size} will not change the margins of the grid items and also the [class*="grid-gap"] will not benefit the changes of the var(--grid-gap) from the modifiers.

`style.css` vs `style-fallback.css` outputs

style-fallback.css

When selecting .grid.grid-gap-xs element.

Screenshot from 2019-09-25 11-46-24

.grid-gap-{size} modifiers are not event generated as class.

style.css (supports CSS variables)

When selecting .grid.grid-gap-xs element.

Screenshot from 2019-09-25 11-42-37

As we can see here the var(--grid-gap) it's taken in consideration which reevaluates the size of the gap for the elements which are using it.

claudia-romano commented 4 years ago

Hi there, thanks for the heads up. We pushed a new version of the framework (2.1.6) where we fixed the issue with the calc function. It will now set the margin to -1em.

About the --grid-gap variable: IE 11 and below do not support CSS Variables, for this reason, we set the fallback to be 1em for the grid margin (regardless of the grid-gap-* function).

Let me know if you have any questions.

smoglica commented 4 years ago

Thank you! So if I understood correctly, in the fallback styles you don't wont to support different gird gap sizes .grid-gap--{size} but keeping always a margin bottom and left of 1em, it's right?

claudia-romano commented 4 years ago

Correct! This way, your content on older browsers (like IE11) is still perfectly accessible: you can create your grid and decide whether you need a gap or not. On modern browsers (supporting CSS variables), you have the option to customize the gap using the grid-gap-{size} classes.

codyhouse / codyhouse-framework