Search code examples
csshtmlfeed

Vertical News feed design

Would anyone be able to explain how the CSS and HTML markup would look for a vertical news feed design like: http://dribbble.s3.amazonaws.com/users/41027/screenshots/619599/attachments/51139/TheSecret_Concept.png

I really like the icons + line with text on the right side. I know CSS has the content attribute I can add a symbol and use border for the vertical line but I was wondering how it may be possible to use images/bootstrap icons instead of declaring the symbol in CSS.

Any tips or tutorials would be greatly appreciated.

Solution 

  • This is some truly horrific CSS, for which I should probably be shot, however, it seems to be vaguely something like you posted. That is; assuming this is what you were talking about.
    


    Anyway, assuming you're talking about those little pieces of text by Zane David or whoever, with the icon on the side and a line running through the icons, here is my terrible attempt at doing it with an unordered list with modified bullets and an hr running through them. The 
     is definitely not the ideal option, however, I think the ul with li's with custom bullets is the right way to go. Excuse the leaves by the way.
    


    http://jsbin.com/efiveq/1
    


    If you completely ignore my horrible positioning and such, you should still be able to see that an unordered list is probably the best way to go.
    


    Edit: switch out the code for .news-feed .well:after with:
    

.news-feed .well:after {
content:"";
position: absolute;
top: 60%;
left: 5px;
border-top: 20px solid #A5A5A5;
border-top-color: inherit;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
-webkit-transform: rotate(90deg);

    }