Styling Unordered Lists

Ever wondered if you can style unordered lists?

• this is an
• ordinary
• list

Or did you encounter times when you want to create a checklist without resorting to images?

• a checkmark list
• an xmark entry
• another checkmark entry

Well, let me show you how!

About

• Custom Unordered List (CUL)
• License: Mozilla Public License Version 2.0 (“MPL 2.0”), GNU LESSER GENERAL PUBLIC LICENSE Version 3 (“LGPLv3”)
• Download source code here

The code…

See the Pen Basic Custom Unordered List by JC John “Yuki” Sese Cuneta (@techmagus) on CodePen.

How to use the Custom Unordered List

The format is simple (brackets mean optional):


<ul class="cul-list [mark-type] [list-colour]">
  <li [class="[mark-type] [list-colour]"]>item #1</li>
  <li [class="[mark-type] [list-colour]"]>item #2</li>
  <li [class="[mark-type] [list-colour]"]>item #3</li>
</ul>

Examples

1. If you want to create a checklist

<ul class="cul-list checkmark list-green">
  <li>item #1</li>
  <li>item #2</li>
  <li>item #3</li>
</ul>

Result

• item #1
• item #2
• item #3
2. If some items did not meet your criteria

<ul class="cul-list checkmark list-green">
  <li>item #1</li>
  <li class="xmark list-red">item #2</li>
  <li>item #3</li>
</ul>

Result

• item #1
• item #2
• item #3
3. Or you have a list with different marks

<ul class="cul-list list-red">
  <li class="checkmark-heavy list-green">item #1</li>
  <li class="xmark-heavy">item #1</li>
  <li class="omark-black list-blue">item #1</li>
</ul>

Result

• item #1
• item #1
• item #1
4. You can also write the above code this way (see #3 example)

<ul class="cul-list">
  <li class="checkmark-heavy list-green">item #1</li>
  <li class="xmark-heavy list-red">item #1</li>
  <li class="omark-black list-blue">item #1</li>
</ul>

Result

• item #1
• item #2
• item #3

Two things to remember

There are two special things you might want to remember when nesting unordered lists. These are optional and does not affect all themes.

1. Add a class with this letter sequence (or word) “mark” to fix the custom list indent

Using our example previously (see #3 and #4 above)


<ul class="cul-list markfix list-red">
  <li class="checkmark-heavy list-green">item #1</li>
  <li class="xmark-heavy">item #1</li>
  <li class="omark-dark list-blue">item #1</li>
</ul>

It’s only use is to target the UL elements without any specific “mark”. It could be “yourmarkclass” if you want. But if your list is going to be mainly “checkmark” for example, then use it and refrain from adding checkmark classes in the LI elements.

2. If your default unordered list indent is off, use class “ordfix” at the UL level

<ul class="ordfix">
  <li>item #1</li>
  <li>item #2</li>
  <li>item #3</li>
</ul>

Just do not forget to adjust the “ordfix” CSS value accordingly. The CSS value included in the above code was set to the theme I am using as of this post.

What you can use

Mark styles

CSS Precedence/Specificity: Last overrides the previous one (if you declared checkmark at UL element, xmark at LI element will override it).

• omark-black
  • a “checkmark” in East Asian cultures (Philippines, ASEAN, China, Japan, Korea)
  • for example, shade the circle besides your choice
• omark-white
  • a “checkmark” in East Asian cultures (Philippines, ASEAN, China, Japan, Korea)
  • for example, encircle the correct answer
• checkmark
• checkmark-heavy
• xmark
  • a crossmark (negation)
  • a wrongmark (negation)
  • ✗ as in “selection” or “choice” (affirmation)
  • ✗ as in “✗ marks the spot” (affirmation)
• xmark-heavy
  • a crossmark (negation)
  • a wrongmark (negation)
  • ✘ as in “selection” or “choice” (affirmation)
  • ✘ as in “✘ marks the spot” (affirmation)

Colours

• red
• green
• blue
• yellow
• gold
• magenta
• pink

Notice how the colour is not bleeding to the text? If it does with yours, there’s something overriding your custom unordered list stylesheet.

CSS Precedence/Specificity:

1. UL-declared colour is overriden by LI-declared colour
2. Last overrides the previous one (if you declared red at UL element, yellow at LI element will override it).

Browser compatibility

Only browser versions that were released 2015 onwards. Any browsers released on 2014 and earlier will not be able to display all or part of our custom unordered list. It’s August 2015 already, time to show your visitors what they are missing by still using obsolete versions.

For mobile browsers, there’s not much we can do about this. Mobile browsers are limited due to the processing and space capability of mobile gadgets. However, support for basic CSS3 like the above is almost complete, your visitors only have to update to a 2015-released browser version.

Nested Custom Unordered List Sample

Here’s an example of a nested custom unordered list.

• green checkmark-heavy
• red checkmark-heavy
  • red xmark-heavy
  • green xmark-heavy
    • red omark-black
    • green omark-white
      • magenta xmark-heavy
      • pink xmark-heavy
      • yellow omark-black
        • ordinary
        • list
      • gold omark-black
    • blue omark-black
  • red xmark-heavy
  • ordinary
  • list
• green checkmark-heavy

And this last line should show that there’s enough space after the list.

Enjoy!

Related articles across the web

• What is CSS?
• CSS Custom Properties: How to Use Variables in Chrome 49
• SASS is often preferred as critically important stylesheet for styling webpage
• Why DockYard transitioned to PostCSS
Summary

Article Name
Styling Unordered Lists
Description
It's time to get rid of generic unordered lists! Let me show you how you can style it and wow your visitors!
Author
Yuki
Publisher
techmagus™

Yuki (雪亮)
Is a self-confessed bibliophile and technophile other than being an early adopter, an avid gamer, a geek, nerd, role-player, anime otaku, and trekker.
His first online project was in 1998 when he launched the unofficial website for Ansalon MUD (a text-based, telnet online game) and his own community forums Laibcoms.Community. By 2003 he created his work blog GM-Yukino which grew into gameshogun™, Snoworld™, and techmagus™ over the years.
Yuki’s latest project is Verses.Space™, a Free Culture / Creative Commons, collaborative, and shared-world, worldbuilding and writing project.
His hubsite is Tomes of Knowledge™. He also runs YourOnly.One™, One Way Faith™, Adorable & Beautiful™, Clean Real Food™, and other online properties.
You can confirm his identity from his Keybase profile and learn more by reading his central bio.

Styling Unordered Lists by Yuki (雪亮) is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Permissions beyond the scope of this license may be available at Legal Notice.