Unordered Lists Don’t Have to Be Boring

You see them everywhere, the “Plain Jane” black dots next to an unordered list. These little dots (known as markers) often seem to miss the attention of getting a little stylistic flair, but they don’t have to! We’re going to look at two ways you can make markers fall in line with your sites design or provide a little character.

Simple Colouring

Please note, for this first example the current browser support is very limited, check Can I Use for a breakdown of where this can currently work. Because of this, both before & after below may look the same!

The first example, is a nice, quick way of making these markers blend with the colour palette of your site. We can do this by making use of the marker pseudo-element. If we target this marker pseudo-element we can simply pass color as a style:

li::marker {
  color: #d84548;
}

Before:

• This is
• An unordered
• List

After:

• This is
• An unordered
• List

As you can see, it’s a simple change which helps the list feel more naturally a piece of your site.

To give a more unique feel, you can add images as your marker for a list. For a recent project, we took part of a client’s logo, turning the marker into a crown. This gave an elegant, on brand feel to lists across the site.

In our example here, we’re going to use the Tidy Design TD logo.

Here’s a look at the code we’re going to use:

ul {
  /* Decrease the current default padding-left */
  padding-left: 1.5em;
  /* Remove the current default marker */
  list-style: none;
}

li {
  /* Add a min height the li, so the full image can be seen */
  min-height: 20px;
  /* Space out the li */
  margin-bottom: .75em;
  /* Space out the li content from the icon */
  padding-left: 2em;
  /* Add the icon */
  background-image: url('image-path-here/tidy-logo.svg');
  /* Set the size of the new icon marker */
  background-size: 20px;
  /* Make it so it doesn't repeat */
  background-repeat: no-repeat;
  /* Nudge the icon marker down slightly to center */
  background-position: 0 4px;
  /* Set a line height for the li */
  line-height: 1.6;
}

The styling above gives us a list which looks like this:

• This is
• An unordered
• List

Now, that looks a lot better than a little black dot doesn’t!

Bonus Round

Working with SASS/SCSS? Here’s a little mixin for you to use:

@mixin ul-marker-logo() {
  padding-left: 1.5em;
  list-style: none;

  li {
    min-height: 20px;
    margin-bottom: .75em;
    padding-left: 2em;
    // Edit path to your logo
    background-image: url('image-path-here/tidy-logo.svg');
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 0 4px;
    line-height: 1.6;
  }
}

To use this mixin just call it inside a ul:

ul {
  @include ul-marker-logo;
}

If you’ve any questions on this, please send us an email and we’ll get back to you!

Luke

The post Unordered Lists Don’t Have to Be Boring appeared first on Tidy Design.