stubbornella / oocss

Object Oriented CSS Framework

#OOCSS Look into oocss folder for more informations

oocss's Issues

Docs for standard module format (migrated from lighthouse)

Reported by nicole (at stubbornella) | March 7th, 2009 @ 12:45 AM

mod (extensions here) inner (no other classes here)

hd (0-1)
bd (1)
ft (0-1)

Consider YUI take on it. http://developer.yahoo.com/yui/examples/container/module.html

Script to insert presentational elems (migrated from lighthouse)

Reported by nicole (at stubbornella) | March 7th, 2009 @ 12:47 AM

JavaScript and PHP version?

Different mod.css and content.css files

First thank you for all your hard work on this project. It's great!

Please check the download Source on GitHub.They seem to differ from the velocity-download on OOCSS.org. GitHub's files mod.css and content.css may cause the Block Structure to appear different than on the example 3 http://oocss.org/velocity/exercise3.html

Write CSS for OO tabs (migrated from lighthouse)

Reported by nicole (at stubbornella) | March 7th, 2009 @ 12:42 AM

Set up the CSS for OO tabs. They need to:

Have a base tab class which extends mod.
Have a hd which contains the tabs
Have a class which extends hd to place the tabs to the right or left (bottom too?)
Consider a class which allows the tabs to live inside or outside the contour.

Nesting modules

Nested modules wont work correctly due to the "any child" selector being used on .inner :

.simpleExt .inner { } 

instead of

.simpleExt > .inner { }

The direct child > selector is also faster (since it is parsed from parent to child and not the other way around).

the basic library sample link is broken

In the index.html page, the basic library sample link is broken. It seems that file library.html is not checked in.

wordpress twentyten and oocss templates

Hi,
i'm extending the "twentyten" theme for wordpress and am using oocss.
I've just figured out why my page "about" was broken. It's because it's a page, and twentyten adds a "page" class to it's pages :

<div id="post-2" class="post-2 page type-page hentry">

i've fixed that by adding a prefix to oocss' "page" class.

Print Stylesheets? Display: block; for the .main class

In order to be able to use "page-break-after: always;" and "page-break-before: always;" to have my page printed properly with Webkit and Firefox, the element with the class .main need to be displayed as a block.
Is there a way to use this display mode instead of table-cell without altering the page layout?

Regards,
Louis-Rémi Babé

Think About The Structural Usage of IDs

Concerning HTML5 there is no need for IDs that describe a structural attribute (right?) as written here:
http://wiki.github.com/stubbornella/oocss/template

discrepancy in template.css on online Demo-Page and Downloadable archive

Hello,

there is a Problem in the current Downloadable template.css file.
the .body (template.css line 4) declaration does not work propper in Opera 9 and 10.
The version on the demo pages work in all tested browsers (IE6/7/8,FF3/3.5,Opera9/10,Chrome,Konqueror 3.5).

thanks a lot for the great work :)
tanila

Create a module skin repository

It could be a nice idea creating a module skin repository (o a marketplace), feeded by community, in order to share them easily, based on Stubbornella's module structure.
the pluspoints are:
1 Share the tecnology
2 simplify the develop
3 a place where the designer can show his skills

thanks

Fixed width units incorrect size, lastUnit off screen (migrated from lighthouse)

Reported by nicole (at stubbornella) | April 12th, 2009 @ 12:18 AM

I try this

image or flash
Text and other objects
But I don't get the correct width for the first div instead if I use a class like .size345px{width:345px;} I get the correct width.
image or flash
Text and other objects
With this code in IE6 I see the text inside lastUnit that has a margin- left:-3px and so it exit from screen.

Download v.0.2 corrupt?

Hi,

something about the download v.0.2 seems broken - when trying to get the file, I get:

AccessDeniedAccess Denied19B455775F1B6DFEkEfk+0wLB52fAlw4ypVYhoSpaHZTC9a5k4iUHrq46iomVQLzV4rYmw4cnt+6fnCx

Github bug?!

Cheers,
carsten

heading/headings.css imported twice in core/core.css

Hi, all.

It seems to me that in core/core.css heading/headings.css should be imported only once.

allow the media query to be "opt-in" by using a different class name.

@media screen and (max-width: 319px) {.unit{float: none !important; width: auto !important;}} could be a little too coarse at times.

for example, i might have a number of modules which have their layout controlled by a grid - for the sake of argument, let's say there's 4 columns of modules. in those modules i might also use the grid to layout some content. if the screen size reduces, i'd like the grid of modules to reduce to a single column but i don't want to affect the content in the modules.

keeping with the oo philosophy, maybe the media rule should extend unit by using another class name rather than completely overriding it. for example (use whatever class name makes sense - i chose narrow):
@media screen and (max-width: 319px) {.narrow{float: none !important; width: auto !important;}}
and then the media query would be an optional extension of unit. i realize that it's more classes to add but i'm not sure how else to achieve the scenario i described. i'm open to suggestions...

js to height align modules (migrated from lighthouse)

Reported by nicole (at stubbornella) | March 7th, 2009 @ 12:49 AM

Script which measures the difference in height between units in the same line and splits the difference across the modules in the smaller unit to align height.

.media doesn't play well with absolutely positioned elements

For example, if I have a custom tooltip that appears when I hover over something in the .media block, since the .media block is overflow: hidden, the content just gets clipped.

I checked facebook since they have working tooltips and it looks like they're using a combination of display:table-cell for the "body" and the clearfix solution for the .media block itself.

I also checked display:inline-block on the body and that seems to work ok.

Improvement to clearfix

Wondering if the line:

content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x "

Can be re-written as:

content: "\0020"

As used in HTML5 Boilerplate and elsewhere.

Mojo block adapted to OO style (migrated from lighthouse)

Reported by nicole (at stubbornella) | March 7th, 2009 @ 12:38 AM

adapt and release Leslie Sommers Mojo block in OO code style.

http://www.lesliesommer.com/wdw07/html/

Better inline documentation

Hey,
when i look at mod.css
i think there is room for improvement concerning documentation.

With cssdoc (look into the pdfs at the bottom of the page) we could use docblocks like:
/**
* This is the standard module
*
* @Valid yes
* @tested no
* @Package module
* @Version 1.4
* and a lot more
*/

The docTags mentioned above are especially useful when used in plugins also it would make understanding for newbies a lot easier.

What do you think?
I think it would be a great addition and easy to implement since the codebase isnt that huge at the moment.

Martin

Mod.css .top and .bottom IE6 bug (well kinda)

Hi,

I'm currently building a fairly large site using OOCSS principles (…it's like stepping out of the dark ages) and I am really happy with how solid across multiple browser it is.

I was just crossing-browser testing and found in 1 or 2 (so really not very often at all) sections an empty/unstyled b.bottom element would push content down as it was taking a parents line-height in IE6.

This is no problem as it could either be removed or dealt with individually but this wouldn't suit our needs. One reason that OOCSS works well for us, is that it gives the developers a strong HTML pattern to work to so (for better or for worse) we want to keep the markup the same.

A solution that has worked for me is to change line 13 of mod.css to:
b{display:block;background-repeat:no-repeat;font-size:1%;position:relative;z-index:10; line-height: 1;}

I would be interested to see if this would work for everyone or does someone see a way this could detrimentally affect a mod or skin?

Thanks,
Ad

Tab items display one under another rather than next to each other in IE7

table-cell and table-row display styles are used in various style rules in OOCSS. IE6 and IE7 do not honor those display styles. Thus they use default display styles. Surprisingly IE6 displays the tabs as expected. However, IE7 behaves differently. The tab items are treated as block elements and thus displayed vertically.

To reproduce - simply open tabs.html in IE7. Also the controls are displayed vertically.

how to create dinamic grid on stubbornella's pattern

Does anybody had found solution to create a grid structure based on dynamic content?
when the content is not kow, ex number of images loaded by users...

Use position absolute on .tl and .tr? (migrated from lighthouse)

Reported by cfenzo | May 13th, 2009 @ 12:41 AM

Case: With the current float based solution, any content (text, image) in .inner/.bd/.hd will gain a right/left indent from the floated .tl and .tr. This will limit the flexibility of the module content in such way that the space (padding) between the border and the content can never be smaller than the width of .tl and .tr.

The problem seems to be non-existent for .bl and .br.

Suggested solution: Adding position absolute and top/right/left values for .tl and .tr will prevent this, while still working as expected (as far as I can confirm, testing in IE (6,7,8), Opera (9.6), Firefox (3.0.1), and Safari (4.0 beta win)).

strange behavior of lastUnit

Hello!

The following is an example that demonstrates unexpected behavior of .lastUnit on FF 3.6 and Chrome 6.0. IE8 does not appear to be affected. I have not tried other browsers yet.

stuff here

This div will cause additional space added at the bottom of the parent div (lastUnit)

Removing clear: both from .lastUnit:after appears to fix the issue, but I am not sure if this created other problems.

Any ideas?

Thanks!
-igor

Problem with "Main Content" column in the template in IE7

If you open template.html in IE7 you will notice that the Foot block flows inbetween Left Column and Right Column starts right at the bottom of Main Content.
If you set background color (other than white) on Main Content you will see that it spans the whole width of the page.

lastUnit - margins and padding

I tested out the framework for a website I am developing and was confused on the best practice for margins and padding in boxes (in a grid layout).

If I have a box with content on it and I want to have padding around the content within the box; If I do so it will throw out the last column size (using class lastUnit). I saw in the CSS for the demo pages that all headings and paragraphs have a margin applied to them.

Is this the best way to do it? If I have several boxes with different types of margins or padding I will have to set all of the h[1-6] styles and paragraphs for that box.

Is this something that should be changed for this framework or should I change the way I code css?

pop on IE6 don't show

The pop example provided in the Velocity package doesn't show correctly on IE6.
I did some experiment myself without success.

template.html displays incorrectly in Safari 3.2 on Windows

Head is displayed between Body and Foot.

Changing display style of "body" class from "table-cell" to "block" fixes this. What is the reason for setting style of body to "table-cell"?

mod.css messes with b tag

The "b" tag is used in mod.css for the edges and corners of box frames, because it is considered a short, non-semantic tag. However, it is a very familiar and therefore common tag, and occurs in a lot of markup in the wild. When trying to wrap existing HTML in a module-based skin, text which should be bold vanishes, because the declaration on line 13 of mod.css (display: block and font-size: 1% etc) is applied unconditionally.

Maybe a possible fix could be to make the scope more specific, for example
.mod > b, .mod > b > b { .... }
instead of b { ... }

Tabs: List Items Hidden in Content

List items within the .bd element of the tabs mod are hidden along with the content list item. For instance, the innermost list item in the following example should be visible but is not:

<div class="mod tabs simple">
  <b class="top">...</b>
  <div class="inner">
    <div class="hd topper">...</div>
    <div class="bd">
      <ul>
        <li class="current">
          <p>Lorem Ipsum...</p>
          <ul><li>Should Not Be Hidden</li></ul>
        </li>
      </ul>
    </div>
  </div>
  <b class="bottom">...</b>
</div>

In my code I have fixed this with the following declaration:

.tabs .bd li li{ display:block; }

The content list item is still hidden (unless .current is applied) and all descendants are shown by default.

Replace b {..} with a more specific selector? (migrated from lighthouse)

Reported by cfenzo | May 12th, 2009 @ 08:12 AM

Since the single selector b is used for selecting the extra rounded corners markup, all use of the <b> tag in it's original use fails miserably unless the css is overwritten for certain areas.

While the inability to use <b> in other contexts certainly isn't a problem for most front-end developers, we aren't the only ones writing content for the sites we develop (quite often we don't even touch the content). The content could (and proberably will) be generated by a variety of sources: directly from users, developers, management, through a CMS or news aggregator. Thus resulting in malformed content whenever a <b> is present.

So, my suggested solution is to add a few bytes and avoid obvious content-problems, like so:

.top, .bottom, .tl, .tr, .bl, .br {display:block;background-repeat:no-repeat;font-size:1%;position:relative;z-index:10;}

Yes, it will make the selectors for the module skins a bit longer, but that's a small price to pay for the added unobtrusivity (is that even a word?) :)

Nice OOCSS aproach, btw :) Cheers!

grids.css ~ more sizes?

Greetings from South Africa Nicole! :O===<()♩♪♫♬

Just a quick Q...

So if the current "sizeXofY" doesn't meet any of my requirements, what should I do?

• My first answer would be to specify the widths manually but then, am I not moving away from using the grid?
• add more sizeXofY to my grids.css but what if you change the whole system? (e.g. sizeXofY to sXofY)

TM

Awesomeness lies in the hands of the brave.

Suggestion: naming prefix (namespace simulation)

While using OOCSS in a project I'm facing an usual issue about class name conflicts. There is an obvious approach proposed here: http://meiert.com/en/blog/20070321/css-practice-pseudo-namespaces-in-complex-projects/

I suggest to rename all non semantic classes that belong to the core framework (grid, mod and template)
Examples:

• oog-line, oog-unit
• oom-mod, oom-complex

Some would suggest to use a parent selector but it's not that obvious and I must say I'm using top parent selector technique in order to mix html fragments coming from two sources using the same css framework in different version (yes, it means everything is loaded twice but I'm more concerned about maintenance than pure performances here)

Arnaud Gueras test wrapping on IE (migrated from lighthouse)

Reported by nicole (at stubbornella) | March 4th, 2009 @ 12:06 PM

Sender didn't provide version number of IE or any other details.
sender: @robertgentel

Borrow taxonomy from ARIA

Any thoughts on this? ARIA already has roles for tab, tablist, tabpanel (http://www.w3.org/TR/wai-aria/roles#tablist) and lots of other UI elements. Would it be a good idea to use their vocab as a starting point (a la Microformats) or is it a completely separate concern (you'd still probably have to use ARIA roles and whatnot in your HTML).... thoughts?

OOCSS: media object to handle longer text similar to a clolumn, and not wrap below the image.

First, thanks for all your work!

So with the media block.. I dont think it's working as I would expect. I would expect the media block to be similar to columns, having a column for the image, and on the other side, text. However the media block behaves the same as just floating the image left or right.. text flows below the image and not staying to the left or right of the image.

I have read an article that accomplished this, but I dont remember how much hackery was used.

I have uploaded a test version of what I am talking about.. feel free to check it out.

http://screwlewse.com/labs/stubbornella-oocss-8b59c19/media_test.html

Image do not crop on IE6

I've used "mod complex photo" and putted an image in the bd. While it crops well in FF3, it doesn't in IE6. Worst, the image going out a its frame breaks the rest of the page.

"extends:.page" in template.css

Hi, all.

I'm very curious about this code in template.css:
".liquid{extends:.page; width: auto;margin:0;}"

Especially, I'm wondering about the "extends:.page;" part. I've never heard about this rule. Has it got support in newer browsers?

Kind regards, Jimmy Volatile

Talk Bubbles

Nicole, I am a fan.

I am eager to beta test talk bubbles. Is there a downloadable zip of base code?

[root]->index.html->library.html

I just DLed the new OO CSS structure. (Very nice!)

But there seems to be a file missing. The main INDEX page and a link in the upper left corner: "Basic library example"

It's looking for an HTML file that does not exist.

Any ideas?

AG block - adapt code to OO style (migrated from lighthouse)

Reported by nicole (at stubbornella) | March 7th, 2009 @ 12:37 AM

Basic transparent inside block adapted to OO style, ready for release.

Opera and grids

Hi,

Grids do not appear to be working in Opera 10.x. It looks like display: table-cell does not work as expected. I have not been to come up with a work around.

Any ideas?

Thanks,
-igor

Grids: .size2of4 missing

Hey folks,

theres no .size1of4 in grids.css.
I can imagine thats on purpose since users can apply .size1of2 instead.
However, imho this is a bit misleading and also makes it unnecessarily 'unstraight' to use grids in cms.

What do you think?

Cheers, Carsten

OOCSS Showcase / Testimonials

• list of sites using OOCSS
• why people are using OOCSS

maybe that could be a part of the readme....

Add a 960px width template (migrated from lighthouse)

Reported by nicole (at stubbornella) | March 11th, 2009 @ 11:42 PM

Suggestion from http://github.com/rlopes divisible by 2,3,4, and 5 after he read about http://960.gs

Nested media object size issue in firefox 3.6

In the blog article http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/ the css has:
.media, .bd {overflow:hidden; _overflow:visible; zoom:1;}
but this has changed to:
.media{overflow:hidden; overflow:visible; zoom:1;margin:10px;}

This means if a media object is nested within another one, in Firefox 3.6, it is as large as the image in the parent media object and not sized by its own content.

Remove incomplete comment from css for .simpleExt / module_skins.css

hi.
First, congratulations for project.
This code have a incomplete css comment in 'background-color':
.simpleExt .inner{border-color:#fff; border-width:4px; /background-color:#e2e2e2;*/}

tnks.

.media and .module conflict

Hello!

Is there any reason you chose to use .bd in the media object? This makes it very difficult to use .media within .mod.

Thanks,
-igor

Fixed width units incorrect size, lastUnit off screen (migrated from lighthouse)

I try this

image or flash
Text and other objects
But I don't get the correct width for the first div instead if I use a class like .size345px{width:345px;} I get the correct width.
image or flash
Text and other objects
With this code in IE6 I see the text inside lastUnit that has a margin- left:-3px and so it exit from screen.