Remove grid gutter overrides, don't use grid for form layout

dobtco / dvl-core

Base styles for the DOBT View Layer.

https://design.dobt.co/

1 stars 1 forks source link

Remove grid gutter overrides, don't use grid for form layout #59

Closed jrubenoff closed 9 years ago

jrubenoff commented 9 years ago

Refactors the grid to use percentage-based gutters for proportionally consistent styles.

To enforce consistency even further, I removed all of our gutter overrides, and modified the styles everywhere we use them. When you start using the grid within the page to lay out components, it's very difficult to maintain consistent spacing.

If we really want to keep them in, we can put the gutter overrides back, but it'll triple the size of the stylesheet since we're using absolute margins instead of padding within the container.

ajb commented 9 years ago

Thanks for doing this!

A couple of todos before merging:

[ ] It looks like nested grids aren't working? http://take.ms/XKNQP
[ ] Can you add an example of overriding the gutters? http://take.ms/jQxID I'm fine to keep the gutter overrides out, just need an example of how to best override them on a per-component basis. (You can add the overrides to preview.scss)

jrubenoff commented 9 years ago

So, nested grids no longer exist. Instead, you just set widths manually on each component. This can actually save a ton of markup... see this diff (one, two) for an example.

At first this might sound annoying, but it's not like the old convention was more consistent... .four_columns in a nested grid isn't the same as .four_columns for the entire page. What you're really saying is, "I want all these components to be X width."

Same reasoning goes for gutter overrides. You would just manually set a margin-right on each component, based on what looks best. In respondent view, I've been specifying component spacing with the $rhythm and $fontSize variables for greater consistency. I plan to add similar variables to dvl-core as we redesign it.

ajb commented 9 years ago

:+1: on all of that, saving markup and adding consistency are good goals.

the stuff with the margin in https://github.com/dobtco/screendoor-v2/pull/1582/files#r26613908 is going to be a deal-breaker, though, since it actively detracts from these goals by making us add un-semantic classes and wrapper divs in a lot more places.

thoughts?

jrubenoff commented 9 years ago

Made some changes, please review.

ajb commented 9 years ago

sweet! will review first thing tomorrow.

On Tuesday, March 17, 2015, Josh Rubenoff notifications@github.com wrote:

Made some changes, please review.

— Reply to this email directly or view it on GitHub https://github.com/dobtco/dvl-core/pull/59#issuecomment-82662455.

Adam Becker (951) 9-BECKER @AdamJacobBecker

ajb commented 9 years ago

Before I review, can you re-state the desired outcome of this PR? I know that we're not gonna create something 100% perfect in every way, but what are we trying to accomplish with this PR?

ajb commented 9 years ago

Re-added variables and removed gutter overrides. Merging!