Skip to content
This repository has been archived by the owner. It is now read-only.

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

Merged
merged 1 commit into from Apr 14, 2017

Conversation

@CosAnca
Copy link
Contributor

@CosAnca 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
Copy link
Contributor

@whmii 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
1 check passed
hound No violations found. Woof!
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

2 participants