A Pen by David Boskovic.

index.slim

.wrapper
  - boxes = 5
  - for x in 0..boxes-1
    .item-container class=(x > 2 && 'odd' || 'even')+(x == 2 && ' down' || '')
      .item-piece
        .item
        .bullet class=(x == 0 && 'first ' || '')+(x == 3 && 'first ' || '')
      - if x === 2
        .down-bar
  - if boxes < 6
    .item-container.last class=(boxes > 2 && 'odd' || 'even')+(boxes == 3 && ' first' || '')
      .item-piece
        .bullet

Snake-Timeline.markdown

Snake Timeline

This timeline is designed to be a short (usually only two rows) with the ability to add more items on the end. I haven't added any styling for a 3rd row yet, and the boxes have to be a fixed height. More iterations on this in the future!

A Pen by David Boskovic on CodePen.

License.

style.stylus

*
  box-sizing border-box
.wrapper
  border 1px solid #dadada
  padding 20px
  min-width 610px
  clearfix()
  .item-container
    width 33.3333%
    float left
    border-bottom 2px solid #dcdee0
    position relative
    font-size 0
    &.last
      &.first
        border-width 0
      &:after
        content ''
        position absolute
        left 0
        right 80px
        z-index 1
        top -15px
        height 30px
        display block
        background #fff
      .bullet:after
        content '+'
        background-color #59c77f
        border-color #59c77f
        color #fff
        line-height 24px
      .bullet:hover:after
        background-color darken(#59c77f,20%)
        border-color darken(#59c77f,20%)
      &.even
        &:after
          left 80px
          right 0px
          top initial
          bottom -15px
    &.odd
      float right
      margin-top 60px
      border-bottom-width 0
      border-top 2px solid #dcdee0
      text-align right
      .item
        margin-bottom 0
        margin-top 35px
        &:after
          bottom initial
          top -13px
          transform rotate(135deg)
      .bullet
        bottom initial
        top -15px
        &.first
          left 50%
          margin-right 0
          margin-left -20px
          right 0
          &:after
            right initial
            left 5px
      .item-piece
        vertical-align top
  .down-bar
    background #fff
    position absolute
    bottom -15px
    height 30px
    right 0px
    width 80px
    &:after
      content ''
      display block
      position absolute
      left 0
      height 40px
      top 15px
      width 2px
      background #dcdee0
  .item-piece
    vertical-align bottom
    /* font-size 16px */
    text-align center
    max-width 160px
    width 160px
    min-height 125px
    background #fff
    position relative
    display inline-block
    &:hover
      .item
        border-color #59c77f
      .bullet:after
        border-color #59c77f
  .item
    border 2px solid #dcdee0
    min-height 90px
    margin-bottom 35px
    position relative
    border-radius 5px
    vertical-align bottom
    display inline-block
    font-size 14px
    width 100%
    &:after
      content ''
      width 21px
      height 21px
      border-bottom 2px solid #dcdee0
      border-left 2px solid #dcdee0
      border-color inherit
      position absolute
      bottom -13px
      transform rotate(-45deg)
      background-color #fff
      left 50%
      margin-left -11.5px
  .bullet
    font-size 16px
    display block
    height 30px
    width 40px
    background-color #fff
    position absolute
    bottom -15px
    left 50%
    margin-left -20px
    z-index 2
    &.first
      left 0
      width auto
      right 50%
      margin-left 0
      margin-right -20px
    &:after
      content ''
      display block
      height 30px
      width 30px
      background #fff
      border 2px solid #dcdee0
      border-radius 15px
      right 5px
      position absolute
      box-sizing border-box