CSS GUIv0.0.61PropertiesGitHub

CSS GUIv0.0.61

A composable, extensible, and themeable controls for visually editing CSS.

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.

Install

npm install --save @compai/css-gui

Demo

Codesandbox

Features

  • Controls for 280 CSS properties
  • +1000 Google Fonts
  • Full variable fonts support
  • Responsive value arrays
  • Theme aware inputs
  • Scrubbable number inputs
  • Supports all CSS units
  • Advanced layer based gradient editor
  • Nested elements
  • Cubic bezier editor for custom easings
  • Style pseudo-elements and pseudo-classes
  • Completely open source

Demo

Previews of CSS controls

<Inputs.FontSize />

Aa

Font size
.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.

Text align
<Inputs.Color />

Aa

Color
.css-gui-element {
  color: #6465ff;
}
<Inputs.BackgroundImage />
Background Image

.css-gui-element {
  background-image: url(https://source.unsplash.com/random);
}
<Inputs.Background />
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 />
Background blend mode
.css-gui-element {
  background-blend-mode: overlay;
}
<Inputs.BorderRadius />
Border radius
.css-gui-element {
  border-radius: 100%;
}
<Inputs.Filter />
Filter

.css-gui-element {
  filter: blur(4px);
}
View more properties

Composable

Mix and match controls to create your own custom component design interfaces.

Aa

Color
Background color
.css-gui-element {
  font-size: 12rem;
  color: #ff00ff;
  background-color: #000000;
}

Link

Link :link

Color
Background color
Border color

Hover :hover

Color
Background color
Border color

Focus :focus

Color
Background color
Border color

Visited :visited

Color
Background color
Border color
.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;
}