list item bullets

[Steven O'Brien]

So we have changed the default OOCSS implementation so that it by default does not turn off bullets.

Why?  The thinking goes that if you are using li elements for structural purposes like menus etc, you will most probably be using them within the context of a defined OOCSS Html and css markup. So within this object you can explicitly turn bullets off. However if in a wysiwyg or other content editable areas of the site you put plain lists in then it should assume the default html meaning and put bullets in.

Otherwise you are faced with the choice to create location dependant styling for all content editable regions, and that is a slippery slope.

Thoughts welcome :-)

Steven O'Brien

[Scott Messinger]

I agree! Good change to the defaults.

> *Steven O'Brien*
>
> --
> 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=en.
>
>

--
Sent from my mobile device

[Nicole Sullivan]

+1 more broadly, I'd like to move from reset to something more like normalize.

Sent from my iPhone

[Ad Taylor]

2 thumbs up. We have encounter exactly the use-case you stated with content editable regions and the fix isn't tidy.

-- 
Ad Taylor
@iamadtaylor

--

[Jos Hirth]

I just use menu for menus. It's from HTML 3.2 or so. It was deprecated
with HTML 4.01 and HTML5 allowed it again.

Since it's an old element, you don't need a shim for that. It just
works.

> *Steven O'Brien*

[Murray]

It's funny, this has come up quite a few times for me recently.

What I've done is define my ul and ul li as a standard disc list with
nice margins and padding.

Then I have 4-5 list types which get extended.

.blank
Has no style. Useful for listing image links.

.simple
Almost the same as the default but replace disc with list item
background images.

.flat
This list has display: inline; extend for breadcrumbs etc...

.selector
Uses float left on list items for use in navigation and tabs.

I also have a .multi-column-list div which uses some of the grids css
to contain as many lists as required.

[Murray]

/*---------------------------------------
LISTS
---------------------------------------*/
/* numbered list */
ol li {list-style-type: decimal; margin-left:25px;}
/* standard list */
ul li {list-style-type:disc; margin-left:25px;margin-bottom: 5px;
padding-right: 10px;}
ul ul {padding: 0;}
/* blank list */
.blank li {list-style-type: none; margin: 0; padding: 0;}
.blank-extended li {margin-bottom: 5px;}
/* simple list */
.simple li {background: url(../images/simple.png) no-repeat 0 0; list-
style: none; margin-left: 0; padding-left: 11px; zoom:1;}
.action li {background-image: url(../images/action.png); margin-
bottom: 5px;}
/* flat list */
.flat li {display: inline; list-style-type: none; margin: 0; padding:
0;}
/* selector list */
.selector {overflow: hidden; zoom: 1;}
.selector li {float: left; list-style: none; margin: 0; padding: 0;}
/* item list */
.item li {list-style-type: none; border-bottom: 1px solid; margin-
left: 0;}

[tom tomsen]

Hi Murray,
i like the way you defined your "classes". those are the types, which
gets used all the time.

But: Actually, your approach also fails a nested list test like this
one:

<ol class="">
<li>Ordered list</li>
<li>Here's a nested unordered list
<ul class="">
<li>Nested Unordered list</li>
<li>Nested ordered list
<ol class="">
<li>The first</li>
<li>And the second</li>
</ol>
</li>
</ul>
</li>
<li>Ordered List item</li>
<li>Nested Ordered list
<ol class="">
<li>Some point</li>
<li>Nested Unordered list
<ul class="">
<li>The first</li>
<li>And the second</li>
</ul>
</li>
</ol>
</li>
</ol>

expected result:
1. Ordered list
2. Here's a nested unordered list
* Nested Unordered list
* Nested ordered list
1. The first
2. And the second
3. Ordered List item
4. Nested Ordered list
1. Some point
2. Nested Unordered list
* The first
* And the second

The problem: you specified a design for ul li and ol li. if you would
leave it to the browser, it would be displayed correctly.
http://jsfiddle.net/AAUWu/
(first jsfiddle link post.. hope it workds :) )

of course you could define a class for every ol, ul you use.

[Murray]

Hmm... I guess I've not come across this recently.

I can fix it a bit with: http://jsfiddle.net/qcM4A/

But this solution causes me to die a little, inside.

> leave it to the browser, it would be displayed correctly.http://jsfiddle.net/AAUWu/

[tom tomsen]

Just to link both topics together:

https://github.com/stubbornella/oocss/issues/87#issuecomment-1787403

In there dmcass came up with a good approach.