New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Simplify grid-visual for consistent cross-browser behaviour #569

merged 1 commit into from Apr 14, 2017


None yet
2 participants

CosAnca commented Mar 24, 2017

The gradient style of grid-visual behaves inconsistent across browsers and currently has major rendering issues on Chrome. In the same time having the gutters painted creates a bit of confusion, where I think users expect the paint to be applied to the columns. (mainly when coming from a design tool like Sketch or Illustrator where the grid layout highlights the columns and not the gutters).

This mainly solves #539 but in the same time updates the grid-visual to a column-based painting rather than a gutter-based painting.

We basically go from this:

to this:

This update simplifies the grid-visual mixin by introducing the repeating-linear-gradient(...) property which allows us to consider the width of only a single column, instead of looping through each grid-column to create the linear-gradient(...). Also the calc() function has better cross browser integration and consistency when used within the repeating-linear-gradient property.


This comment has been minimized.


whmii commented Mar 28, 2017

@CosminAnca so… I feel silly. I didn't even know repeating-linear-gradient was a thing! This is very cool. I will test it out tonight.

@whmii whmii merged commit 2d645ef into thoughtbot:master Apr 14, 2017

1 check passed

hound No violations found. Woof!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment