refrakt.md

Docs

Runes

Themes

Extend

Project

Learning›HowTo
note

This rune is part of @refrakt-md/learning. Install with npm install @refrakt-md/learning and add "@refrakt-md/learning" to the plugins array in your refrakt.config.json.

HowTo

Step-by-step how-to instructions. Unordered lists become tools/materials needed, ordered lists become steps.

Basic usage

A how-to guide with required tools and numbered steps.

{% howto estimatedTime="PT1H" difficulty="medium" %}
# How to Set Up a Development Environment

Get a local development environment running from scratch.

- Node.js 18+
- Git
- A code editor (VS Code recommended)

1. Install Node.js from the official website
2. Clone the repository with `git clone`
3. Run `npm install` to install dependencies
4. Start the dev server with `npm run dev`
{% /howto %}
<article data-field="content-section" data-rune="how-to" typeof="HowTo" data-rune-fields="{&quot;estimatedTime&quot;:&quot;PT1H&quot;,&quot;difficulty&quot;:&quot;medium&quot;}">
  <meta content="PT1H" property="totalTime">
  <h1 id="how-to-set-up-a-development-environment" data-name="headline" property="name">How to Set Up a Development Environment</h1>
  <p data-name="blurb" property="description">Get a local development environment running from scratch.</p>
  <ul data-name="tools">
    <li data-name="tool" typeof="HowToTool" property="tool">
      <p property="name">Node.js 18+</p>
    </li>
    <li data-name="tool" typeof="HowToTool" property="tool">
      <p property="name">Git</p>
    </li>
    <li data-name="tool" typeof="HowToTool" property="tool">
      <p property="name">A code editor (VS Code recommended)</p>
    </li>
  </ul>
  <ol data-name="steps">
    <li data-name="step" typeof="HowToStep" property="step">
      <p property="text">Install Node.js from the official website</p>
    </li>
    <li data-name="step" typeof="HowToStep" property="step">
      <p property="text">
        Clone the repository with
        <code>git clone</code>
      </p>
    </li>
    <li data-name="step" typeof="HowToStep" property="step">
      <p property="text">
        Run
        <code>npm install</code>
        to install dependencies
      </p>
    </li>
    <li data-name="step" typeof="HowToStep" property="step">
      <p property="text">
        Start the dev server with
        <code>npm run dev</code>
      </p>
    </li>
  </ol>
</article>

How to Set Up a Development Environment

Get a local development environment running from scratch.

Est. time
1h
Difficulty
medium

  • Node.js 18+

  • Git

  • A code editor (VS Code recommended)

  1. Install Node.js from the official website

  2. Clone the repository with git clone

  3. Run npm install to install dependencies

  4. Start the dev server with npm run dev

<article data-field="content-section" typeof="HowTo" class="rf-howto rf-howto--PT1H rf-howto--medium" data-estimated-time="PT1H" data-difficulty="medium" data-elevation="flat" data-rune="how-to" data-density="full">
  <div data-name="content" class="rf-howto__content">
    <header data-name="preamble" class="rf-howto__preamble" data-section="preamble">
      <h1 id="how-to-set-up-a-development-environment" data-name="headline" property="name" class="rf-howto__headline" data-section="title">How to Set Up a Development Environment</h1>
      <p data-name="blurb" property="description" class="rf-howto__blurb" data-section="description">Get a local development environment running from scratch.</p>
    </header>
    <dl data-name="metadata" data-zone="metadata" data-zone-layout="definition-list" class="rf-howto__metadata">
      <div data-name="row" data-field="estimatedTime" class="rf-howto__row">
        <dt data-meta-label="">Est. time</dt>
        <dd data-meta-type="temporal">1h</dd>
      </div>
      <div data-name="row" data-field="difficulty" class="rf-howto__row">
        <dt data-meta-label="">Difficulty</dt>
        <dd>
          <span class="rf-badge" data-meta-type="category">medium</span>
        </dd>
      </div>
    </dl>
    <ul data-name="tools" class="rf-howto__tools">
      <li data-name="tool" typeof="HowToTool" property="tool" class="rf-howto__tool">
        <p property="name">Node.js 18+</p>
      </li>
      <li data-name="tool" typeof="HowToTool" property="tool" class="rf-howto__tool">
        <p property="name">Git</p>
      </li>
      <li data-name="tool" typeof="HowToTool" property="tool" class="rf-howto__tool">
        <p property="name">A code editor (VS Code recommended)</p>
      </li>
    </ul>
    <ol data-name="steps" class="rf-howto__steps" data-sequence="numbered">
      <li data-name="step" typeof="HowToStep" property="step" class="rf-howto__step">
        <p property="text">Install Node.js from the official website</p>
      </li>
      <li data-name="step" typeof="HowToStep" property="step" class="rf-howto__step">
        <p property="text">
          Clone the repository with 
          <code>git clone</code>
        </p>
      </li>
      <li data-name="step" typeof="HowToStep" property="step" class="rf-howto__step">
        <p property="text">
          Run 
          <code>npm install</code>
           to install dependencies
        </p>
      </li>
      <li data-name="step" typeof="HowToStep" property="step" class="rf-howto__step">
        <p property="text">
          Start the dev server with 
          <code>npm run dev</code>
        </p>
      </li>
    </ol>
  </div>
  <meta content="PT1H" property="totalTime" />
</article>

Attributes

AttributeTypeRequiredDescription
estimatedTimestring—Estimated total time to complete all steps (e.g. "30 min")
difficulty"easy" | "medium" | "hard"—Skill level: easy, medium, or hard

Universal attributes

bg

The background layer (SPEC-088): image, video, gradient, flat overlay wash and legibility scrim, in a single injected layer behind the rune's content.

AttributeTypeRequiredDescription
bgstring—Background preset applied to this block
bg-fromstring—Gradient start colour — a semantic token name (→ var(--rf-color-*))
bg-gradient"to-t" | "to-b" | "to-l" | "to-r" | "to-tr" | "to-br" | "to-bl" | "to-tl"—Gradient direction (bounded named set)
bg-gradient-type"linear" | "radial" | "conic"—Gradient type
bg-tostring—Gradient end colour — a semantic token name
bg-viastring—Optional middle gradient stop — a semantic token name
scrim"top" | "bottom" | "left" | "right" | "none"—Scrim direction (heaviest edge); presence turns the scrim on, "none" opts out of the default cover scrim
scrim-blur"none" | "sm" | "md" | "lg"—Frost scrim blur amount
scrim-strength"sm" | "md" | "lg"—Gradient scrim strength
scrim-tone"dark" | "light"—Whether the scrim darkens (for light text) or lightens (for dark text)
scrim-type"gradient" | "frost"—Scrim treatment: gradient (default) or frost (backdrop blur)
elevation

The chrome/depth ladder (SPEC-107). The skin maps each rung to a chrome bundle by attribute, so there is no BEM class.

AttributeTypeRequiredDescription
elevation"sunken" | "flush" | "flat" | "raised" | "floating" | "overlay" | "none" | "sm" | "md" | "lg"—Surface depth on the SPEC-107 ladder (sunken→overlay); none/sm/md/lg are deprecated aliases
inset

Internal padding override.

AttributeTypeRequiredDescription
inset"flush" | "tight" | "default" | "loose" | "breathe"—Inner padding of this block
motion

Scroll-reveal entrance (SPEC-105). The author declares the character, the theme owns the choreography, a behaviour owns the timing.

AttributeTypeRequiredDescription
reveal"none" | "fade" | "slide" | "scale" | "blur"—Scroll-reveal entrance character (none|fade|slide|scale|blur); the theme owns the choreography
staggerboolean—Cascade this block's items in as it reveals (no-op on single-child runes)
prominence

Header emphasis (SPEC-107). Scales a rune's page-section header; the skin maps it to a type register by attribute, so there is no BEM class.

AttributeTypeRequiredDescription
prominence"quiet" | "normal" | "prominent" | "display"—Section-header emphasis (only on page-section-header family runes)
spacing

Block-level rhythm override.

AttributeTypeRequiredDescription
spacing"flush" | "tight" | "default" | "loose" | "breathe"—Vertical spacing above and below this block
substrate

Generated pattern fills (SPEC-087). Markers only — the engine sets the attributes and cell/opacity custom properties, CSS draws the pattern.

AttributeTypeRequiredDescription
substrate"dots" | "grid" | "lines" | "cross" | "checker" | "none"—Generated surface pattern
substrate-fill"inherit" | "inset"—Surface fill the pattern sits on (full colour stays with tint)
substrate-opacity"sm" | "md" | "lg"—Pattern ink strength
substrate-size"sm" | "md" | "lg"—Pattern cell size
substrate-target"self" | "media"—Which surface the pattern fills (overrides the rune/theme default)
tint

Per-rune colour override (SPEC-053): a named tint from the theme registry, with inline per-token overrides layered on top.

AttributeTypeRequiredDescription
tintstring—Color tint preset applied to this block
tint-mode"auto" | "dark" | "light"—Whether the tint adapts to auto, dark, or light mode
width

The track a block rune occupies.

AttributeTypeRequiredDescription
width"compact" | "narrow" | "content" | "wide" | "full"—Maximum width constraint for this block
Not availableWhy
dropcap, readingthis rune declares no prose body
framethis rune declares neither a `frameTarget` nor a media section

Section header

How-to supports an optional eyebrow, headline, and blurb above the section above the steps. Place a short paragraph or heading before the main content to use them. See Page sections for the full syntax.