Hacker News CSS Framework


Hacker News is a hot spot for programmers to share news about tech and to show off their projects. Since this is a site for developers to relax, the simple layout is loved by all as a break from the “in your face-ness” of other sites. So much so, that other sites have started to mimic the design, such as Data Tau and Firespotting!

Bounty: Definitely the front page of Hacker News. Big resume booster and something to bring up in interviews.

Goal: Build a CSS framework so simple, that you can turn any correctly formatted html page into a Hacker News Clone just by copy-pasting a bit of CSS at the top


  1. Focus on just two pages of Hacker News, the list page and post page
  2. Make sure it looks good on mobile!
  3. The goal is to write as little CSS as possible. First try to create a clone of hacker news, orange and everything. Then we will utilize CSS variables to make it customizable.
  4. This is an exercise in Code Golfing Write as little code as possible, and stay organized.
  5. Break down the bare minimum html structure you need to accommodate the relevant features needed to just browse the site (no login, search, etc). Challenge, try not to use any classes or ids, just semantic elements.
  <span>Hacker News</span>
    <li><a href="#">new</a></li>
    <li><a href="#">comments</a></li>
    <li><a href="#">ask</a></li>
    <li><a href="#">show</a></li>
    <li><a href="#">jobs</a></li>
    <li><a href="#">submit</a></li>
  <li>First Post</li>