Bento

A bento shows several things at once as tiles of different sizes, standing half a square (10px) apart. Each tile is a card or any box that holds one thing; the bento only places them. Words in a tile follow the card: its name on one square, its title in the display size, every line on the squares.

Design examples

Four layers

Example Code

A flow bento: three columns sharing the width, tiles one or two columns wide, half a square apart.

Tiles on squares

Example Code

A squares bento: each tile placed on whole squares a square apart, its surface reaching a quarter square towards its neighbours, so the tiles stand half a square apart.

Flow

By default the tiles flow into columns that share the bento’s width, three unless columns says otherwise. A tile is one column wide and one row high; data-span widens it to more columns and data-rows makes it taller. A row is as high as its tallest tile, at least ten squares (--ds-bento-row), and a gap left by a wide tile is filled by the next one that fits. Below thirty squares of width the bento is one column.

<ds-bento>
  <ds-card data-span="2" tone="yellow"><span slot="title">One foundation</span></ds-card>
  <ds-card><span slot="title">Small pieces</span></ds-card>
</ds-bento>

To keep the columns on whole squares, make the bento as wide as whole squares plus its two gaps: three columns of k squares are 3k squares and one more square wide.

Squares

With squares, the bento is exactly columns squares wide (48 unless set) and every tile stands on whole squares, given as data-place="x y w h": the square across and down it starts on, counted from 0, and its width and height in squares. Place tiles a square apart. Each tile’s surface then reaches a quarter square towards every tile beside it, so the tiles stand half a square apart while what they hold stays on the squares, and the bento’s own edges stay on the page’s.

<ds-bento squares columns="32">
  <ds-card data-place="0 0 15 7"><span slot="title">Everything kept</span></ds-card>
  <ds-card data-place="16 0 16 15"><span slot="title">Every list in one place</span></ds-card>
  <ds-card data-place="0 8 15 7"><span slot="title">Today first</span></ds-card>
</ds-bento>

Attribute	On	What it does
columns	the bento	Columns that share the width (flow, three), or squares across (squares, 48).
squares	the bento	Places every tile on whole squares by its data-place.
data-span	a tile	Two to six columns wide (flow).
data-rows	a tile	Two to six rows high (flow).
data-place	a tile	x y w h in squares (squares).
fit	the bento	With squares, the columns share the bento’s measure instead of being one square each.
layout	the bento	Takes each tile’s data-place-<layout> where it has one: a place per layout.
data-place-phone (any layout’s name)	a tile	The tile’s place while the bento’s layout is phone.

Tokens: --ds-bento-unit (the square, --ds-unit unless a page draws at another size), --ds-bento-gap (half of it), --ds-bento-columns, --ds-bento-row, --ds-bento-padding (a squares tile that is not a card, one square); on a tile --ds-bento-span and --ds-bento-rows.

Layouts and narrower measures

A bento whose tiles stand differently on a phone gives each tile its phone place beside its own, data-place-phone, and the page sets the bento’s layout (and its columns) when it changes: the places are read again. A squares bento in a measure narrower than its squares takes fit: the columns share the measure and the rows stay one square, each tile still reaching a quarter square, so the gap is a column less half a square. A page with no script and no inline styles sets --ds-bento-x, --ds-bento-y, --ds-bento-w, --ds-bento-h and the reach sides (--ds-bento-start, -top, -end, -bottom, 1 or 0) in its own stylesheet.