Building a blog layout

This tutorial builds a complete blog structure: a blog listing page, an individual article page template with a sidebar, and proper typography for long-form reading.

What you’ll build: A two-page blog (index + article) with article cards, a two-column article layout, and readable prose styles.

Time to complete: ~55 minutes.

Step 1: Project setup

1. Create a Foundation project

   New Project → Foundation. Name it “Blog.”

2. Set typography base

   Select the body element via Outline pane. Set font-family to a readable serif or sans-serif (Inter, Merriweather, or Georgia), line-height: 1.7, color to a near-black (not pure black — e.g., #1a1a1a).

Step 2: Blog listing page (index.html)

1. Insert a sticky header

   Header element with your blog name as a link and a nav with Home, About, RSS links. Use a flex row layout.

2. Create the hero area

   A simple section with: blog name as h1, tagline as p, and a featured article card below.

3. Build the article grid

   Insert a Section. Class: .post-grid. Set display: grid, grid-template-columns: repeat(3, 1fr), gap: 2rem, padding: 0 2rem 4rem, max-width: 1200px, margin: 0 auto.

4. Create an article card

   Inside the grid, insert a Container. Class: .post-card. Structure:

   • An Image element (thumbnail, aspect-ratio: 16/9, object-fit: cover, border-radius top corners)
   • A text section: category tag (small, uppercase, brand color), h2 (article title, 1.2em, font-weight: 700), p (excerpt, 2 lines, color: #6b7280), author + date line Set the card: border: 1px solid #e5e7eb, border-radius: 8px, overflow: hidden, transition: transform 0.2s ease, box-shadow 0.2s ease. On hover: transform: translateY(-4px), box-shadow: 0 12px 30px rgba(0,0,0,0.1).
5. Duplicate cards

   Duplicate the card 5 times. Update text and images for each. You now have 6 article cards in a 3×2 grid.

Step 3: Article page (article.html)

1. Add a new page

   Page Manager → + → name “Article.” Use a blank template.

2. Set up the two-column layout

   Insert a Section. Class: .article-shell. Set display: grid, grid-template-columns: 1fr 300px, gap: 4rem, max-width: 1100px, margin: 0 auto, padding: 3rem 2rem.

3. Build the article body (left column)

   Insert a Container. Class: .article-body. Inside:

   • Category tag
   • h1 (article title, clamp(2rem, 4vw, 3rem))
   • Author/date/read-time meta line
   • Featured image (full width, aspect-ratio: 2/1, object-fit: cover, border-radius: 8px)
   • Paragraphs (max-width: 68ch to keep lines readable)
   • h2 subheadings
   • A blockquote
   • More paragraphs
4. Build the sidebar (right column)

   Insert a Container. Class: .sidebar. Add:

   • An “About the author” card (photo, name, bio snippet)
   • A “Related articles” list (3 article links with thumbnail)
   • A “Subscribe” newsletter form (email input + button) Set the sidebar: position: sticky, top: 80px, align-self: start (so it sticks while article scrolls).

Step 4: Article typography

For long-form reading, set these styles on the .article-body paragraphs:

• font-size: 1.125rem (18px)
• line-height: 1.75
• color: #374151

For headings inside the article:

• font-size: clamp(1.25rem, 2vw, 1.75rem)
• margin-top: 2.5rem
• margin-bottom: 1rem
• font-weight: 700

Step 5: Responsive

At 768px:

• .article-shell: grid-template-columns: 1fr (sidebar moves below article)
• .sidebar: remove position: sticky (it scrolls normally below the article)
• .post-grid: grid-template-columns: repeat(2, 1fr)

At 480px:

• .post-grid: grid-template-columns: 1fr