full width

[dlzi]

I quite like Shelves css grid. The nestable columns is sweet!

I noticed that there is no 'column-12', which means that if I want to use full width I can wrap it with the row. Is that right?

[petebrowne]

Yes that's correct, but I think that leaving out a "full" column is a mistake. I've run into situations where I needed one...

I'm working on some big changes in the development branch - and I'm planning to add .column-full class or something like it. I'll leave this issue until it's in there, thanks!

[dlzi]

I'm glad to hear that new stuff is to come.

Sorry to bring this up, but I just had a pick at your development branch and i'm lost with these classes :-)

.row-2 .column-1 { width: 48.11321%; }

.row-3 .column-1 { width: 30.81761%; }
.row-3 .column-2 { width: 65.40881%; }

.row-4 .column-1 { width: 22.16981%; }
.row-4 .column-2 { width: 48.11321%; }
.row-4 .column-3 { width: 74.0566%; }

What do they mean?

[petebrowne]

They're for common column sizes that don't fall in line with the grid: 2up, 3up, and 4up layouts. So you could do something like:

<div class="column-8">
  <div class="row row-3">
    <div class="column-1">~33%</div>
    <div class="column-1">~33%</div>
    <div class="column-1">~33%</div>
  </div>
</div>

I'm actually having trouble coming up with a good name for this kind of setup, and maybe using the "row-" prefix isn't too helpful. Any thoughts?

[dlzi]

Ahh ok..nothing to do with the ones you have at the stable file.

.column-3 [class*="column-"] { margin-left: 8%; }
.column-3 .column-1 { width: 28%; }
.column-3 .column-2 { width: 64%; }

One last question. What is that setup for?

Sorry, I can't think any name now. For me 'row-' is okay, you just had to explained it to me first :-)

[petebrowne]

That's to get the correct margins/widths for the nested columns

[dlzi]

Thank you.