CSS: styling an RSS feed reader

Styling an RSS feed reader is easy with CSS. In this post I'm going to use the main RSS feed of the jQuery's blog to show you some CSS techniques that you can reuse in your own project. The feed will be fetched with jQuery using a local copy of it, but you can always use a server-side language to retrieve its contents. We'll see how to accomplish this as well. First, our basic markup structure:

<h1><a href="http://jquery.com">jQuery</a></h1>

<div id="feed"></div>

The feed container will be populated later with jQuery. For now, let's style our page and the main heading:

body {
 margin: 0;
 padding: 2em 0;
 font: 62.5% Arial, sans-serif;
 background: #39424b url(jquery-bg.jpg) repeat-x;
}

h1 {
 margin: 0 auto;
 height: 53px;
 width: 215px;
 position: relative;
 top: 1em;
}

h1 a {
 display: block;
 width: 100%;
 height: 100%;
 text-indent: -1000em;
 background: url(jquery-logo.gif) no-repeat;
}

We set a tiled background image on the top of the page that will be repeated horizontally. The background color of the page must match the end color of the background image. To accomplish this, we used a simple color picker to get the hexadecimal value used there.

The link contained within the main heading will have a background image, so we need to replace its text with the background image using negative text indentation. The dimensions of the heading and the link must match the overall dimensions of the background image.

Now we have to retrieve our RSS feed. As said earlier, we've used a local copy of the feed, but you can use also a server-side language to accomplish this task. For example, in PHP you can create a file named jquery-feed.php with the following code:

<?php
header('Content-Type: text/xml');
$feed = file_get_contents('http://jquery.com/blog/feed/');
echo $feed;
?>

In the following jQuery code, simply replace jquery-feed.xml with jquery-feed.php to use the remote feed:

$(function() {

  $.ajax({
    type: 'GET',
    dataType: 'xml',
    url: 'jquery-feed.xml',
    success: function(xml) {
    
      $(xml).find('item').each(function(index) {
      
      
        var $item = $(this);
        var $title = $item.find('title').text();
        var $description = $item.find('description').text();
        var $link = $item.find(':last').text();
        
        var html = '<div class="item">';
        html += '<h2><a href="' + $link + '">' + $title + '</a></h2>';
        html += '<p>' + $description + '</p>';
        html += '</div>';
        
        $(html).appendTo('#feed');
      
      
        return index < 3;
      
      });
    
    
    }
    
  });
});

This code retrieves the first four entries of our feed and create the following HTML structure:

<div id="feed">

  <div class="item">
  
    <h2><a href="...">...</a></h2>
    <p>...</p>
  
  </div>
  
  <!--more items-->

</div>

Now we can stylize both the feed container and its entries. We want two items per line, so we need to use floats to accomplish this:

#feed {
 width: 45%;
 height: 100%;
 overflow: hidden;
 font-size: 1.3em;
 margin: 190px auto 0 auto;
 color: #fff;
 background: url(jquery-content.gif) repeat-x;
 padding: 1em;
}

#feed div.item {
 float: left;
 width: 49%;
 height: 13em;
 margin-bottom: 1em;
 margin-right: 0.5em;
}

#feed div.item h2 {
 font: normal 1.2em "Trebuchet MS", Trebuchet, sans-serif;
 background: #0f67a1;
 color: #fff;
 padding: 5px;
 margin: 0;
 text-align: center;
}

#feed div.item h2 a {
 color: #fff;
 text-decoration: none;
}

#feed div.item p {
 margin: 4px 0 1em 0;
 line-height: 1.4;
}

We take advantage of a peculiarity of floats: when there's no more room on a line, floats are automatically pushed on the next line. Since each floated item has a width equal to the 49% of its container, plus a right margin, we can have only two items per line. But this is not enough: to get more control over the vertical formatting of each item, we've also specified an height and a bottom margin so that our items will have a certain amount of vertical space.

You can see the demo below.

Demo

Live demo