css-doodle

Create

Property

@place

Take a cell out of the grid and position its center at a point. A cell near an edge can hang outside the container.

Syntax

  • @place: [safe] <x> <y>
x, y
A length or percentage for each axis. The keywords left, right, top and bottom stand for 0% or 100% on their axis, and center for 50%. A missing value is 50%.
safe
Keep the cell inside the container. May appear anywhere in the value.

The cell becomes position: absolute, centered on the point. Its size comes from @size, and defaults to 25%. Overflow is unsafe by default; safe keeps the cell inside. @place-cell and @offset are older names for the same property.

Examples

@grid: 1x5 / 60vmin ß #000;
:doodle {
  scale: .85;
  contain: none;
}
@size: 1.6em;
@content: @i;
background: #000;
color: #fff;

@cell(1) { @place: 0 top }
@cell(2) { @place: right 25% }
@cell(3) { @size: 3.2em; @place: center }
@cell(4) { @place: .8em calc(100% - .8em) }
@cell(5) { @place: 75% 80% }
Open in playground

Cells scattered at random:

@grid: 1x30 / 60vmin;
@size: @r(5%, 20%);
@place: @r(100%) @r(100%);
border-radius: 50%;
background: @p(#000, #e6437d, #ebbf4d);
opacity: @r(.3, 1);
Open in playground

Keep cells inside at the edges with safe:

@grid: 1x30 / 60vmin;
@size: @r(5%, 20%);
@place: safe @r(100%) @r(100%);
border-radius: 50%;
background: @p(#000, #e6437d, #ebbf4d);
opacity: @r(.3, 1);
Open in playground

Points on a circle, with @plot:

@grid: 1x24 / 60vmin;
@size: 8%;
@place: @plot(r: .8);
border-radius: 50%;
background: #000;
Open in playground

See also