Skip to content
GRIMOIRY

Not in the book · Reference for whoever builds a page

Icons, canonically

Six ways an icon appears here, and no seventh. Anything outside this set is a decision to make on purpose, not by reaching for a size class.

Phosphor light weight inlined on render

The component

A Blade component. The SVG is read off the theme's own disk and dropped into the page, so no icon font is loaded and only what is used ships.

Size comes from the parent's font-size and colour from currentColor, which is why the classes below set those two things and nothing else. 

<x-grimoiry::icon name="key" />
<x-grimoiry::icon name="warning" class="text-ember" />
<x-grimoiry::icon name="arrow-up-right" label="opens a new tab" />

A name that does not exist fails the render

Without label the icon is aria-hidden, which is right almost always: the words next to it already say what it means. Pass a label only when the icon is the whole control and nothing else names it.

The six

Each rule also names the context that applies it on its own, so a sidebar row gets the inline treatment without being told.

1 · Tile

88px plate, 32px mark

A block that earns a mark of its own. Hatched plate, gold drawing. One per page at most, or it stops meaning anything.

<span class="ico-tile"><x-grimoiry::icon name="book-open-text" /></span>

2 · Section

1.125em, gold

Divination

Before a heading, a notch larger than the words. Applied on its own inside .rail-head and .callout.

<h2><x-grimoiry::icon name="eye" class="ico-section" /> Divination</h2>

3 · Inline

1em, gold-dim

Recipes Spells

Nav rows, list items, anything carrying a label. Applied on its own inside .side-item.

<a class="side-item"><x-grimoiry::icon name="scroll" /> Recipes</a>

4 · Meta

0.875em, inherits

10 min 4 steps Docker

Mono small print: chips, times, the line under a code block. Takes the colour of the text it sits in, so it dims with it.

<span class="pill"><x-grimoiry::icon name="clock" /> 10 min</span>

5 · Action

1em, inherits

Continue with GitHub

Buttons and controls. Inherits, so it follows the button through hover, focus and the copied state. The copy button in a code block is the same case.

<a class="btn btn-gold"><x-grimoiry::icon name="github-logo" weight="fill" /> Continue</a>

6 · Arrow

1em, inherits

Read the recipes Source

Never decorative. If there is an arrow the thing is clickable, and it moves on hover. Use arrow-right inside a page, arrow-up-right when it leaves the site.

<a class="link-arrow">Read it <span class="arr"><x-grimoiry::icon name="arrow-right" /></span></a>

Code

A command, and a button to take it away with. The block is a two-column grid: the code in one track and the button in the other, so the button cannot end up outside the box however the padding is set.

One line

grid, button top right

$ grim doctor

The common case. Write the prompt as its own span. The copy button strips it, because nobody wants a dollar sign pasted into a shell.

Several

same block, taller

$ grim create-project myapp \
    --no-install
$ cd myapp
$ grim install

Written inline rather than through the partial, because the partial takes one command. Continuations and flags are marked up so they can be coloured apart from the command.

Narrow

.code-sm, wraps

$ curl -sS https://grim.grimoiry.com/install.sh | bash

For a rail. Smaller, and it wraps rather than scrolling sideways: a horizontal scrollbar in a 280px column is one nobody finds.

The prompt spans are stripped on copy and the rest is taken verbatim, so what lands on the clipboard is what you would type. Check that after editing a block: it is the one part of a code block that has no visual tell when it breaks.

Which icon

Group, chapter and tome icons live in docs/books.json of the CLI, next to the group they belong to. Nothing picks an icon in a template.

Spell groups

Recipe chapters

Getting grim download-simple Starting a project folders Keeping a project current hourglass-medium Shipping rocket-launch Working on modules puzzle-piece Shared dev boxes desktop-tower

Tomes

How grim is assembled tree-structure Release trains train-simple Project and package manifests file-text What grim owns in your project seal-check

Fixed meanings

A noteinfo Something that breakswarning Copycopy-simple Copiedcheck Open the menulist Closex Breadcrumb separatorcaret-right

Wordmark

Goldman, tracked out to 0.3em. Flat-sided and narrow, and deliberately not one of the three faces that set the reading: the chrome is already mono, and a mark that matches the labels around it is not a mark.

It sets one word on the whole site, so it ships as one weight in latin only. Nothing else may use it.

400 · uppercase · 0.30em 17 kB woff2

GRIMOIRY 
<a href="/" class="wordmark">GRIMOIRY</a>

Initials

Ways to open a body of text. All of them go on the first paragraph of a page and nowhere else, so the reader gets one per page at most.

Plain

::first-letter, 4 lines, boxed

This is the first command most people run. Point it at a name and you get a directory with a modular Laravel application in it, a Docker environment already wired up, and a local domain that works in a browser.

Nothing in the markup: the rule hangs off ::first-letter, so the paragraph is plain text and the letter stays selectable and searchable. Use this one by default. 

<p class="dropcap">This is the first…</p>

Plain, modern

Same rule, wordmark face

This is the first command most people run. Point it at a name and you get a directory with a modular Laravel application in it, a Docker environment already wired up, and a local domain that works in a browser.

The same rule with the letter set in the wordmark face instead of the text face, so the page opens on the mark rather than on the body. Goldman's caps are flat-sided and nearly fill the em, which is why it takes a smaller size and a squarer box to drop the same four lines. Use it where a page leans technical and the woodcut would be too much. 

<p class="dropcap dropcap-mark">This is the first…</p>

Cut

Block, 5 lines, rinceau

This is the first command most people run. Point it at a name and you get a directory with a modular Laravel application in it, a Docker environment already wired up, and a local domain that works in a browser. It asks what you want in the project rather than handing you a fixed skeleton, which is the whole reason it takes a minute longer than a template would.

A block of rinceau with the letter standing in it, after a printer's woodcut. One scroll is drawn once and repeated at three sizes to make a quadrant; the quadrant is mirrored into the other three, which is how the blocks were cut and why it looks of a piece. It drops five lines rather than four, because this much foliage needs the room. The drawing is aria-hidden and the letter is repeated as screen-reader text, so the paragraph still reads as a word. Keep it for a page that opens something. 

<p><x-grimoiry::initial letter="T" />his is the first…</p>

The plate

Not an icon, and not in the six. A drawn plate for a hero that needs a visual and has no photograph to use. It is decorative, so it is aria-hidden and it stops turning under reduced motion. The four labels default to the stack; a page that means something else by it passes north, east, south and west. It takes the sheet's accent and fills whatever box it is given, so a rail gets the same drawing at a third of the size.

Components/sigil.blade.php In the rail on Secrets