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.
Created
December 11, 2014 15:03
-
-
Save anonymous/b50ac2021b28a3a48384 to your computer and use it in GitHub Desktop.
Activity Feed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment