Guides
Sizing elements
Hug, Fill and Fixed, and when it is right to type a number instead.
Width and height each have the same three answers, and choosing between them is usually more useful than typing a number.
Hug, Fill, Fixed
Hug — as wide, or tall, as its contents. A heading that hugs is exactly as wide as its words, which is what you mean when you point at it and say “the text”. Text you draw with the Text tool hugs by default for this reason.
Fill — as wide as what holds it. Inside a row this means take the free space; inside a grid the column already decides the width, so filling is simply what happens.
Fixed — a number you type, with a unit you choose.
A block element with no width set fills its row. That is what the browser does, and saying otherwise would be a lie about what is on screen — so an element you have not sized reads as Fill.
Links, and anything else inline
A link, a span — anything the browser lays out inline — is as wide as its words no matter what you write, so one with no width reads as Hug, not Fill. It used to say Fill, which was reading the declaration rather than the element: the panel said Fill while the canvas showed something the width of two words.
Worse, a width on an inline box is ignored outright. Choosing Fixed on a link
wrote 200px and the element stayed exactly as wide as its text — the control
appeared to do nothing, because it did nothing.
So Fixed and Fill now make the element take a width first: Fixed makes it
inline-block, Fill makes it block. You asked for a width and you get a
width. And Hug on something that already hugs writes nothing at all, rather
than a width: fit-content the browser ignores — the CSS has to be defensible
when somebody reads it.
Which of these applies is measured on the canvas, not guessed from the tag.
The same <a> is inline inside a paragraph and block-level inside a flex row,
and your design system can say either.
When to type a number
Most values in BooshDesign come from a scale, because most values should. A padding of 27px is a mistake the system should not permit.
Some values are not on a scale and never could be, and those are typed:
| Units offered | |
|---|---|
| Fixed width | px · rem · % · em · vw · vh |
| Fixed height | px · rem · % · em · vw · vh |
| Line length | ch · rem · px · % |
| Offsets, when freely placed | px · rem · % |
| Stroke width | px · rem · em |
The unit is a real choice, not something converted away behind your back. % is
a proportion of the container. rem scales with the root type size, so it grows
if the design system’s base size changes. ch is the width of a character in the
current typeface.
Arrow keys nudge a typed value; hold ⇧ to nudge by ten. Clear the field to remove the value entirely.
Stroke width is typed for a specific reason: your design system does not define a border-width scale. It has a focus ring width and a button border width, both belonging to their own component — which says border widths are a component’s business rather than a shared scale. If you want one, add it to the design system and it will be offered here like any other.
Minimums and maximums
Right-click the width or height to add one. Most elements never need either, so they are not shown until they exist — and once they do, they appear as their own field with a way to take them off again.
A minimum and a maximum are not a third size. They qualify the one you already chose: a Fill width with a maximum stops a line of text becoming unreadably wide on a large screen, and a Hug height with a minimum stops a nearly-empty box collapsing to nothing.
Line length
Line length is in Typography, not here, and only on text — it is a typographic decision about how many characters fit on a line rather than a question about the size of a box. Around 60ch is the classic comfortable reading width. See Working with type.
What things arrive as
Headings and body text arrive hugging — as wide as their words. A block element with no width is as wide as whatever holds it, which is correct CSS and the wrong thing to look at: you place a word and the app draws handles across the whole column. There is no full-width element to have to understand.
Boxes arrive filling, because a box is usually a place to put things rather than a thing in itself. List items fill too — an item is meant to be as wide as its list.