<Inputs.FontSize />
Aa
.css-gui-element { font-size: 64px; }
Everyone should be able to explore the creative potential of CSS. This project is a growing set of parametric controls for rapidly editing CSS properties. Designed for composability, mix and match any combination of properties to create custom components and tap into the vast and beautiful world of CSS.
npm install --save @compai/css-gui
Previews of CSS controls
<Inputs.FontSize />
Aa
.css-gui-element { font-size: 64px; }
<Inputs.FontFamily />
Aa
.css-gui-element { font-family: Inter; }
<Inputs.TextAlign />
The parameters comprise sequences which are theoretically infinite but limits are, of course, set to them in practice.
<Inputs.Color />
Aa
.css-gui-element { color: #6465ff; }
<Inputs.BackgroundImage />
.css-gui-element { background-image: url(https://source.unsplash.com/random); }
<Inputs.Background />
.css-gui-element { background: url(https://source.unsplash.com/random) center center / 100% 100% no-repeat no-repeat fixed border-box border-box; }
<Inputs.BackgroundBlendMode />
.css-gui-element { background-blend-mode: overlay; }
<Inputs.BorderRadius />
.css-gui-element { border-radius: 100%; }
<Inputs.Filter />
.css-gui-element { filter: blur(4px); }
Mix and match controls to create your own custom component design interfaces.
Aa
.css-gui-element { font-size: 12rem; color: #ff00ff; background-color: #000000; }
Link
.css-gui-element { color: #ff00ff; background-color: #000000; border-color: goldenrod; border-width: 24px; border-style: solid; font-size: 12rem; hover: [object Object]; focus: [object Object]; visited: [object Object]; transition: all 250ms cubic-bezier(0.16, 0.67, 0.83, 0.67) 0ms; }
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
.css-gui-element { font-family: Space Mono; font-size: 32px; line-height: 1.5; text-align: start; color: #000; background-color: #fff; margin: 0px; height: auto; display: block; min-height: 0px; max-height: auto; width: 100%; border-style: solid; border-width: 0px; border-color: transparent; box-sizing: border-box; border-image-slice: 1; border-image-width: 64px; overflow: hidden; border-image-source: url(https://source.unsplash.com/random); padding: 128px; }