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.
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.
<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> |
/* 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; | |
} | |
} | |
} |