Comments on: Nicole Sullivan’s Object Oriented CSS

By: redben

redben — Thu, 22 Oct 2009 10:40:03 +0000

OO ? why this name ? it makes no sense. I don’t buy it. May be “engineered css” . Random names to create a buzz word, come on.

For the debate regarding Fixed vs Fluid min-width max-width are the answer :D

By: AmyVarga

AmyVarga — Wed, 03 Jun 2009 13:44:48 +0000

Hi Nicole

What do you mean by:
Design modules to be transparent on the inside

Also, where can I download OOCSS. I tried to do it from git http://wiki.github.com/stubbornella/oocss but I am getting a 406 error on the download button.

Thanks in advance
Amy

By: boon

boon — Fri, 13 Mar 2009 10:48:01 +0000

max-width

By: WebReflection

WebReflection — Tue, 03 Mar 2009 11:24:43 +0000

@ywg – I generally agree but thinking about new devices (iPhone, Android, etc) where the size of the screen could be 260×200 to 480×360 I think fluid layout is a must. Then we should consider to set a maximum width for every other resolution, like 640×480 or 1280×1024 ?
I cannot imagin a full HD fluid sit, anyway :D

By: Stubbornella

Stubbornella — Mon, 02 Mar 2009 20:55:02 +0000

@emehrkay Nope. The podcast and video are still being produced by Web Directions North and Yahoo! Developer Network respectively. The other video is a presentation about design performance I gave for YUI theater.

@jsutcliffe fixed. Thanks!

By: jsutcliffe

jsutcliffe — Mon, 02 Mar 2009 17:32:20 +0000

A quick note: It looks like pages in the sample files are looking for “page_layout.css” which is actually named “template.css” in the css folder.

I’m looking forward to playing with this stuff when I get out of work. As luck would have it I’m about to embark on a redesign of my personal site.

By: ilazarte

ilazarte — Mon, 02 Mar 2009 16:43:10 +0000

uml for css? please.

i still think that most of css could be replaced by a handy layout tag called ‘grid’ that behaves like tables. if people actually tried to build a client side gui they might learn to look beyond the webs limited technology set.

By: emehrkay

emehrkay — Mon, 02 Mar 2009 02:48:14 +0000

Is this the video that the slides are used in

http://video.yahoo.com/watch/4156174/11192533

By: Jordan1

Jordan1 — Sun, 01 Mar 2009 15:54:08 +0000

@ywg

Having your text reflowing when you resize your browser completly kill your site.

In my opinion, I love the fact that text gets reflowed when I resize the browser instead of having the site scale. When I view a website and I think the text size is too small (either by design or I’m showing the website through an overhead projector) I love to jack up the size of the text by 1 to 2 notches for ease of reading. But I don’t want to scale the website, because then I would lose view of the sidebars and the overall design. I would be sacrificing the total experience in exchange for readable text. If the website is fluid, it is the same layout and design as intended by the designer, except the text is slightly larger.

By: Stubbornella

Stubbornella — Sun, 01 Mar 2009 02:00:54 +0000

@ywg It is about controlling the cascade. Let me give a concrete example. I have a Ducati module and a sale module, and I nest sale inside ducati in the html. If I’ve written my CSS correctly, the rules for the two modules should be the same strength (specificity).

Unfortunately, the sale module will inherit the Ducati module rounded corners or other details if the sale code is before the ducati code in the css file.

Tomorrow, or on another page, the nesting might be inverted, for example a sale page might highlight Ducatis within the sale module. Changing the order for one use case would break the other.

Better browser support for E > F (child) selectors is one solution, but it would bloat the code a bit because you would have to specify all the elems between your module and the part you are trying to style.

Modules are the next piece I’ll be working on. Stay tuned. :)

By: ywg

ywg — Sat, 28 Feb 2009 23:05:21 +0000

Stubbornella, what do you mean in slide 62 when you say “Proximity should impact the cascade” ?

By: Stubbornella

Stubbornella — Sat, 28 Feb 2009 21:25:56 +0000

On an upcoming redesign of the w3c site I used an alpha version of my OOCSS to create a mobile view and normal view. Mobile is single column liquid. Screen has a fixed width navigation column and a fluid main column. The system makes it very easy to offer both user experiences because you only need to change one class.

By: DomainSuperstar

DomainSuperstar — Sat, 28 Feb 2009 21:19:32 +0000

I’ve often questioned the usefulness of CSS frameworks since most of what they do is usually pretty basic, but this one looks really good.

By: Nosredna

Nosredna — Sat, 28 Feb 2009 21:15:17 +0000

>>People designing fluid layout believing it’s better for large screen, but users with large screens are forced to resize their browser down on those sites…

I resize my browser down more often on fixed sites because of the waste of real estate.

By: ywg

ywg — Sat, 28 Feb 2009 20:57:06 +0000

@Nosreda :
Go to amazon and zoom back of 50% (or use a dual display)…
The layout feels “pleasant” because you’re on average resolution. On anything higher than 1500~1600, it’s unusable.

People designing fluid layout believing it’s better for large screen, but users with large screens are forced to resize their browser down on those sites…

By: Nosredna

Nosredna — Sat, 28 Feb 2009 20:49:29 +0000

@Stubbornella,

Thanks for the information.

By: Stubbornella

Stubbornella — Sat, 28 Feb 2009 20:00:05 +0000

@Nosredna, @Schill, @Nosreda, @ywg,

If you want to have a site that can be 1,2, or 3 column (like every site on earth) the middle column needs to be fluid so you can have one base starting template. This, of course, means the grids have to be fluid. After that, controlling the width of the overall container can be done in a fluid, em, or pixel based way depending on the site/application.

I’m agnostic (well, I don’t like layouts that grow with EM text size, but that is a personal choice), sometimes fluid is better, sometimes fixed, so the grids do both. There is a fully liquid example in the docs. (gmail style)
http://wiki.github.com/stubbornella/oocss/template#liquid

The base templates are: fully liquid, 750px, and 950px. It is easy to extend the objects to create other sizes. Your class would extend the main, leftCol, or rightCol objects — the new class only changes the width, the base class takes care of all the rest of the functionality. This is part of the high performance aspect, you don’t repeat code.

The grids are all percentage-based, so you can put them in any size container and they adapt. Sub-pixel rounding errors are taken care of by the “context de formattage” on the last unit in any line.

@Schill I also want to add a server-side include of any presentational elements so there isn’t a lot of cruft in the HTML. Processing the CSS file for variables like text color might also make sense. Next up for me is tackling blocks, the YUI standard module format (.hd/.bd/.ft) will be key to getting that done in and OO way.

By: Nosredna

Nosredna — Sat, 28 Feb 2009 19:03:36 +0000

>>Nosreda : fluid layout is a non-sense.

Tell it to Amazon.com, which fills the page in a very useful and pleasing way.

Viewing a fixed site is frustrating to me. I much prefer fluid, although I agree that for some sites (small brochure sites), fixed makes sense.

But that wasn’t the point. I was merely asking if this ooCSS was applicable to fluid or only to fixed.

By: ywg

ywg — Sat, 28 Feb 2009 18:35:52 +0000

PS : the only really “fluid” application I can think off are calendars

By: ywg

ywg — Sat, 28 Feb 2009 18:34:01 +0000

@fortybillion : you’re right, but even on these applications the design is not really “fluid” content zones and panels are fixed. They just have an extensible workspace : cells in excels are fixed, cols in datagrids are fixed, panels in photoshop are fixed and docked…

And in modern OS, UI are now vectorial and also scale.