Grid - limited to 5 columns

[Marco M. Jaeger]

Hello
I was wondering what the main reason would be that OOCSS is limited to
5 columns where as grid960 for instance allows for up to 16.

Thanks

[Antonio P. P. Almeida]

It's not 5 columns, it's 5 *divisions*. You can have as many columns
as you want. Nest whichever number of divisions you see fit inside one
another.

So if you want 16, nest 4, inside 4. OOCSS follows the same principles
of the YUI CSS framework in this respect.

--- appa

[MarcRic]

I understand that, but none of theese sizes fit my needs.

http://oocss.org/grids_docs.html

My option to get my site layout close to the original was to extend
"divisions" up to 7 to get the width I need (in percent).

???

More samples?

On Nov 16, 12:49 pm, Antonio P. P. Almeida <peru...@gmail.com> wrote:

[Antonio P. P. Almeida]

On 18 Nov 2009 01h35 WET, mar...@gmail.com wrote:

> I understand that, but none of theese sizes fit my needs.
>
> http://oocss.org/grids_docs.html
>
> My option to get my site layout close to the original was to extend
> "divisions" up to 7 to get the width I need (in percent).
>
> ???
>
> More samples?

Well, it's not hard to get 7. Here:

.size1of7{width:14.29%;}
.size2of7{width:28.57%;}
.size3of7{width:42.86%;}
.size4of7{width:57.14%;}
.size5of7{width:71.43%;}
.size6of7{width:85.71%;}

--- appa

[Nicole Sullivan]

If you are interested in writing grids_more.css you can add additional divisions. I don't want to add them to the base file because I've not (yet) had a project that even used the 1/5 grids. (Well, one page of one project did years ago).

John Resig suggested having a "plugins" directory to make it easier to accept code submissions so we can see who uses which pieces, which bits become popular, and also avoid scope creep. 

Nicole

--

You received this message because you are subscribed to the Google Groups "Object Oriented CSS" group.
To post to this group, send email to object-or...@googlegroups.com.
To unsubscribe from this group, send email to object-oriented...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/object-oriented-css?hl=.

--

Nicole Sullivan

Object Oriented CSS  http://wiki.github.com/stubbornella/oocss

Smush it  http://smush.it

Website  http://stubbornella.org

Tweet!  http://twitter.com/stubbornella

Book  Even Faster Websites with O'Reilly

[mmj]

Grid classes: naming
Hello
if we are going to have some more grids, we should certainly consider
a more common naming in order to keep the html setup more flexible.
e.g. grid-1 to grid-16 - this will work regardless whether we are
using 5, 7, 12 or even the 16 columns grid layout.

as it is now if we e.g. move from 5 to 7 columns, we have to change
all the classes applied to the div elements?

[Nicole Sullivan]

The two numbers indicate fractional size of the whole, like 2/5 or
3/4. You won't need to change these fractions if someone adds more
granularity.

Sent from my iPhone

[Marco M. Jaeger]

I can see that - however, there is no 2of 5 if I e.g. use a 16col
grid, isn't there?

> For more options, visit this group at http://groups.google.com/group/object-oriented-css?hl=en
> .
>
>

[and...@gmail.com]

If you were to extend the current grids to 16 colums, you'd need

size1of16
size2of16
..
..
size15of16

It's doable, but I agree with Nicole, that should be in a separate grids file.

> For more options, visit this group at http://groups.google.com/group/object-oriented-css?hl=en.
>
>
>
>
>
>
>
>
>

[chris...@gmail.com]

The point being that there would still be size3of5, size2of3, etc. You would just have sizeXof16 classes as well.

~ Christopher

[Marco M. Jaeger]

I can see that - let's say I've a structure like this:

<div class="page">

<div class="line size16">

<div class="size1">

<div class="size2">

<div class="size3">

<div class="size4">

<div class="size5">

.......

</div>

</div>

If I'd decided to go to a size12 or size5 I wouldn't have to change all the class names of the children divs - just take the few out I don't need and change the one class name of the wrapper div.

I believe it's better to use  a class name that not refers to the total of the grid columns - it's more flexible that way.

[Marco M. Jaeger]

my point is just to not use speaking/describing variable names for the classes.

size1 or size2 for a grid column is always size1 or size2 no matter whether we are using a 5-col or a12-col grid.

[chris...@gmail.com]

If you are making a site change that goes as far to affect the number of columns you need for a section, won't you usually
also be changing the percentage sizes of those columns? IE, if you are changing from size16 (allows 16 columns) to size12
(allows 12), aren't the odds very high that your interior div sizes are going to change as well, and differently from what their
new percentages will be?

If you aren't changing with page width, then size12 and size16 actually have the same total width anyway. Which means if you
leave the interior divs alone, your last column would decrease in size as the others increased (as size8 is only half of size16,
but 75% of size12). Doesn't seem very predictable, instead forcing you into trial and error to get the results you want.

Add in that you probably have all of size16 full (as in, the divs inside it equal 16 when you add them), and you will need to
adjust the interior classes anyway to get the total down to 12 (or have them be 133% of the total page width).

Or perhaps I am not understanding. :)

~ Christopher

On Nov 18, 2009 4:14pm, "Marco M. Jaeger" <mmja...@gmail.com> wrote:
> I can see that - let's say I've a structure like this:
>
>
>
>
>
>
>
>

> .......

[Antonio P. P. Almeida]

On 18 Nov 2009 21h14 WET, mmja...@gmail.com wrote:

> I can see that - let's say I've a structure like this:
>
> <div class="page">
> <div class="line size16">
> <div class="size1">
> <div class="size2">
> <div class="size3">
> <div class="size4">
> <div class="size5">
> .......
> </div>
> </div>
>
> If I'd decided to go to a size12 or size5 I wouldn't have to change
> all the class names of the children divs - just take the few out I
> don't need and change the one class name of the wrapper div.
>
> I believe it's better to use a class name that not refers to the
> total of the grid columns - it's more flexible that way.
>

I agree with Marco, it's better to have something like:

/* grids_more.css */

.grid12units .fraction1{width:8.33%;}
.grid12units .fraction2{width:16.67%;}
.grid12units .fraction3{width:25.00%;}
.grid12units .fraction4{width:33.33%;}
.grid12units .fraction5{width:41.67%;}
.grid12units .fraction6{width:50.00%;}
.grid12units .fraction7{width:58.33%;}
.grid12units .fraction8{width:66.67%;}
.grid12units .fraction9{width:75.00%;}
.grid12units .fraction10{width:83.33%;}
.grid12units .fraction11{width:91.67%;}

And the html:

<div class="page">
<div class="line grid12units">
<div class="fraction1">
<div class="fraction2">
<div class="fraction3">
<div class="fraction4">
<div class="fraction5">
.......
</div>
</div>


It makes it much easier to change it. Also there's a reuse of the
class names.

--- appa

[Nicole Sullivan]

Your approach relies on location dependent styles which make it
impossible to nest grids. This isn't compatible with OOCSS.

If you want this, please consider 960 grid system or yui.

Nicole

Sent from my iPhone

On Nov 18, 2009, at 5:51 PM, "Antonio P. P. Almeida"

[Christopher Jones]

Ok, I can see that. One trouble is that this means a junior developer has to hold more in their head. The classes size1of2, size3of5, etc are obvious in their percentages without knowing anything else. Anyone can just glance at them and know that they are 50% and 60% respectively. If I throw a junior developer (or lord knows, an intern) into something with "size6" and "size13", they don't have any frame of reference. Even after working with it for awhile, there is still difficulty since the percentages aren't even numbers (37.5% and 81.25% respectively).

And I can't imagine nesting those classes. Makes me want to cry just thinking about it.

~ Christopher

--- appa

--

You received this message because you are subscribed to the Google Groups "Object Oriented CSS" group.
To post to this group, send email to object-or...@googlegroups.com.
To unsubscribe from this group, send email to object-oriented...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/object-oriented-css?hl=.

[Marco M. Jaeger]

Christofer, your intern still needs to know that the total cannot be more than 5 

[Antonio P. P. Almeida]

On 18 Nov 2009 23h10 WET, nic...@stubbornella.org wrote:

> Your approach relies on location dependent styles which make it
> impossible to nest grids. This isn't compatible with OOCSS.
>
> If you want this, please consider 960 grid system or yui.
>
> Nicole

E.g., if I needed a 4 unit grid inside a 12 unit grid:

<div class="page">
<div class="line grid12units">

<div class="fraction4 grid4units">

<div class="fraction1">
<div class="fraction2">
<div class="fraction3">
<div class="fraction4">

</div>
<div class="fraction2">
.......
</div>
</div>

Yes it's more complex, but also more flexible. I guess that would be a
sort of "Advanced OOCSS" and there's a case to be made for feature
creep. Though, like you said Nicole, it could be something for a contrib
directory in the OOCSS distribution.

--- appa

[MarcRic]

Hi Nicole,

I'm in the opposite situation. When I try to migrate my very simple
page to OOCSS I feel the need of a more granular.

But I can see the reason: I'm a BIG fan of the oocss grid
implementation. On the other hand I don't like the "leftCol",
"rightCol", "gMail", "gCal", "yahoo" and "myYahoo" fixed width
columns. I just ignore them.

So, I use sizeXofY for everything !

Here is the case:

<div class="footer">
<div class="box gradblack gray">
<p></p>
<div class="unit size1of7">
<p>SevenWordsOfTest</p>
</div>
<div class="unit size4of7">
<p>SevenWordsOfTest SevenWordsOfTest SevenWordsOfTest
SevenWordsOfTest</p>
</div>
<div class="unit size2of7 lastUnit">
<p>SevenWordsOfTest SevenWordsOfTest</p>
</div>
</div>
</div>

Of course in the real situation the sections have different lengths
and the 1of7; 4of7; 2of7 was the only combination that fit my needs.

Regards.