Make padding less specific for easier override

[unRARed]

When pairing .unit with another class, it seems strange to need to walk in through .grid in order to override padding.

[cobyism]

:heart: Thanks for the pull request!

I’m definitely open to this. For the sake of clarity though, could you explain the kind of situation you’re running into in a bit more detail (i.e. how would changing this alter the CSS you’d have to write)? Also, would you not also need to change the selectors for the outer gutters and also the reponsive section though? or am I misunderstanding the problem? :persevere:

[unRARed]

Hi Coby, I wanted to change those as well but I chose the path of least resistance. =) The problem is having to walk in through .grid when altering padding on an element having .unit and .something-else. Maybe the padding could be conditional with a modifier on the parent? On Mar 5, 2015 1:42 AM, "Coby Chapple" notifications@github.com wrote:

Thanks for the pull request!

I’m definitely open to this. For the sake of clarity though, could you explain the kind of situation you’re running into in a bit more detail (i.e. how would changing this alter the CSS you’d have to write)? Also, would you not also need to change the selectors for the outer gutters and also the reponsive section though? or am I misunderstanding the problem?

— Reply to this email directly or view it on GitHub.

[cobyism]

The problem is having to walk in through .grid when altering padding on an element having .unit and .something-else. Maybe the padding could be conditional with a modifier on the parent?

Does the .no-gutters modifier do what you’re after? If not, you could always just duplicate that modifier class and change the padding value to what you want, which would give you your own modifier class without needing any changes to gridism’s CSS. For example:

@import "gridism.css";

.custom-padding .unit,
.unit.custom-padding {
  padding: 123rem !important;
}

Then you could apply it to a whole .grid:

<div class="grid custom-padding">
  <div class="unit half">…</div>
  <div class="unit half">…</div>
</div>

Or just specific .units:

<div class="grid">
  <div class="unit half">…</div>
  <div class="unit half custom-padding">…</div>
</div>

[unRARed]

Would it be better instead to have the gutters only display when a modifier is on the parent .grid div?

[unRARed]

So .unit divs via .grid .unit have no padding added, but .unit divs via .grid.grid--guttered .unit would have padding.

[cobyism]

Would it be better instead to have the gutters only display when a modifier is on the parent .grid div? So .unit divs via .grid .unit have no padding added, but .unit divs via .grid.grid--guttered .unit would have padding.

That’s one option, however that’s not what I want gridism to be. My goal is for the default to just work, in most situations, for most people (i.e. regardless of technical proficiency). Most of the time people need some spacing between grid units, so I’d rather that be opt-out (like the .no-gutters class) than opt-in.

If you want complete control, if you want things to be more semantic, or if you want things to be more modular (think BEM or SMACSS), then gridism is not the right choice for your projects. I completely agree with the arguments for these things, however not everyone is proficient enough with CSS to understand those issues. It’s important to me that there are tools out there that don’t pursue technical elegance at the expense of practicality and approachability, so I’m keeping gridism focused on just the absolute basics, and leaving customisations as an exercise for the reader. For that reason, I suggest that you create your own modifier class(es) for your custom padding as per my comment above.