Cut down on media queries generated by @modular-spacing

[yvonnetangsu]

READY FOR REVIEW

Summary

• @modular-spacing use a for loop to generate media queries for every breakpoint so total of 6 queries per element we use the mixin on.
• xs and sm shared the same base value, md, lg, xl shared another one, so we really only need 3 media queries for each element that uses @modular-spacing
• Propose one more variable map for media queries for use with modular-spacing so we can cut the number of queries from 6 to 3 for every use.

Needed By (Date)

• Whenever

Urgency

• Not Urgent

Steps to Test

Look at the "Files changed" tabs here on this GitHub page. You should be able to see in decanter.css the deleted media queries that are not really needed.

OR

1. Pull this branch and run grunt styleguide
2. Look at .su-global-footer in decanter.css - it should now only have 3 media queries for the padding-top and padding-bottom instead of 6.

Affected Projects or Products

• Decanter

[yvonnetangsu]

@sherakama @josephgknox Yay or nay? Not a big deal either way, but as we use @modular-spacing more and more, this could cut down on some redundancy.

[sherakama]

Unfortunately, as much as I like this optimization it breaks the ability for one to modify the grid-system easily. This is creating a new grid system with only 3 values where if I had made changes to the $grid-media global I would have expected it to have cascaded everywhere. I don't think we can make this assumption.

[yvonnetangsu]

Unfortunately, as much as I like this optimization it breaks the ability for one to modify the grid-system easily. This is creating a new grid system with only 3 values where if I had made changes to the $grid-media global I would have expected it to have cascaded everywhere. I don't think we can make this assumption.

Aww...that's ok. Worth a try 😃 . Do you think there's any other way we can achieve the same results? Manually writing out the 3 queries in the @modular-spacing mixin maybe or too high maintenance?

[sherakama]

Perhaps you could calculate the result value before outputting the media query and compare it to the previous value?

[yvonnetangsu]

Perhaps you could calculate the result value before outputting the media query and compare it to the previous value?

What do you think, @sherakama ? I have it retrieve current breakpoint's modular-spacing base and compare to the one of the previous breakpoint, and write output media query only if they're not the same (and for the first breakpoint also). It generates the same smaller CSS output with the 3 media query now.

[sherakama]

Thanks for the revision. This looks good to me.

During my testing I modified the grid-media array and broke the sass compiler somewhere else. So we have a bug in our code that doesn't allow for changing the grid system.

Let me create a ticket for that debug as this is GTG.

[yvonnetangsu]

Thanks for the review and the tweaks, @sherakama ! Feel free to merge if you think it's ready - depending on if you think @josephgknox needs to take a second look as well. I know reviewing takes time so don't want to request additional reviews if not necessary 😺

I'll make changes to the other branches as you suggested on Monday and thanks for sending that Zoom invite.

[josephgknox]

Thank you two (again) for the hard work on this one!

[josephgknox]

G2G!