Round of grid cleanup #45
Conversation
|
@ashley-hebler: One more class to take a look at is https://www.texastribune.org/about/subscribe/ |
| // grid_container => [**l-container**](#container-l-container) <br> | ||
| // grid_padded => [**has-gutter-padding**](/pages/utilities/index.html#padding-has-padding) <br> | ||
| // grid_padded--temp => [**has-temp-gutter-padding**](/pages/utilities/index.html#padding-has-padding) <br> | ||
| // col_adunit300x250 => Removed <br> |
There was a problem hiding this comment.
Just to confirm, this won't break non-story pages that rely on this, right? There are several that do.
There was a problem hiding this comment.
In general there are only a few pages that go all in on this trimmed grid. grid_padded and grid_padded--temp are used on those three pages. I have a secondary PR in /texastribune to fix that once we settle this one.
| @@ -56,4 +58,20 @@ | |||
|
|
|||
| .has-reset-padding { | |||
There was a problem hiding this comment.
Is this for elements that normalize.css fails to remove default user-agent padding from? If not, could we just remove this class?
There was a problem hiding this comment.
Way back when, I needed some padding-less buttons. I thought maybe it'd be helpful to have this for instances where you just want to kill some padding on a component, but maybe we just leave that scoped to the component. I can create a padding-less button variation in that case.
assets/scss/utilities/_spacing.scss
Outdated
| @@ -56,4 +58,20 @@ | |||
|
|
|||
| .has-reset-padding { | |||
| padding: 0; | |||
| } | |||
|
|
|||
| .has-gutter-padding { | |||
There was a problem hiding this comment.
Just a personal opinion, but when I think "gutter," I think about space between columns. This seems like it's more for adding space around an entire element as it relates to the edge of the window, not other elements. But feel free to override me. Regardless, this class will be very useful!
assets/scss/utilities/_spacing.scss
Outdated
| } | ||
| } | ||
|
|
||
| .has-temp-gutter-padding { |
There was a problem hiding this comment.
I never understood what "temp" meant. My guess is Becca intended eventually to remove it. Do you know? If it's a mystery, we might consider renaming.
|
Loving this; see a few notes above. Exciting to see the old grid world start to wither away! |
|
@AndrewGibson27
|
|
@emilyyount, good call on |
|
Chatted with @AndrewGibson27 a bit on slack and went with |
What's this PR do?
A step toward grid cleanup
Classes added (if any)
Classes removed (if any)
Why are we doing this? How does it help us?
Reduction in CSS (a whole 1.73kb, but still ¯_(ツ)_/¯ ) :
How should this be manually tested?
yarn devSee: has-padding
Resize the browser to see the gutter padding growing/shrinking
Bonus new and improved legacy docs/demos (for no good reason, other than comparison):
Does this introduce a breaking change where queso-ui is used in the wild? If so, is there a relevant branch/PR to accompany this release?
It does. We rely on the hide classes in our queso-only pages in the header/footer. We also rely on grid_padded. This PR will remedy that.
TODOs / next steps: