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
- If you want to create a checklist
- item #1
- item #2
- item #3
- If some items did not meet your criteria
- item #1
- item #2
- item #3
- Or you have a list with different marks
- item #1
- item #1
- item #1
- You can also write the above code this way (see #3 example)
- item #1
- item #2
- item #3
<ul class="cul-list checkmark list-green">
<li>item #1</li>
<li>item #2</li>
<li>item #3</li>
</ul>Result
<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
<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
<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
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.
- Add a class with this letter sequence (or word) “mark” to fix the custom list indent
- If your default unordered list indent is off, use class “ordfix” at the UL level
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.
<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:
- UL-declared colour is overriden by LI-declared colour
- 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
Is a bibliophile and technophile other than being an early adopter, an avid gamer, anime otaku, trekker, and photographer. He is an advocate of “Free Culture”, “Open Knowledge”, “Creative Commons”, “Free/Libre Open-Source Software”, and the “Fediverse” (federated social-network).
His first online project was in 1998 when he launched the unofficial website for Ansalon MUD (a text-based online game) and his own community forums Laibcoms.Community. Today, he owns a variety of online properties and help others establish their online presence.
Confirm his identity through Keybase, and learn more by reading his central bio. Yuki’s hubsite, Tomes of Knowledge, is located at jcsesecuneta.com.
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.
Leave a Reply