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
merged 1 commit into from Apr 14, 2017

Conversation

Projects
None yet
2 participants
@CosAnca
Contributor

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:
current-gird-visual-chrome

to this:
updated-grid-visual-chrome

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.

@whmii

This comment has been minimized.

Show comment
Hide comment
@whmii

whmii Mar 28, 2017

Member

@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.

Member

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