Paddings not scoped in media queries

[nicooprat]

Hi Nathan,

For now all grid classes have padding-left and padding-right set, regardless of their scope (I mean tablet- or mobile-). So the CSS output looks like this :

.grid-5, .mobile-grid-5, .grid-10, .mobile-grid-10, .grid-15, .mobile-grid-15, .grid-20, .mobile-grid-20, .grid-25, .mobile-grid-25, .grid-30, .mobile-grid-30, .grid-35, .mobile-grid-35, .grid-40, .mobile-grid-40, .grid-45, .mobile-grid-45, .grid-50, .mobile-grid-50, .grid-55, .mobile-grid-55, .grid-60, .mobile-grid-60, .grid-65, .mobile-grid-65, .grid-70, .mobile-grid-70, .grid-75, .mobile-grid-75, .grid-80, .mobile-grid-80, .grid-85, .mobile-grid-85, .grid-90, .mobile-grid-90, .grid-95, .mobile-grid-95, .grid-100, .mobile-grid-100, .grid-33, .mobile-grid-33, .grid-66, .mobile-grid-66, .tablet-grid-5, .tablet-grid-10, .tablet-grid-15, .tablet-grid-20, .tablet-grid-25, .tablet-grid-30, .tablet-grid-35, .tablet-grid-40, .tablet-grid-45, .tablet-grid-50, .tablet-grid-55, .tablet-grid-60, .tablet-grid-65, .tablet-grid-70, .tablet-grid-75, .tablet-grid-80, .tablet-grid-85, .tablet-grid-90, .tablet-grid-95, .tablet-grid-100, .tablet-grid-33, .tablet-grid-66 {
    padding-left: 10px;
    padding-left: 10px;
    ...
}

I understand the need in general use for a grid to have padding by default. But in certain cases, it's not the wanted behavior. For example, I want a grid to be 3_3 on desktop, then 1_2 + 1 + 1 on tablet. I made a quick Pen to show this : http://codepen.io/anon/pen/DLGcm/

As you can see, the problem is that, since tablet-grid-xx have paddings even on desktop or mobile. So when grids of different "scopes" are nested, paddings are doubled.

I know this issue could be reset via (S)CSS, but it would lose all the benefits of this system, as grids would be defined in two different places (HTML & CSS).

I'm thinking of 2 possible solutions :

• Each grid has padding only for its media queries. It means that, if an element has only the tablet-grid-50 class, it won't have any padding for mobile and desktop. For other media queries, the "workaround" would be to add mobile-grid-100 grid-100 for example. A bit verbose, but coherent.
• Create 3 new classes : mobile-grid-parent, tablet-grid-parent and desktop-grid-parent so we could "reset" paddings for specific media queries. A bit less verbose, but certainly less comprehensive too.

What do you think ? Hope I was clear. Thanks.