Adding different gutter styles like "before", "split", and "after"

[lozandier]

What about other gutter-styles such as before, split, after, & padding? That's something that would be valuable to point out for Grid enthusiasts in the comparison table….

I suspect it's a necessary con perhaps for "real gutters", but seems like something that needs to be pointed out compared to Grid systems that give you that option such as Susy.

Also Singularitygs may be worthwhile to point out.

[mi2oon]

👍

[tbredin]

+1, would love to have this option, would be a great enhancement.

For example having a split or padding option means we no longer need to manage cycle, which would make things simpler, imho. Keeping track of cycle (and overriding it with media queries) can quickly become messy

[sdale-fevo]

+1

[lozandier]

I'd say a way that leverages CSS variables (or similar to it to be
upgradeable later).

Susy would be a good inspiration on how to handle multiple gutter styles in
general.

Grid fanatics find such options in a grid tool grid nirvana, enabling them
to yield to content's instrinsic characteristics a lot easier to make a
content-first grid

On Friday, January 8, 2016, sdale-fevo [email protected] wrote:

+1

—
Reply to this email directly or view it on GitHub
#161 (comment).

Kevin Lozandier
[email protected] [email protected]

[corysimmons]

@lozandier So basically give the option to have the grid be a padding-based grid? What is all that before, split, after stuff?

[lozandier]

Those are traditional types of gutters styles grid enthusiasts can
prefer—either because of their mental models of creating content-first
grids or because of the nature of the content the grid must be made for.

Most generic (if not boring) 12 column grids from the likes of Bootstrap
use after, Foundation uses split gutter styles to enable less need to
track first & last columns, and etc.…

On Fri, Jan 8, 2016 at 2:28 PM, Cory Simmons [email protected]
wrote:

@lozandier https://github.com/lozandier So basically give the option to
have the grid be a padding-based grid? What is all that before, split,
after stuff?

—
Reply to this email directly or view it on GitHub
#161 (comment).

Kevin Lozandier
[email protected] [email protected]

[corysimmons]

I still don't understand what makes an after grid an after grid, or a split grid a split grid. :(

[peterramsing]

I want to be sure that Lost hones in on what it does best and make it better and fix issues before adding more features or syntax. Let's keep this discussion going but am going to put this on hold for now. So, not ignoring just focusing. I really appreciate you, @lozandier for bringing this up. Thanks!

[corysimmons]

I think that's a good idea. In the meantime I'd love to learn more about these different options. @lozandier You say Susy has all these options?

[sdale-fevo]

@corysimmons see here, good explanations + viz's : http://www.zell-weekeat.com/susy-gutter-positions/

[corysimmons]

@sdale-fevo Thanks for this. Got it.

@lozandier I'm not sure how I feel about this. Why would we want to create multiple ways for people to create the same grid? Seems like a recipe for teams butting heads.

If you need the split option, Lost provides something similar to support masonry: https://github.com/peterramsing/lost#lost-masonry-wrap

That said, this would be a pretty easy feature to add if enough people want it. My vote is against giving people multiple ways because I think it makes the system less uniform for no benefit other than preference.

[lozandier]

@corysimmons Hey, I haven't been available much the past two days (the drawbacks of working 7 day work days for a campaign unfortunately).

Thanks @sdale-fevo for helping Cory out (being a person that helped with feedback on the 2nd edition of the very book the source material comes from, I also think this is a good reference towards understanding different gutter styles).

Why different gutter styles are of value

Anyhow, having such different gutter options isn't really much about a team's —or even a user's—preferences, but how to craft an overall grid and sub-grids to conform to accommodating the content.

This includes capitalizing on previous efforts doing so with initial grid work for the content that may now need to be differed from within reason with components & variants of the grid as CSS authors see fit.

Depending on the use case the site will be used and its content, it can be desirable to use split gutter styles for the overall layout, but inside gutter styles with different ratios with gutters still based on the original grid.

This versatilbity enables grids to avoid classic grid problems such as 7s; a good article about this sort of stuff—especially to truly make the most out of asymmetrical grids—is an article called "Content-out Layout"

Furthermore, for those that don't create content-first grid options outside of the Web¹ , It's often a forgotten art on sub-grids (grids within grids) being made accommodating the needs of the content with different gutter styles that still conform to the thoughtful calculations an author/team made with the outer grids in the first place necessary for harmonic relationships.

It's why CSS grid module layout module subgrid support via `grid: 'subgrid' is so important (though many aren't understanding of these things associated with content-first grids it's not surprising it's been also hard for spec writers not content-first oriented to see its usefulness)

Example

A CSS author may want to use the 1^st and 3^rd notes of the Golden ratio with split gutter styles for the overall layout, but inner or before gutter styles with various notes of the Golden Ratio for various components.

The author may have a hero component with children that can capitalize on the ratios of the existing gutters/ ratios in place line up but with inner gutter styles.

It would be cumbersome forcing the existing gutter styles by the overall grid for such use case—which would require cumbersome functions & mixins deviant of what set up the grid in the first place.

Footnotes

^1:This is now unfortunately common because many Web devs aren't familar w/ non-Web options to do so important & critical in graphic design & print work—accordingly they don't have better grid experiences outside of the Web</small

[corysimmons]

Too lazy to read that article but you seem pretty passionate and really know your stuff about grids so I'll take your word for it.

Your words have moved me...

I think this can be slated for a future release. Let's settle on a nice syntax.

I think this needs a global setting as well as a setting for each place where this might show up.

Something like?

@lost grid-layout inner;

.container {
  lost-container: split;
}

.column {
  lost-column: 1/3;
}

[peterramsing]

@sdale-fevo Great Susy post share. Thanks!
@lozandier That Content-Out article was really intriguing. I want to read it again in the morning with a fresh cup of coffee.

I must admit that I can get lost in the code and ignore design at times. This was a good wake up call indeed.

This is something that could certainly be added in the future. I'm going to keep it on hold. I'd like to really harden up the code in some smaller releases and get my head around everything that Lost can offer and what key areas that Lost wants to tackle.

[corysimmons]

It's not too hard. Decent amount of busy work though.

[peterramsing]

After version 8 and a bit of a refactor/hardening of LostGrid I think this could be slated for after I get v8 out the door.