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="{"estimatedTime":"PT1H","difficulty":"medium"}">
<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.
Node.js 18+
Git
A code editor (VS Code recommended)
Install Node.js from the official website
Clone the repository with
git cloneRun
npm installto install dependenciesStart 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-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
| Attribute | Type | Default | Description |
|---|---|---|---|
estimatedTime | string | — | Estimated time in ISO 8601 duration (e.g. "PT1H") |
difficulty | string | — | Difficulty level: easy, medium, or hard |
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.
Common attributes
All block runes share these attributes for layout and theming.
| Attribute | Type | Default | Description |
|---|---|---|---|
width | string | content | Page grid width: content, wide, or full |
spacing | string | — | Vertical spacing: flush, tight, default, loose, or breathe |
inset | string | — | Horizontal padding: flush, tight, default, loose, or breathe |
tint | string | — | Named colour tint from theme configuration |
tint-mode | string | auto | Colour scheme override: auto, dark, or light |
bg | string | — | Named background preset from theme configuration |