Skip to content

Lists and steps

Use bullets for peers and numbers for actions that must happen in order. Keep each step executable on its own. If a step needs a paragraph of explanation, put that explanation before or after the list.

A short list of capabilities

Vexy Lines supports several stages of vector composition:

  • Bring in a source image, such as PNG, JPEG, SVG or PDF.
  • Choose a fill that responds to the image's tone and edges.
  • Compose the result with layers, groups and masks.
  • Export vectors as SVG, PDF or EPS.
HTML · compiled output
<p>Vexy Lines supports several stages of vector composition:</p>
<ul>
<li>Bring in a source image, such as PNG, JPEG, <abbr title="Scalable Vector Graphics">SVG</abbr> or PDF.</li>
<li>Choose a fill that responds to the image's tone and edges.</li>
<li>Compose the result with layers, groups and masks.</li>
<li>Export vectors as <abbr title="Scalable Vector Graphics">SVG</abbr>, PDF or EPS.</li>
</ul>
Markdown · authored source
Vexy Lines supports several stages of vector composition:

- Bring in a source image, such as PNG, JPEG, SVG or PDF.
- Choose a fill that responds to the image's tone and edges.
- Compose the result with layers, groups and masks.
- Export vectors as SVG, PDF or EPS.

Adapted from the How it works section of Vexy Lines.

A procedure with visible stages

The MaterialX .steps class adds a visual sequence to an ordinary ordered list. Keep the ordered-list meaning in the source; numbering must survive if the stylesheet does not load.

  1. Bring a source image into Vexy Lines.
  2. Choose a fill.
  3. Compose the artwork with layers and masks.
  4. Export the artwork as SVG or PDF.
HTML · compiled output
<div class="steps">
<ol>
<li>Bring a source image into Vexy Lines.</li>
<li>Choose a fill.</li>
<li>Compose the artwork with layers and masks.</li>
<li>Export the artwork as <abbr title="Scalable Vector Graphics">SVG</abbr> or PDF.</li>
</ol>
</div>
Markdown · authored source
<div class="steps" markdown="1">

1. Bring a source image into Vexy Lines.
2. Choose a fill.
3. Compose the artwork with layers and masks.
4. Export the artwork as SVG or PDF.

</div>

The steps adapt the same Vexy source. They describe the sequence without inventing menu labels.

A status sequence

daisyUI steps are useful when you need to distinguish completed and upcoming stages. Add words as well as colour. These labels are sample workflow states, not the state of an actual export.

  1. Draft complete
  2. Review in progress
  3. Publish pending
HTML · compiled output
<div class="fltheme-components">
<ol aria-label="Example publication workflow" class="du-steps du-steps-vertical">
<li class="du-step du-step-primary">Draft complete</li>
<li aria-current="step" class="du-step du-step-primary">Review in progress</li>
<li class="du-step">Publish pending</li>
</ol>
</div>

Define a term once

Definition lists keep a term beside its meaning without the repeated column headings of a table.

Source image
The image you bring into Vexy Lines.
Fill
A method for drawing vector marks from the source image.
Export
The file you save for use outside the composition.
HTML · compiled output
<dl>
<dt>Source image</dt>
<dd>The image you bring into Vexy Lines.</dd>
<dt>Fill</dt>
<dd>A method for drawing vector marks from the source image.</dd>
<dt>Export</dt>
<dd>The file you save for use outside the composition.</dd>
</dl>
Markdown · authored source
Source image
:   The image you bring into Vexy Lines.

Fill
:   A method for drawing vector marks from the source image.

Export
:   The file you save for use outside the composition.

These descriptions adapt the Vexy Lines product introduction. Use a table instead when every term has the same three or more properties to compare.

Lists · MaterialX

MaterialX renders this pattern from Markdown. The source panel contains the actual authoring syntax, including attribute lists where they apply. Keep the renderer extensions enabled on the destination.

  • Inspect the family names.
  • Compare outlines.
  • Review spacing and kerning.
Family
Related styles presented under one name.
  • Preserve the source files.
  • Inspect the converted family.
HTML · compiled output
<ul>
<li>Inspect the family names.</li>
<li>Compare outlines.</li>
<li>Review spacing and kerning.</li>
</ul>
<dl>
<dt>Family</dt>
<dd>Related styles presented under one name.</dd>
</dl>
<ul class="task-list">
<li class="task-list-item"><label class="task-list-control"><input checked disabled type="checkbox"><span class="task-list-indicator"></span></label> Preserve the source files.</li>
<li class="task-list-item"><label class="task-list-control"><input disabled type="checkbox"><span class="task-list-indicator"></span></label> Inspect the converted family.</li>
</ul>
Markdown · authored source
- Inspect the family names.
- Compare outlines.
- Review spacing and kerning.

Family
:   Related styles presented under one name.

- [x] Preserve the source files.
- [ ] Inspect the converted family.

Syntax and variants in MaterialX

Steps · MaterialX

MaterialX renders this pattern from Markdown. The source panel contains the actual authoring syntax, including attribute lists where they apply. Keep the renderer extensions enabled on the destination.

  1. Open the source font.
  2. Inspect its family names.
  3. Compare the exported result.
HTML · compiled output
<ol class="steps">
<li>Open the source font.</li>
<li>Inspect its family names.</li>
<li>Compare the exported result.</li>
</ol>
Markdown · authored source
<ol class="steps" markdown="1">

1. Open the source font.
2. Inspect its family names.
3. Compare the exported result.

</ol>

Syntax and variants in MaterialX

Steps · daisyUI

Use the daisyUI list when the stages are short labels. Completed stages use step-primary; the current stage also receives aria-current="step"; later stages remain unaccented. The original Draft, Rest, Cut, Ship sequence is the canonical specimen.

  • Draft
  • Rest
  • Cut
  • Ship
HTML · compiled output
<div class="fltheme-components">
<ul class="du-steps">
<li class="du-step du-step-primary">Draft</li>
<li class="du-step du-step-primary">Rest</li>
<li aria-current="step" class="du-step du-step-primary">Cut</li>
<li class="du-step">Ship</li>
</ul>
</div>

Syntax and variants in daisyUI

Lists: authoring details

Using unordered lists

Use bullets for peers:

  • One type system for prose and interface text.
  • Semantic tokens for state.
  • Whitespace for structure.

Using ordered lists

Use numbers when order matters:

  1. Draft the explanation.
  2. Add the smallest useful specimen.
  3. Verify it in the rendered site.

Using definition lists

Use a definition list for terms and their meanings:

Measure
The width of the reading column.
Renderer
The locked stack that turns source Markdown into the site.

Using task lists

Task lists report progress; they are not interactive form controls:

  • Source is tracked
  • Specimen renders
  • Page is reviewed in every subtheme

Steps: authoring details

List Mode

Use list mode for a direct procedure whose steps need no internal headings.

  1. Write the rough sentence without polishing it.
  2. Read it aloud once.
  3. Remove the clause that repeats the point.
HTML · compiled output
<div class="steps">
<ol>
<li>Write the rough sentence without polishing it.</li>
<li>Read it aloud once.</li>
<li>Remove the clause that repeats the point.</li>
</ol>
</div>
Markdown · authored source
<div class="steps" markdown="1">

1. Write the rough sentence without polishing it.
2. Read it aloud once.
3. Remove the clause that repeats the point.

</div>

Complex List Mode

Use complex list mode when a step needs a paragraph, list, code sample, or other supporting material. Keep the action in the first sentence so scanning still works.

  1. Draft without stopping. Capture the claim and its evidence before choosing the final phrasing.

  2. Name the reader.

  3. Name the decision they need to make.

  4. Rest the draft. Return when you can notice what the prose actually says, rather than what you remember intending.

  5. Cut in descending order. Remove repeated paragraphs, then repeated sentences, then words that earn nothing.

HTML · compiled output
<div class="steps">
<ol>
<li>
<p><strong>Draft without stopping.</strong> Capture the claim and its evidence before
   choosing the final phrasing.</p>
</li>
<li>
<p>Name the reader.</p>
</li>
<li>
<p>Name the decision they need to make.</p>
</li>
<li>
<p><strong>Rest the draft.</strong> Return when you can notice what the prose actually says,
   rather than what you remember intending.</p>
</li>
<li>
<p><strong>Cut in descending order.</strong> Remove repeated paragraphs, then repeated
   sentences, then words that earn nothing.</p>
</li>
</ol>
</div>
Markdown · authored source
<div class="steps" markdown="1">

1. **Draft without stopping.** Capture the claim and its evidence before
   choosing the final phrasing.

   - Name the reader.
   - Name the decision they need to make.

2. **Rest the draft.** Return when you can notice what the prose actually says,
   rather than what you remember intending.

3. **Cut in descending order.** Remove repeated paragraphs, then repeated
   sentences, then words that earn nothing.

</div>

Heading Mode

Use heading mode only when each stage is a substantial section that readers may need to link to directly.

HTML · compiled output
<div class="steps">
</div>
Markdown · authored source
<div class="steps" markdown="1">