Curriculum Timeline – Stylus (CSS) Tutorial

Recently, I came across a need to display a list of artist's exhibitions in a sidebar on a webpage. I wasn't quite satisfied with the styling of the presentation I had at hand at the time. That lead me to write a snippet of code you'll find in this tutorial. I wrote it in Stylus and HTML. Click on the View Compiled button to see the compiled CSS.

The Curriculum Timeline – grab the code

For those of you, who just wanna see it in action or just get the final code, here it is…

Default settings and variables

$bgColor   ?= #ffffff
$txtColor  ?= #444444
$linkColor ?= #ec008c

The basic structure

AS you can see, in the code above, the actual timeline HTML is made of the following parts:

<!-- The actual timeline HTML starts here -->
<div class="timeline tm">
  <!-- listing of the individual years -->
  <div class="tm__year"> … </div>
  <div class="tm__year"> … </div>
  <div class="tm__year"> … </div>
  <div class="tm__year"> … </div>
  <!-- the actual vertical line representing the timeline -->
  <div class="tm__line"></div>
</div>

This is pretty straight forward. The idea is an encapsulating block .tm that has its property position: relative to provide a point of reference for the vertical line .tm__line which is positioned absolutely. The .tm block also displays all the .tm__year elements. I shall mention these in more detail later.

.tm
  min-height: 100vh
  position: relative

  /* The vertical line symbolizing the timeline */
  &__line
    position: absolute
    /* defines the width of the vertical line */
    width: 2px
    top: 0
    bottom: 0
    left: 100%
    transform: translateX(-5rem)
    background-color: lighten($txtColor, 80%)
    z-index: -1

The structure of the individual year elements and their labels

Each of the .tm__year elements is made of an unordered list of the exhibitions that the artist participated in that year and a label for the particular year.

<div class="tm__year">
  <div class="tm__label">2018</div>
  <ul class="tm__events">
    <li class="tm__event"> … </li>
    <li class="tm__event"> … </li>
    <li class="tm__event"> … </li>
  </ul>
</div>

The formatting of the .tm__year makes each one of them position: relative; to set a reference point for the .tm__label element that is positioned absolutely. The label uses a set of text-shadow properties to create the illusion of the text outline.

  /* Definition of the year elements */
  &__year
    position: relative
    min-height: 10rem
    margin-top: 3rem
    &:first-child
      /* making sure the first year sticks to the top */
      margin-top: 0

  &__label
    color: rgba($txtColor, 0.3)
    color: $bgColor
    font-family: 'PT Serif', serif;
    font-weight: bold
    font-size: 4rem
    line-height: 1
    transform: rotate(-90deg)
    transform-origin: 100% 0
    position: absolute
    top: 0
    right: 4.75rem
    max-width: 16rem
    text-align: right
    text-shadow: -1px -1px 0 rgba($linkColor, 0.6),
                  1px -1px 0 rgba($linkColor, 0.6),
                 -1px  1px 0 rgba($linkColor, 0.6), 
                  1px  1px 0 rgba($linkColor, 0.6)

The actual list of exhibitions

There is nothing really special about the unordered list of exhibitions for each year. Each exhibition element consists of its heading and description.

<ul>
  <li class="tm__event">
    <h2 class="tm__event__heading">Ceramiq, Órgiva, Spain</h2>
    A cyanotype exhibition.
  </li>
  …
</ul>

The actual styling of the list, its items and their headings

  &__events
    /* Sets the right edge of the list in line with the vertical line */
    width: calc(100% - 5rem)
    /* Aligns the text of exhibitions to the right edge */
    text-align: right

  &__event
    padding: 1rem 0
    padding-right: 2rem
    /* set the reference point for the timeline bullet points */
    position: relative

    …

    &__heading
      font-size: 1.5rem
      line-height: 1.2
      margin-bottom: 0.5rem
      color: $linkColor

The timeline bullet points

Each event on the timeline is highlighted by a bullet point. These are made by the CSS ::after pseudo-element thus they don't require any additional HTML markup. As an icing on the cake, I've added a gentle micro-animation. I'm animating the bullet point's box-shadow property and offsetting the odd and even bullet points by half of the animation period, thus creating an alternating effect.

  &__event
    …

    &::after
      content: ''
      width: 1rem
      height: 1rem
      background-color: $linkColor
      position: absolute
      top: 1.5rem
      right: calc(-0.5rem - 1px)
      transform: rotate(45deg)
      animation-duration: 1.5s
      animation-name: microEvent
      animation-iteration-count: infinite
      animation-delay: 0

    &:nth-child(odd)
      &::after
        animation-delay: 0.75s

    @keyframes microEvent
      from
        box-shadow: 0 0 0 rgba($linkColor, 0.5)

      to
        box-shadow: 0 0 1rem 0.5rem rgba($linkColor, 0.1)

Special thanks go to my wife for letting me use some of her artist's CV records to make the example a bit more natural and for the cover image. Please, reward her goodwill, visit her website Emma Plunkett Art and perhaps even buy a piece of her artwork.

Honza @crs1138