Grids and columns¶
A grid expresses a relationship between peers. Start with two columns and let narrow screens return to one. If every section needs to be read in order, a single column often communicates more clearly.
The examples use the shared theme and setup. Keep the
.fltheme-components wrapper around Basecoat and du- component markup.
Grids · 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.
-
Write the text
Give the reader one clear subject and a useful heading.
-
Add a picture
Show the detail that the prose asks the reader to inspect.
<div class="grid cards">
<ul>
<li>
<p><span class="twemoji"><svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m18.5 4 1.16 4.35-.96.26c-.45-.87-.91-1.74-1.44-2.18C16.73 6 16.11 6 15.5 6H13v10.5c0 .5 0 1 .33 1.25.34.25 1 .25 1.67.25v1H9v-1c.67 0 1.33 0 1.67-.25.33-.25.33-.75.33-1.25V6H8.5c-.61 0-1.23 0-1.76.43-.53.44-.99 1.31-1.44 2.18l-.96-.26L5.5 4z"></path></svg></span> <strong>Write the text</strong></p>
<p>Give the reader one clear subject and a useful heading.</p>
<p><a href="../../text/type/">Type and emphasis</a></p>
</li>
<li>
<p><span class="twemoji"><svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m8.5 13.5 2.5 3 3.5-4.5 4.5 6H5m16 1V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2"></path></svg></span> <strong>Add a picture</strong></p>
<p>Show the detail that the prose asks the reader to inspect.</p>
<p><a href="../../images/pictures/">Pictures and captions</a></p>
</li>
</ul>
</div><div class="grid cards" markdown="1">
- :material-format-text: **Write the text**
Give the reader one clear subject and a useful heading.
[Type and emphasis](../text/type.md)
- :material-image: **Add a picture**
Show the detail that the prose asks the reader to inspect.
[Pictures and captions](../images/pictures.md)
</div>Syntax and variants in MaterialX
Grids: authoring details¶
Using card grids¶
Use a card grid for peers that deserve equal scanning weight, such as three routes into a guide. Keep the labels parallel and let the grid collapse to one column when the available width runs out.
List syntax¶
The list form is the shortest authoring syntax when every item has the same basic shape.
-
Read the foundations
Establish type, measure, colour, and baseline imagery before composing a page.
-
Choose a layout
Add only the structure the relationship between items requires.
-
Apply a house pattern
Use FontLab-owned widths and editorial compositions for exceptional media.
<div class="grid cards">
<ul>
<li>
<p><strong>Read the foundations</strong></p>
<p>Establish type, measure, colour, and baseline imagery before composing a
page.</p>
<p><a href="../../design/foundations/">Open Foundations</a></p>
</li>
<li>
<p><strong>Choose a layout</strong></p>
<p>Add only the structure the relationship between items requires.</p>
<p><a href="../disclosure/#daisyui-accordion">Continue on this page</a></p>
</li>
<li>
<p><strong>Apply a house pattern</strong></p>
<p>Use FontLab-owned widths and editorial compositions for exceptional media.</p>
<p><a href="../../design/fontlab-patterns/">Open FontLab patterns</a></p>
</li>
</ul>
</div><div class="grid cards" markdown>
- **Read the foundations**
Establish type, measure, colour, and baseline imagery before composing a
page.
[Open Foundations](../design/foundations.md)
- **Choose a layout**
Add only the structure the relationship between items requires.
[Continue on this page](disclosure.md#daisyui-accordion)
- **Apply a house pattern**
Use FontLab-owned widths and editorial compositions for exceptional media.
[Open FontLab patterns](../design/fontlab-patterns.md)
</div>Block syntax¶
The block form can mix different Markdown blocks while preserving equal grid tracks. Use it when the content types differ, not merely to avoid writing a list.
A short principle
<div class="grid">
<p class="card"><strong>A short principle</strong></p>
</div><div class="grid" markdown>
**A short principle**
{ .card }
</div>Using generic grids¶
Generic grids arrange arbitrary authored blocks without adding card treatment. They suit comparisons in which the content already carries its own structure.
Editorial column
Best for explanation, evidence, and a single reading path.
Component row
Best for comparable controls or states that need direct visual inspection.
Do not wrap this structure in .fl-ui; doing so would blur the declared
MaterialX/daisyUI ownership boundary.
<div class="grid">
<div class="admonition note">
<p class="admonition-title">Editorial column</p>
<p>Best for explanation, evidence, and a single reading path.</p>
</div>
<div class="admonition tip">
<p class="admonition-title">Component row</p>
<p>Best for comparable controls or states that need direct visual inspection.</p>
</div>
</div>
<p>Do not wrap this structure in <code>.fl-ui</code>; doing so would blur the declared
MaterialX/daisyUI ownership boundary.</p><div class="grid" markdown>
!!! note "Editorial column"
Best for explanation, evidence, and a single reading path.
!!! tip "Component row"
Best for comparable controls or states that need direct visual inspection.
</div>
Do not wrap this structure in `.fl-ui`; doing so would blur the declared
MaterialX/daisyUI ownership boundary.Wrap a row of actions¶
Use .fl-ui-row for a short set of related actions. They wrap in source order when their labels need more room.
This pattern uses the shared FontLab editorial styles described in Theme and setup.
<div class="fltheme-components fl-ui-row">
<a class="du-btn" href="https://help.fontlab.com/fontlab/8/">FontLab 8 manual</a>
<a class="du-btn du-btn-outline" href="https://www.fontlab.com/font-converter/">Font conversion</a>
</div><div class="fltheme-components fl-ui-row">
<a class="du-btn" href="https://help.fontlab.com/fontlab/8/">FontLab 8 manual</a>
<a class="du-btn du-btn-outline" href="https://www.fontlab.com/font-converter/">Font conversion</a>
</div>Stack related actions¶
Use .fl-ui-stack when labels are easier to scan in one column. Spacing does not replace a group label or explain how two actions relate.
This pattern uses the shared FontLab editorial styles described in Theme and setup.
<div class="fltheme-components fl-ui-stack">
<a class="du-btn" href="https://help.fontlab.com/fontlab/8/">FontLab 8 manual</a>
<a class="du-btn du-btn-outline" href="https://help.vexy.art/lines/">Vexy Lines help</a>
</div><div class="fltheme-components fl-ui-stack">
<a class="du-btn" href="https://help.fontlab.com/fontlab/8/">FontLab 8 manual</a>
<a class="du-btn du-btn-outline" href="https://help.vexy.art/lines/">Vexy Lines help</a>
</div>A grid of editorial cards¶
The editorial .fl-showcase-grid class arranges peers. Keep the heading levels and reading order meaningful when the grid becomes a single column.
This pattern uses the shared FontLab editorial styles described in Theme and setup.
<div class="fl-showcase-grid">
<section class="fl-card">
<h3 id="preserve-the-family">Preserve the family<a class="headerlink" href="#preserve-the-family" title="Permanent link">¶</a></h3>
<p>Names, spacing and kerning carry the type designer’s decisions.</p>
</section>
<section class="fl-card">
<h3 id="inspect-the-result">Inspect the result<a class="headerlink" href="#inspect-the-result" title="Permanent link">¶</a></h3>
<p>Compare converted fonts with their source in the destination application.</p>
</section>
</div><div class="fl-showcase-grid" markdown="1">
<section class="fl-card" markdown="1">
### Preserve the family
Names, spacing and kerning carry the type designer’s decisions.
</section>
<section class="fl-card" markdown="1">
### Inspect the result
Compare converted fonts with their source in the destination application.
</section>
</div>