Css-doodle.com Website Review

The component will generate a grid of divs by the rules (plain CSS) inside it. You can easily manipulate those cells using CSS to come up with a graphic pattern or an animated graph. The limit is the limit of CSS itself. margin: -.5px; transition: @r(.5s) ease; clip-path: polygon(@pick( '0 0, 100% 0, 100% 100%', '0 0, 100% 0, 0 100%', '0 0, 100% 100%, 0 :doodle { grid-gap: 1px; width: 8em; height; 8em; } background: #60569e; :doodle { grid-gap: 1px; @size: 8em; } background: #60569e; There's an alternative way to set up the grid by using the @grid property. The :doodle is a special selector indicates to the component element itself. Note that the styles would be over-written by your normal css :doodle { --s: 0 } :doodle(:hover) { --s: 1 } transition: .5s cubic-bezier(.175, .885, .32, 1.275); transition-delay: @rand(500ms); 1.275); transition-delay: @rand(500ms); transform-origin: 50% 50%; background: #60569e; The :container is the container element that holds all the cells. It's styled using Grid Layout. And you may want to set grid-gap inside it. hidden; } :container { grid-gap: 1px; transform: rotate(45deg) scale(1.5); } background: #60569e; It inherits all the grid properties from :doodle so it's why this also works: @nth(5) { background: #60569e; } @nth(3n + 8) { background: #e6437d; } :doodle { @size: 8em; } background: #f5f5f5; margin: .5px; @nth(5) { background: #60569e; :after { content: @index(); font-size: .8em; color: #fff; } } @nth(3n + 8) { background: #e6437d; :after { content: @even { background: #60569e; } :doodle { @size: 8em; } @even { background: #60569e; :after { content: @index(); font-size: .8em; @odd { background: #60569e; } :doodle { @size: 8em; } @odd { background: #60569e; :after { content: @index(); font-size: .8em; @at(4, 2) { background: #60569e; } :doodle { @size: 8em; } background: #f5f5f5; margin: .5px; @at(4, 2) { background: #60569e; :after { content: @row(), @col(); font-size: .5em; color: #fff; } } Select cells randomly. The ratio accepts value between 0 and 1. Defaults to 0.5.