< css-doodle />

:doodle

The :doodle is a special selector indicates to the component element itself. Note that the styles would be over-written by your normal css files outside. (try to hover on the doodle)

:doodle { --s: 0 } :doodle(:hover) { --s: 1 } --offset: calc(var(--s) * 100%); transform: translateY(var(--offset)); transition: .5s cubic-bezier(.175, .885, .32, 1.275) @rand(500ms); :doodle { @grid: 5 / 7em; --s: 0; } :doodle(:hover) { --s: 1; } --offset: calc(var(--s) * 100%); transform: translateY(var(--offset)); will-change: transform; transition: .5s cubic-bezier(.175, .885, .32, 1.275) @rand(500ms); transform-origin: 50% 50%; background: #60569e; margin: .5px;

@even

Select cells like :nth-child(even) but shorter.

@even { background: #60569e; } :doodle { @size: 7em; } @even { background: #60569e; :after { content: '@index()'; font-size: .7em; color: #fff; } }

@odd

Select cells like :nth-child(odd).

@odd { background: #60569e; } :doodle { @size: 7em; } @odd { background: #60569e; :after { content: '@index()'; font-size: .7em; color: #fff; } }

@nth(n)

Select the nth cell like :nth-child(n).

@nth(9) { background: #60569e; } :doodle { @size: 7em; } background: #f5f5f5; margin: .5px; @nth(9) { background: #60569e; :after { content: '@index()'; font-size: .7em; color: #fff; } }

@at(row, col)

Select cell at specific row and column.

@at(4, 2) { background: #60569e; } :doodle { @size: 7em; } background: #f5f5f5; margin: .5px; @at(4, 2) { background: #60569e; :after { content: '@row(), @col()'; font-size: .5em; color: #fff; } }

@random

Select cells randomly.

@random { background: #60569e; } :doodle { @size: 7em; } background: #f5f5f5; transition: .2s; @random { background: #60569e; :after { content: '@index()'; font-size: .7em; color: #fff; } } margin: .5px;

@row(n)

Select the nth row of the grid.

@row(3) { background: #60569e; } :doodle { @size: 7em; } background: #f5f5f5; margin: .5px; @row(3) { background: #60569e; :after { content: '@row()'; font-size: .7em; color: #fff; } }

The odd and even is supported.

@row(even) { background: #60569e; } :doodle { @size: 7em; } background: #f5f5f5; margin: .5px; @row(even) { background: #60569e; :after { content: '@row()'; font-size: .7em; color: #fff; } } @row(even) { :after { content: '@row()'; font-size: .7em; color: #fff; } }

@col(n)

Select the nth column of the grid.

@col(3) { background: #60569e; } :doodle { @size: 7em; } background: #f5f5f5; margin: .5px; @col(3) { background: #60569e; :after { content: '@col()'; font-size: .7em; color: #fff; } }

You can use odd and even too.

@col(odd) { background: #60569e; } :doodle { @size: 7em; } background: #f5f5f5; margin: .5px; @col(odd) { background: #60569e; :after { content: '@col()'; font-size: .7em; color: #fff; } }

@grid

Another way to set the "grid" attribute and the rule has higher priority.

<css-doodle> :doodle { @grid: 3x3; } </css-doodle> :doodle { @grid: 3 / 7em; } background: #60569e; margin: .5px;

Set grid and doodle size at the same time:

<css-doodle> :doodle { @grid: 8 / 7em; } </css-doodle> :doodle { @grid: 8 / 7em; } background: #60569e; margin: .5px;

The row or column is limited up to 1024 only when the grid is 1-dimensional:

<css-doodle> :doodle { @grid: 30x1 / 7em 12em; } background: #60569e; width: @rand(5%, 100%); margin: .5px 0; </css-doodle> :doodle { @grid: 30x1 / 7em 12em; } transition: .2s ease; transition-delay: @rand(500ms); background: #60569e; will-change: width; width: @rand(5%, 100%); margin: .5px 0;

@use

Import styles from custom properties. It lets you write styles from normal css files.

<style> :root { --my-rule: ( :doodle { @grid: 5 / 7em; } background: #60569e; ); } </style> <css-doodle> @use: var(--my-rule); /* other styles */ margin: .5px; </css-doodle> @use: var(--my-rule); margin: .5px;

You can add multiple rules in a natural way:

<css-doodle> @use: var(--my-rule), var(--another-rule); @use: var(--and-another-one); </css-doodle>

Or define it in the use attribute on the element.

<css-doodle use="var(--my-rule)"></css-doodle>

@size, @min-size, @max-size

Set width and height in one place.

@size: 10em; /* width: 10em; height: 10em; */ @size: 4em 5em; /* width: 4em; height: 5em; */ @min-size: 7em; /* min-width: 7em; min-height: 7em; */ @max-size: 7em; /* max-width: 7em; max-height: 7em; */ :doodle { @grid: 1 / 7em; } @size: 10em; @size: 4em 5em; @min-size: 7em; @max-size: 7em; background: #60569e; :after { content: '7em x 7em'; color: #fff; font-size: .7em; }

@place-cell

Place cells relative to the grid.

@size: 1.6em; @nth(1) { @place-cell: 0; } @nth(2) { @place-cell: 100% 25%; } @nth(3) { @place-cell: center; } @nth(4) { @place-cell: .8em calc(100% - .8em); } @nth(5) { @place-cell: 75% 80%; } :doodle { @grid: 1x5 / 7em; border: 1px solid #60569e; } @size: 1.6em; background: rgba(72, 74, 142, .8); @nth(1) { @place-cell: 0; } @nth(2) { @place-cell: 100% 25%; } @nth(3) { @place-cell: center; } @nth(4) { @place-cell: .8em calc(100% - .8em); } @nth(5) { @place-cell: 75% 80%; } :after { content: '@index()'; color: #fff; font-size: .7em; }

@shape

Return a css shape generated with clip-path and polygon().

:doodle { @grid: 7 / 7em; @shape: circle; } @even { @shape: hypocycloid 4; background: #60569e; transform: scale(2) rotate(-60deg); } :doodle { @grid: 7 / 7em; @shape: circle; } @even { @shape: hypocycloid 4; background: #60569e; transform: scale(2) rotate(-60deg); }

@index

Returns the current index value of the cell.

:after { content: '@index()'; } :doodle { @size: 7em; } background: #60569e; margin: .5px; :after { content: '@index()'; color: #fff; font-size: .7em; }

@row

Returns the current row number of the cell.

:after { content: '@row()'; } :doodle { @size: 7em; } background: #60569e; margin: .5px; :after { content: '@row()'; color: #fff; font-size: .7em; }

@max-row

Returns the max row number of the grid.

:doodle { @grid: 4x2 / 7em 9em; } :after { content: '@row() / @max-row()'; } :doodle { @grid: 4x2 / 7em 9em; } background: #60569e; margin: .5px; :after { content: '@row() / @max-row()'; color: #fff; font-size: .7em; }

@col

Returns the current column number of the cell.

:after { content: '@col()'; } :doodle { @size: 7em; } background: #60569e; margin: .5px; :after { content: '@col()'; color: #fff; font-size: .7em; }

@max-col

Returns the max column number of the grid.

:doodle { @grid: 2x4 / 7em 9em; } :after { content: '@col()/@max-col()'; } :doodle { @grid: 2x4 / 7em 9em; } background: #60569e; margin: .5px; :after { content: '@col()/@max-col()'; color: #fff; font-size: .7em; }

@size

Returns the total cells number of the grid.

:doodle { @grid: 3 / 7em; } :after { content: '@index() / @size()'; } :doodle { @grid: 3 / 7em; } background: #60569e; margin: .5px; :after { content: '@index() / @size()'; color: #fff; font-size: .7em; }

These numbers can be used to generate dynamic values together with calc().

background: rgba( 96, 86, 158, calc(@row() * @col() / @size()) ); :doodle { @size: 7em; } --alpha: calc(@row() * @col() / @size()); background: rgba(96, 86, 158, var(--alpha)); :after { content: '@calc(@row() * @col())'; color: #fff; font-size: .7em; }

@pick(v1, v2,...)

Randomly pick a value from the given list.
(try to click on the doodle)

:after { content: '@pick(+, *, -, #)'; color: @pick(#60569e, #2196f3); } :doodle { @size: 7em; } :after { content: '@pick(+, *, -, #)'; color: @pick(#60569e, #2196f3); }

@rand(start [,stop] [,step])

Returns a random value from the range of numbers.
(try to click the doodle)

background: rgba(96, 86, 158, @rand(.9)); transition: .2s ease @rand(200ms); transform: rotate(@rand(360deg)); clip-path: polygon( @rand(100%) 0, 100% @rand(100%), 0 @rand(100%) ); :doodle { @size: 7em; } background: rgba(96, 86, 158, @rand(.9)); transition: .2s ease @rand(200ms); will-change: transform; transform: rotate(@rand(360deg)); clip-path: polygon( @rand(100%) 0, 100% @rand(100%), 0 @rand(100%) );

It also recognizes the letter range:

:after { content: '@rand(a, z)'; } :doodle { @size: 7em; } background: #60569e; margin: .5px; :after { font-size: .7em; content: '@rand(a, z)'; color: #fff; }

@repeat(times, value)

Duplicate the given value:
(try to click the doodle)

/* little circles */ background: #@repeat(6, @pick(@rand(0, 9), @rand(a, f)) ); :doodle { @size: 7em; } background: #60569e; margin: .5px; :after { content: ''; position: absolute; left: @rand(20%, 80%); top: @rand(20%, 80%); @size: 5px; border-radius: 50%; background: #@repeat(6, @pick(@rand(0, 9), @rand(a, f))); }

@<Math>

All Math functions and constants are available prefixed with '@'.

--num: calc(@abs( @abs(@row() - 3) + @abs(@col() - 3) - 5) / 5 ); background: rgba( 96, 86, 158, calc(var(--num) / 5) ); :doodle { @size: 7em; } --num: @abs(@abs(@row() - 3) + @abs(@col() - 3) - 5); background: rgba( 96, 86, 158, calc(var(--num) / 5) ); will-change: transform; transform: rotate(15deg) scale(calc(var(--num) / 5));

:doodle { @grid: 60x1 / 7em 15em; } @size: 75.8% 1px; justify-self: center; background: rgba( 96, 86, 158, calc(1 - @index() / @size()) ); transform: rotate(15deg) translateX( calc(@sin(@index() / 4) * @PI() * 10px) ); :doodle { @grid: 60x1 / 7em 15em; } @size: 75.8% 1px; justify-self: center; background: rgba( 96, 86, 158, calc(1 - @index() / 60) ); will-change: transform; transform: rotate(-15deg) translateX( calc(@sin(@index() / 4) * @PI() * 10px) );

@calc(expr)

Evaluate calculations.

:after { content: '@calc(@index() * @index())'; } :doodle { @grid: 5 / 7em; } background: #60569e; :after { content: '@calc(@index() * @index())'; color: #fff; font-size: .5em; } @odd { transform: scale(.75); }

@hex(num)

Transform a number to the hex format.

:after { content: '\@hex(@rand(9632, 9687))'; } :doodle { @size: 7em; } margin: .5px; :after { content: '\@hex(@rand(9632, 9687))'; color: #60569e; }

grid

Getter/setter for the grid attribute on the element.

const doodle = document.querySelector('css-doodle'); /* Note that the grid value inside the :doodle selector has higher priority than the attribute value on the element. So this setter operation may not have an affect on the final grid value. */ doodle.grid = "5"; console.log(doodle.grid); /* { x: 5, y: 5, size: 25 } */

use

Getter/setter for the use attribute on the element.

const doodle = document.querySelector('css-doodle'); doodle.use = 'var(--my-rule)'; console.log(doodle.use); /* var(--my-rule) */

update([styles])

Re-render the component (with given styles).

const doodle = document.querySelector('css-doodle'); /* update styles and refresh */ doodle.update(` :doodle { @grid: 6 / 7em } background: rebeccapurple; margin: .5px; `); /* just refresh */ doodle.update();