Activity-Feed.markdown

Activity Feed

Today I had to build an activity feed, and I liked my solution so much that I decided to share it!

A Pen by Julien Melissas on CodePen.

License.

index.html

<h2>Activity Feed</h2>
<ol class="activity-feed">
  <li class="feed-item">
    <time class="date" datetime="9-25">Sep 25</time>
    <span class="text">Responded to need <a href="single-need.php">“Volunteer opportunity”</a></span>
  </li>
  <li class="feed-item">
    <time class="date" datetime="9-24">Sep 24</time>
    <span class="text">Added an interest “Volunteer Activities”</span>
  </li>
  <li class="feed-item">
    <time class="date" datetime="9-23">Sep 23</time>
    <span class="text">Joined the group <a href="single-group.php">“Boardsmanship Forum”</a></span>
  </li>
  <li class="feed-item">
    <time class="date" datetime="9-21">Sep 21</time>
    <span class="text">Responded to need <a href="single-need.php">“In-Kind Opportunity”</a></span>
  </li>
  <li class="feed-item">
    <time class="date" datetime="9-18">Sep 18</time>
    <span class="text">Created need <a href="single-need.php">“Volunteer Opportunity”</a></span>
  </li>
  <li class="feed-item">
    <time class="date" datetime="9-17">Sep 17</time>
    <span class="text">Attending the event <a href="single-event.php">“Some New Event”</a></span>
  </li>
</ol>

style.less

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body {
  font-family: 'Open Sans', sans-serif;
  color: #4e555f;
  font-size: 14px;
}

// Colors:
@brand-primary: #50bced;   // Blue
@brand-secondary: #f37167; // Orange

a {
  color: @brand-primary;
}

.activity-feed {
  padding: 15px;
  list-style: none;

  .feed-item {
    position: relative;
    padding-bottom: 20px;
    padding-left: 30px;
    border-left: 2px solid #e4e8eb;

    &:last-child {
      border-color: transparent;
    }

    &::after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: -6px;
      width: 10px;
      height: 10px;
      border-radius: 6px;
      background: #fff;
      border: 1px solid @brand-secondary;
    }

    .date {
      display: block;
      position: relative;
      top: -5px;
      color: #8c96a3;
      text-transform: uppercase;
      font-size: 13px;
    }
    .text {
      position: relative;
      top: -3px;
    }
  }
}