CD Blog Archive Template

A one-column page used for Community Development's blog archive page, which lists links to blog entries.

Resize window to see mobile.

page screenshot
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5

  1. Section Header

    Wrap header with <header class="section-header">. Define section further with <h3> and <a id="x">, where x = section header id; color is from section header class. On scroll on desktop and tablet, JavaScript will affix header to top (with Menu and Search). (See scripts.js.)

  2. Main body

    Define body content with a wrapper <main id="main" class="m-all t-all d-all cf" role="main">. Define inner wrapper with <article role="article" class="m-all t-10of12 d-10of12 t-o-1of12 d-o-1of12">. This functions as desktop and tablet layout.

  3. Social links

    Create a container with <div id="share-links"> and call appropriate icons and links, following the order seen here.

  4. Header

    Use <h1 class="padding-bottom-add desktop"> for desktop; and <h1 class="mobile"> for mobile.

  5. Blog post link and teaser

    Code the template to pull blog posts in descending order by date. Then, style the title link with <h2 class="margin-bottom-none">; and the date with <p class="meta date">.