css-doodle

Create

Property

@content

Put something inside the cell element: text, an SVG, a nested doodle, a shader canvas, or raw HTML.

Syntax

  • @content: hello
  • @content: 'hello world'
  • @content: @i
  • @content: @svg(...)
  • @content: @doodle(...)
  • @content: @shaders(...)
  • @content: @raw(...)

Unlike the CSS content property, the value is real DOM: an SVG becomes an inline <svg>, a doodle a nested <css-doodle>, a shader a <canvas>. The content is centered in the cell, and cells are grid containers, so place-items and friends apply. On ::before and ::after use the CSS content property. @content is for cells, not :doodle or :container.

Examples

Text:

@grid: 1 / 60vmin;
color: #000;
padding: 1rem;
@content: "hello world";
Open in playground 
@grid: 5 / 60vmin _1px;
@content: @p([A-Z]);
background: #000;
color: #fff;
font-size: 1.5em;
Open in playground

An SVG element:

@grid: 1 / 60vmin auto;
@content: @svg(
  viewBox: -5 -5 10 10;
  circle*15 {
    r: @nN(ease-out, *4.5);
    fill: none;
    stroke: #000;
    stroke-width: .1;
  }
);
Open in playground

A nested doodle element:

@grid: 1 / 60vmin auto;
@content: @doodle(
  @grid: 5 / 100%;
  background: #000;
  clip-path: polygon(@m3.M2.r(100%));
);
Open in playground

A canvas running a fragment shader:

@grid: 1 / 60vmin;
@content: @shaders(
  void main() {
    float a = atan(pos.y, pos.x);
    float r = .1 / length(pos);
    float t = r * 8. - u_time + a;
    vec3 k = vec3(0., 2., 4.);
    vec3 c = .5 + .5 * cos(t + k);
    FragColor = vec4(c, 1.);
  }
);
Open in playground

Raw HTML:

@grid: 1 / 60vmin;
color: #000;
align-self: center;
@content: @raw(
  <style>h2, p { margin: 0 }</style>
  <h2>Hello World</h2>
  <p>This is a paragraph.</p>
);
Open in playground

See also