Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/components-ai/css.gui
Visual development environment for CSS
https://github.com/components-ai/css.gui
css design design-tokens design-tools gui parametric parametric-design react
Last synced: about 1 month ago
JSON representation
Visual development environment for CSS
- Host: GitHub
- URL: https://github.com/components-ai/css.gui
- Owner: components-ai
- License: mit
- Created: 2022-04-12T16:32:16.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-01T23:26:35.000Z (about 1 year ago)
- Last Synced: 2024-07-29T08:25:59.064Z (about 1 month ago)
- Topics: css, design, design-tokens, design-tools, gui, parametric, parametric-design, react
- Language: TypeScript
- Homepage: https://components.ai/css-gui
- Size: 4.84 MB
- Stars: 523
- Watchers: 6
- Forks: 25
- Open Issues: 61
-
Metadata Files:
- Readme: readme.md
- Contributing: .github/contributing.md
- License: license
- Code of conduct: code-of-conduct.md
Awesome Lists containing this project
- awesome-github-repos - components-ai/css.gui - Visual development environment for CSS (TypeScript)
README
# [CSS GUI](https://components.ai/open-source/css-gui)
**_Visual development environment for CSS._**
CSS GUI is a visual toolkit for editing element styles on the web.
It's theme-aware, performant, and can be composed into any React app.
- [**Create and save designs →**](https://comp.new)
- [**Read the documentation →**](https://components.ai/open-source/css-gui)
- [**Play with a demo on CodeSandbox →**](https://codesandbox.io/s/cssgui-example-w1c9h5)
- [**Watch an introduction on YouTube →**](https://www.youtube.com/watch?v=b6J2TGyDYc0)
## Features
- Controls for 280 CSS properties
- Theme aware so you can quickly select from your brand
- Responsive value arrays
- Support for all CSS units
- Variable font support
- +1000 Google fonts
- Support for styling any element, pseudo-element or pseudo-class
- Scrubbable number inputs
- Smart default ranges
## Why?
We want to improve creative coding and web development workflows by making
it simpler to attach parametric controls that are designed specifically
to work with CSS.
With CSS GUI, folks can visually edit and generate CSS. They can install
the controls and use locally in their own projects or use our hosted version.
Eventually, these controls can also augment development environments like VS Code.
### Supporting the full CSS spec
These controls are specifically built for CSS and will adhere to the CSS spec.
This builds on the web platform itself, allowing the expressiveness of CSS/HTML/SVG
to create endless outputs.
It's our [goal and intention](https://components.ai/open-source/css-gui/unsupported)
to support the entire CSS spec beginning with the more
common controls like Length, Color, Keywords and expanding over time to more complex
stacks and grammars (think gradients, background-image, box shadow, etc.).
## How can you help?
[We welcome any and all contributions](https://github.com/components-ai/css.gui/blob/main/.github/contributing.md).
We'd love it if you try to experiment with CSS GUI and let us know how it goes. Please feel free to
[report bugs or make feature requests](https://github.com/components-ai/css.gui/issues/new).
## Installation
```sh
npm install --save @compai/css-gui
```
## Usage
By default, CSS GUI will generate controls based on the style properties you pass.
```js
import { useState } from 'react'
import { Editor, styled } from '@compai/css-gui'
export const MyEditor = () => {
const [styles, setStyles] = useState({
fontSize: { value: 16, unit: 'px' },
lineHeight: { value: 1.4, unit: 'number' },
color: 'tomato',
})
return (
<>
Hello, world!
>
)
}
```
For more customization, you can compose your own controls and style pseudo-elements.
```js
import { useState } from 'react'
import { Editor, Inputs, styled } from '@compai/css-gui'
export const MyEditor = () => {
const [styles, setStyles] = useState({
fontSize: { value: 16, unit: 'px' },
lineHeight: { value: 1.4, unit: 'number' },
color: 'tomato',
})
return (
<>
Hello, world!
>
)
}
```
[**Read the full getting started guide →**](https://components.ai/open-source/css-gui/getting-started)
## Development
CSS GUI is a TypeScript-based monorepo that contains the main `@compai/css-gui` package, a docs site,
and its supporting packages.
[**See the contributing guide →**](https://github.com/components-ai/css.gui/blob/main/.github/contributing.md)
## Resources
- [**MDN data**](https://github.com/mdn/data/blob/main/css/properties.json): Provides amazing documentation of the CSS spec which we use to drive the development of our parametric controls
- [**csstype**](https://github.com/frenic/csstype): Types for CSS properties and their values based on MDN data
## Inspiration
- [**dat.gui**](https://github.com/dataarts/dat.gui): well known, especially in the generative design/three space
- [**leva**](https://github.com/pmndrs/leva): a React-based [pmndrs](https://pmnd.rs/) project that builds the entire control set from hooks
- [**Blender**](https://blender.org): Shader and Geometry nodes allow for rapid exploration withiin the available rendering space
- [**MDN docs**](https://developer.mozilla.org/en-US/): have long been an amazing introduction to how various CSS property values will affect the appearance of a DOM element.