Things you put in a line
Some things on a slide are smaller than a layout and bigger than a word: an answer
to “is it done?”, a label for the team that owns it, a trend over the last eight
weeks, a face for the person who owns it. Lattice has one element for each, and you
write all four the same way, inside inline code (a pair of backticks), so they work
in any layout: a table cell, a list item, a kpi line or a sentence.
Try this. The disc at the start of each line is a mark, the tag is a pill, and the small chart is a spark. Change a [-] to [x], a c4 to c2, or a number in the braces and watch only that element change.
Which one do I reach for?
Section titled “Which one do I reach for?”| You want to show | Reach for | Write it as | Learn it in |
|---|---|---|---|
| An answer: yes, no, partly, unknown, not yet, not applicable | A state mark | `[x]` `[!]` `[?]` | Status and labels |
| A label: a team, a phase, a version | A pill | `{STABLE, c2}` | Pills you place |
| A trend or a share: eight quarters, 72% of target | A spark | `~{12 14 17 21}` | Sparks |
| A person: a drawn face for someone with no photo | An avatar | `!{Ada Okafor}` | Avatars |
The opening character tells them apart: square brackets make a mark, braces make a
pill, a tilde before the braces makes a spark, and a ! before them makes an avatar. Everything after a : adjusts
the element, such as a color (c4), a size (lg) or a chart type (bar).
A layout built around marks, like the checklist above, takes its mark at the start
of each item as - [x], without backticks. Anywhere else, write the mark in inline
code.
Keeping one as plain code
Section titled “Keeping one as plain code”Put a backslash first and the element stays as the code you typed, minus the
backslash: `\[x]`, `\{STABLE}`, `\~{12 14}`, `\!{Ada}`. The backslash counts
only when the element would have rendered, so a regular expression like
`\d+` is left alone.
A span that looks like one of these but doesn’t parse, such as a spark with a type it
doesn’t know, also stays code. lint:deck warns about it and says why.
Writing them in the Studio
Section titled “Writing them in the Studio”The Studio editor completes marks, pills and sparks. After a pill’s or a spark’s :, the menu
offers only what may come next: a pill’s shape, then its color, then its size; a
spark’s type, then its size, then its color. Each word it offers is one the element
can actually take. Avatar traits are not completed yet.
- Status and labels: marks, pills and the words a layout uses for them.
- Sparks: the seven chart types, the looks, the frame and sizing.
- Avatars: the name, the sixteen traits, the tile, and avatars in a roster.
- The cheat sheets: status and labels, sparks and avatars.