A newbie needs help and wants to help

[MarcRic]

Hi Nicole and Folks

I'm an “experienced” (OK, I’m older then most of you) developer, but a
newbie into this WEB World.

If you find it useful, you can know more about me here:

http://www.marcric.com/

In the Web development field, I have chosen Ruby as language, Ruby on
Rails as framework, and of course I'm studding HTML and CSS.

As could be expected, my CSS studies bring me here, so…

Topics I’m particularly interested so far.

Extend mechanism:

http://groups.google.com/group/object-oriented-css/browse_thread/thread/54980c04027fc49e?hl=en

Content style vertical rhythm

http://groups.google.com/group/object-oriented-css/browse_thread/thread/d3680dc58ec1c210?hl=en


I like the "OOCSS-content-styles-vr.zip" example provided by Murray
Nuttall, in which he introduces the "flat-list crumbs" navigation bar.

The only problem in his approach (IMHO) was that he implements the
horizontal navigation bar and other cool elements inside the
"content.css".

I would like to do something close to it but on a separate file, but
don't know exactly how:

Would be great if oocss have a "nav.css" extending "content.css"

The basic navigation bars name (my vote), would be: navbar, so:

• navBar extends simpleList
• navBars could be horizontal and vertical
• navBars could be “crumbs”, tabs, etc.
• navBars should be extended by some "complex" associated elements
like: bullets, transparency, borders, etc.

I was thinking about something like the way “talk_skins.css” extends
“talk.css”.

There are some other cool elements that could (or need) to be added in
oocss framework:

Add the “complexity” of hidden elements for accessibility help.
Add more “complexity” in horizontal bars, with many different styles.

Could anyone help me on this?

I have started my homework, and created an “oocss live sample”, here:

http://www.oocss.marcric.com/public/

I would like to turn it as close as possible with the original one,
here:

http://wp-themes.com/carrington-blog/?TB_iframe=true&width=1161&height=653

If you do like the challenge, you can download the entire project from
here:

http://www.oocss.marcric.com/public/my_blog_oocss_sample.zip (1,072
Kb)

And start doing it right now.

Any comments or positive critiques are welcome.

Regards.

[Nicole Sullivan]

Hi Marc,

Your project looks interesting. It is a really good test of OOCSS to produce a scalable version of existing designs. I think you will likely find bugs that we can then fix here. :)

I hadn't seen Murray's zip, can someone shoot me a link? Murray, would you be cool with doing a pull request or with those styles being pulled into the main project? I tend to agree that nav is different enough that it makes sense to have nav.css. I don't want anyone pulling in code they aren't using. Marc, I see what you are saying, but I don't think we want to have too many levels of abstraction. Something like this might work:

nav

mainNav extends nav

secondaryNav extends nav

I'm curious though to see how Murray built it.

I'll let other people jump in for the rest of your questions. Good luck! Let us know how it goes.

Cheers,

Nicole

--

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

[MarcRic]

Sorry Nicole,

I don't make myself clear.

The link is the second one in the discussions mentioned above.

Here it is again:

http://groups.google.com/group/object-oriented-css/browse_thread/thread/d3680dc58ec1c210?hl=en

By the way, I think I have finished something cool in this way
yesterday, will publish it soon and point it here.

Regards.

> >http://groups.google.com/group/object-oriented-css/browse_thread/thre...
>
> > Content style vertical rhythm
>
> >http://groups.google.com/group/object-oriented-css/browse_thread/thre...

> >http://wp-themes.com/carrington-blog/?TB_iframe=true&width=1161&heigh...

[MarcRic]

Hi Folks,

Me again, with some news.

I have mixed some ideas and have produced (I think), a navbar
extension to oocss.

Here is another live sample:

http://www.oocss.marcric.com/public/mynavbar.htm

I'm sure it is incomplete, probably not "extending" oocss the right
way, but it is my first attempt.

To use it you only need two css files: the original "content.css" and
the new "nav.css".

You can pick the "nav.css" from here:

http://www.oocss.marcric.com/public/css/nav.css

Again, any comments or positive critiques are welcome.

Thanks.

On Oct 4, 8:41 am, MarcRic <marc...@gmail.com> wrote:
> Sorry Nicole,
>
> I don't make myself clear.
>
> The link is the second one in the discussions mentioned above.
>
> Here it is again:
>

> http://groups.google.com/group/object-oriented-css/browse_thread/thre...

[MarcRic]

Hi Folks,

Me again, with some news II.

I'm excited about this oocss menu thing.

And looking for a definitive model for it, I think I have found one
that we could look as a target.

http://www.purecssmenu.com/

Again, I have published a live sample you can access from here:

http://www.oocss.marcric.com/public/cssmenu.html

It has many characteristics I consider essential:

It is simple, It is fluid, It can be used like a "crumbs list", and it
is essentially COOL.

But there are things I don't get:

"cssMenum" and "cssMenui" used in the HTML are never declared in the
CSS, so, I presume they don't exist. How does it work?

The space (some times two spaces), before the class name used in the
HTML, which are their purpose?

Some help here please !

Regards.

[Shane Anderson]

Hi Marc

'cssMenui' and 'cssMenum' are not declared as you say and therefore
have no effect on the display of the menu ... remove them and you
should see no change. Eg http://www.goodleopard.co.uk/tests/droptest.html

I think the additional whitespaces are a side-effect of an 'auto-
generated' piece of css and need not be heeded at the beginning or end
of a style argument.

Very interesting though Marc.

Regards

[Murray Nuttall]

Hello,

I've been away on holiday so sorry for the late reply.

In my version of content.css I've included the flat-list class as a flat list for use inside content areas. Not really for stylised navigation, though I tend to think that a nav.css might not be a bad idea because it's another one of those 'hard to classify' things. It's not entirely content and it's not entirely container.

I think that flat lists are used enough to make them just as important as simple lists. They quite handy for a pagination, or index anchors.

Hopefully this is some help.

Murray.

[jack]

Good idea about defining navigations, it maybe easier to give more of
a definition maybe something like:
navBar extends simpleList
navBarMain
navBarCrumbs
navBarVertical
and navETC

This will make it easier for new people coming on board and a few
years and many other *.css files.

Jack

> >http://groups.google.com/group/object-oriented-css/browse_thread/thre...
>
> > Content style vertical rhythm
>
> >http://groups.google.com/group/object-oriented-css/browse_thread/thre...

> >http://wp-themes.com/carrington-blog/?TB_iframe=true&width=1161&heigh...

[MarcRic]

Hi Murray and Folks,

Yeah that is the way I think Nicole extends oocss, and I'm trying to
keep it in mind.

So, the structure can be:

1 - A base level "content.css" in our case.
2 - A specific extent "nav.css".
3 - A "complexity" extent "nav_skin.css".

In the base level, we do the basic shape. I think something like "nav"
should go there, after "simpleList".
In the second level, we could extend "nav" into "navBar" and
navBar.hr", considering "navBar" the standard vertical one.
And in the third level, we should apply, colors, bullets, items and
sub-items, or in other word, "complexity".

I'm just following the "talk.css" and "talk_skin.css" pattern.

What do you think?

On Oct 5, 7:18 am, Murray Nuttall <murray.nutt...@gmail.com> wrote:
> Hello,I've been away on holiday so sorry for the late reply.

>
> In my version of content.css I've included the flat-list class as a flat
> list for use inside content areas. Not really for stylised navigation,
> though I tend to think that a nav.css might not be a bad idea because it's
> another one of those 'hard to classify' things. It's not entirely content
> and it's not entirely container.
>
> I think that flat lists are used enough to make them just as important as
> simple lists. They quite handy for a pagination, or index anchors.
>
> Hopefully this is some help.
> Murray.
>
> On Mon, Oct 5, 2009 at 9:21 PM, Shane Anderson <
>

> shane.web.des...@googlemail.com> wrote:
>
> > Hi Marc
>
> > 'cssMenui' and 'cssMenum' are not declared as you say and therefore
> > have no effect on the display of the menu ... remove them and you

> > should see no change. Eghttp://www.goodleopard.co.uk/tests/droptest.html

[MarcRic]

Hi Jack and Folks,

Could anyone check the "navBar.hr" extension here:

http://www.oocss.marcric.com/public/css/nav.css

And tell me if I'm doing it right?

Thanks.

[Murray]

You can't reference classes together like .oneclass.anotherclass, is
that what's causing your problem?

Perhaps something like the following?

ul.navBar li a {/*css*/}
/*extends navBar */
ul.navBarExt li a {/*css*/}

<ul class="navBar navBarExt"> Extends navBar to make it display
horizontally?

Though I'm not sure you'd want to have both options on the same site
because this isn't really good IA (Information Architecture). If it's
the global navigation for the site it should really stay in one
position otherwise you'll confuse your visitors.

It's kind of like greeting people at the front door then, once they've
come in for a coffee, they look front the dining area, across the
living room, at front door only to see that it has moved to the floor.
It's only when they reach the foyer that the door snaps back up to
where it used to be.

Just a thought though.

[MarcRic]

Hi Nicole and Folks

I would like to show you a recent version of my “oocss live sample”,
something like an all in one sample page, including my navBar solution
so far and the recent published "tab".

Take a look here:

http://www.oocss.marcric.com/public/

Any comments or positive critiques are welcome.

Regards.

On Oct 3, 6:56 pm, MarcRic <marc...@gmail.com> wrote:
> Hi Nicole and Folks
>
> I'm an “experienced” (OK, I’m older then most of you) developer, but a
> newbie into this WEB World.
>
> If you find it useful, you can know more about me here:
>
> http://www.marcric.com/
>
> In the Web development field, I have chosen Ruby as language, Ruby on
> Rails as framework, and of course I'm studding HTML and CSS.
>
> As could be expected, my CSS studies bring me here, so…
>
> Topics I’m particularly interested so far.
>
> Extend mechanism:
>

> http://groups.google.com/group/object-oriented-css/browse_thread/thre...
>
> Content style vertical rhythm
>
> http://groups.google.com/group/object-oriented-css/browse_thread/thre...

> http://wp-themes.com/carrington-blog/?TB_iframe=true&width=1161&heigh...

[Jon Trelfa]

On Tue, Nov 10, 2009 at 2:20 PM, MarcRic <mar...@gmail.com> wrote:

Hi Nicole and Folks

I would like to show you a recent version of my  “oocss live sample”,
something like an all in one sample page, including my navBar solution
so far and the recent published "tab".

Take a look here:

http://www.oocss.marcric.com/public/

Any comments or positive critiques are welcome.

Regards.

I'm digging it - nice page to use when initially laying out/setting up a website.  It gives you a single location to help see what your own custom.css does to affect all of the OOCSS objects in the framework.

Might I suggest more pronounced indication of your grids?  May help to visually see where the grid is when setting up complex layouts.

Thanks,
Jon

[MarcRic]

Hi Jon and Folks,

My intention, with this sample page is to show a "practical use" of
oocss, not to substitute the original specific sample files. The case
you are looking for, are the "grids_all.html" and the
"grids_docs.html" which comes with the oocss kit.

In fact I have a "TODO" which is to change the "talk" interface in
this sample, because I have just copy and paste the "talk.html" sample
file into my own. Probably I will use them as a comment interface in
the blog section in this sample.

In my opinion, we must focus in evolving the "crumbs", "navBar" and
"tabs" interfaces ASAP, and get it into the "official" oocss
framework.

With this basic interface items published, we can start using oocss
more frequently.

I'm converting my personal site to use oocss right now, and in this
case, the "crumbs" interface is an essential item. So, to get this
done, I will be using an "unofficial" oocss version, on which I have
included the "crumbs" and "navBar", and extended the grid to the
".sizeNof7" limit.

You can take a look in the current version here:

http://www.marcric.com/

I will probably change it the next weekend and you can see the
comparative result.

BTW, which is the recommended column limit for grids?

I know that Blueprint goes to 24 columns and 960 Grid goes to 16
columns, I have had a specific need of 7 columns.

What do you think about an initial try with 10 or 12 columns?

Regards.


On Nov 10, 5:54 pm, Jon Trelfa <jtre...@gmail.com> wrote:

[MarcRic]

Hi Nicole and Folks,

I'm trying to include a "Velocity" section in the "all in one sample":

http://www.oocss.marcric.com/public/index.html#velocity

My intention is to include the Exercise4 of the Velocity conference.

I'm supposing the ".gblock" pop extension used then, has evolved into
the ".gonzalo" one.

Can anyone help me here please!