Write your recipe cards in a consistent style to improve readability and navigation! We call this the 4S Style: With Summary, Screenshots, Specifics, and Sample Instructions.

Screenshots

1. First Concept

Thumbnails will soon be clickable to see full resolution!

Specifics

Here are the components of a good “4S” recipe card:

Front matter

navigation, title, author, and a published date / updated date for freshness.

Summary

  • Should fit on a printed 4x6 index card!

  • Imperative language: Place images thorughout -vs- passive Images can be placed.

https://github.com/erlang/otp/wiki/writing-good-commit-messages

Screenshots

  • A number (for ordering) and a caption. (maybe defined in the filename)

  • Thumbnails with Hi-rez link outs, CANNOT use client assets or brand, need our house brand.

  • Like looking at 4 different amazon product variations.

  • Enable Pure screenshots -vs- annotation screenshots.

  • Screenshots include different variations of the configuration - Hero Sliders with text on /off.

  • shoudl be able to copy those screenshots.jpg inline with the markdown content in albert.recipes.

  • But for now we can omit screenshot section for cards were it doesn’t make sense today (Data instructions, etc)

Specifics

  • Great or bulleted lists, explainers, gotcha.
  • Enable inline imagery (like MZ’s attach instructions)

Sample Instruction

  • Copy + Paste sample code at bottom, drop them into your recipe, tweak a bit.
  • Links: Any recipe card provides links to other cards, and to external resource, and images.
  • Links to Images should have a camera icon
  • LInks to External sites shoudl have an out arrow.
  • Links to recipe cards could have a notecard fontawesome type of icon

Source Instructions

Inline Images Markdown

![1. First Concept](images/recipe-card-1-first-concept.jpg){:class="screenshot-thumbnail"}