mojotech / jeet

The most advanced, yet intuitive, grid system available for Sass or Stylus
http://jeet.gs
MIT License
2.99k stars 260 forks source link

I'd suck the chrome off a trailer hitch (or PayPal you $100) if someone could figure out equidistant nested column gutters #39

Closed corysimmons closed 11 years ago

corysimmons commented 11 years ago

Bourbon/Neat does this really well. Check out the nesting section: http://neat.bourbon.io/examples/

Notice how the columns are equally sized? This is really preferred as it makes the whole concept behind a grid HAVE A POINT!!!

Notice how Bootstrap newbs this up? http://twitter.github.io/bootstrap/examples/fluid.html

Most fluid frameworks newb this up. We're currently newbing this up too, but I just can't figure out the math involved.

It definitely seems like there is a pattern there to be unearthed because you can change the custom gutter setting for every level of nested columns to a few more % than before and you can get equi-distant columns.

Anyway, this is the pinnacle of an awesome grid. If anyone can figure this out I'll slap your name all over everything I ever do.

I'm pretty desperate for this awesomeness.

marcorivm commented 11 years ago

I think for this to be possible you would need to have a defined number of columns (Neat has 12 from what I can see) and the also include the total number of columns for which the parent accounts for: @include span-columns(4 of 8); So it knows the whole thing is 8/12 of the original, after that is easy to calculate the margin you should apply.

From Neat:

@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
  @return percentage($gutter / $container-width);
} 
corysimmons commented 11 years ago

Maybe we could add another parameter like "depth_level" that accepts how many times the element has been nested?

I dunno, I have faith this can be done, but I'm just not math-savvy enough to figure it out.

marcorivm commented 11 years ago

Here is my take on this: http://spotless-salena.pagodabox.com/web/

https://github.com/marcorivm/jeet/commit/786ab98bc546382b92db1965f7d00b3c4f4836a9 https://github.com/marcorivm/jeet/commit/760d41139c50bf7970d83ebef013c482e0d52228

You need to specify the ratio of the current container to the global container, so if a nested container takes 4 of 10 columns you would have a ratio of 2.5.

corysimmons commented 11 years ago

I don't think it's possible. I fought with this for so long. I'll worry about this for Jeet 3 (a long time down the road), and might completely redo the grid again specifically to get this functionality (as it's sweet), but for now I'm done worrying about it.

marcorivm commented 11 years ago

I'm pretty sure that I was on the right track, but I think a more expressive syntax is needed.