css-doodle

Create

Property

@size

Width and height in one declaration, with paper size presets.

Syntax

  • @size: <size>
  • @size: <width> <height>
  • @size: <width> auto <ratio>
  • @size: <preset> [portrait | landscape]
width, height
Any CSS length. The height defaults to the width.
ratio
Used as aspect-ratio when the width or the height is auto, written as 4/3 or (4/3).
preset
A name from the list below. Landscape unless portrait or p is given. l is landscape.
PresetLandscapePortrait
a01189 × 841 mm841 × 1189 mm
a1841 × 594 mm594 × 841 mm
a2594 × 420 mm420 × 594 mm
a3420 × 297 mm297 × 420 mm
a4297 × 210 mm210 × 297 mm
a5210 × 148 mm148 × 210 mm
a6148 × 105 mm105 × 148 mm
postcard148 × 100 mm100 × 148 mm
poster540 × 390 mm390 × 540 mm

Written at the top level it sizes every cell. On :doodle it sizes the component. The / modifier of @grid takes the same value. On a cell, @size also records the size for @place.

Examples

@grid: 1 / 60vmin;

/* width: 10em; height: 10em; */
@size: 10em;

/* width: 10em; height: 6em; */
@size: 10em 6em;
Open in playground

Random sizes with a fixed ratio:

@grid: 5 / 60vmin _1px;
@size: @r(30%, 90%) auto 3/2;
margin: auto;
background: #000;
Open in playground

A paper preset:

@grid: 1 / a6 portrait;

/* equals */
:doodle {
  width: 105mm;
  height: 148mm;
}
Open in playground

See also