Skip to main content
CSS is fun and cool and I like it.

How to Make a List Component with Emotion

I’ve been doing a bit of refactoring this week at Sentry and I noticed that we didn’t have a generic List component that we could use across projects and features. So, I started one, but here’s the rub: we style things at Sentry using Emotion, which I have only passing experience with and is described in the docs as…

[…] a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to

Read article “How to Make a List Component with Emotion”

How to Reverse CSS Custom Counters

I needed a numbered list of blog posts to be listed with the last/high first and going down from there. Like this:

5. Post Title
4. Post Title
3. Post Title
2. Post Title
1. Post Title

But the above is just text. I wanted to do this with a semantic <ol> element.… Read article “How to Reverse CSS Custom Counters”


Did You Know the Ordered List Element Has Start and Reversed Attributes?

I sure didn’t! Tomek Sułkowsi shows how we can reverse the numbering of ordered lists with a simple HTML attribute:… Read article “Did You Know the Ordered List Element Has Start and Reversed Attributes?”


Finally, it Will Be Easy to Change the Color of List Bullets

In my germinating years, the general advice was this:

  <li><span>List item</span></li>
  <!-- ... -->
li { color: red; } /* bullet */
li span { color: black; } /* text */

Not terrible, but not great. You’re “resetting” everything at the span level, so it gets more complicated the more you do.

Things are getting much easier. Let’s take a walk through this world getting more modern as we go.… Read article “Finally, it Will Be Easy to Change the Color of List Bullets”


Rendering Lists Using React Virtualized

Working with data in React is relatively easy because React is designed to handle data as state. The hassle begins when the amount of data you need to consume becomes massive. For example, say you have to handle a dataset which is between 500-1,000 records. This can result in massive loads and lead performance problems. Well, we’re going to look at how we can make use of virtualized lists in React to seamlessly render a long list of data in … Read article “Rendering Lists Using React Virtualized”


Custom List Number Styling

How about a classic CSS trick! This isn’t even so tricky anymore, since CSS has counter-increment and counter-reset and such that is perfect for this. I just wanted to make sure you knew how it works and had some easy-to-copy examples at the ready.… Read article “Custom List Number Styling”


Ordered Lists with Unicode Symbols

Ordered lists are among the oldest and most semantically rich elements in HTML. Anytime you need to communicate sequence or ranking, the <ol></ol> tag is there to help. The default appearance of the <ol></ol> tag presents numbers next to each item in the list. You can use the list-style-type property in CSS to change the default to use Roman numerals or the letters of the alphabet. If you are feeling exotic, you can even use numbering from other cultures like … Read article “Ordered Lists with Unicode Symbols”



Ordered lists aren’t the only elements that can be automatically numbered. Thanks to the various counter-related properties, any element can be.

body {
  counter-reset: my-awesome-counter;
section {
  counter-increment: my-awesome-counter;
section:before {
  content: counter(my-awesome-counter);

Each <section> will respectively start with “1”, “2”, “3”, or “4”.

You can control the style of the counter by comma separating the counter function. e.g. to make them use Roman numerals:

section:before {
  content: counter(my-awesome-counter, upper-roman);
Read article “counter-increment”

Breadcrumb Navigation with CSS Triangles

Did you know you can make triangles with pure CSS? It’s pretty easy. You just make a block level element with zero width and height, a colored border on one side, and transparent borders on the two adjacent sides. They are fun for all kinds of things, like little arrow sticking out from speech bubbles, navigation pointers, and more. Often times these are just visual flourishes, undeserving of dedicated markup. Fortunately, pseduo elements are often a perfect fit. That is, … Read article “Breadcrumb Navigation with CSS Triangles”


Listless Navigation – Using CSS To Do More With Less

The best part about CSS is that it allows web developers to achieve more with less. What exactly does that mean? Well, for a start, CSS allows developers to:

  • Code much, much less XHTML
  • Separate website formatting from content
  • Control as much of the website theme/design as the developer allows himself with one CSS file
  • Easily adapt website display to the user instead of the user adapting to the website
  • Change the display of our website for specific devices and
Read article “Listless Navigation – Using CSS To Do More With Less”