Your Docusaurus site did not load properly.

A very common reason is a wrong site baseUrl configuration.

Current configured baseUrl = / (default value)

We suggest trying baseUrl =

CrypticCSS

Single component UI toolbox.

Comfortable, prop based styling combining the advantages of traditional and CSS-in-JS solutions into a single, flexible component.

Paradigm shift

YouEye works differently than what you've got used to. It has close relations to inline styling solutions, such the css prop, the style prop, custom props and utility class based approaches.

Many UI solutions providing a subset of some CSS and/or CSS like properties. YouEye is all about CSS, it let's you use any CSS property.

Some libraries give you shorthands for some of the props. YouEye comes with optional shorthands for all CSS properties and values.

<Ui
display="grid"
gridTemplateColumns="2fr 1fr"
background="red"
>
<Ui fontSize={12}>Cell One</Ui>
<Ui fontSize={10} color="#333">Cell Two</Ui>
</Ui>

Super-charged by CCSS

CCSS is an opinionated, low level utility to deal with CSS style objects.

YouEye combines existing CSS-in-JS solutions with CCSS, extending them with new features and customization options to suit your own needs.

You can assign value maps to any CSS or custom property your design system requires. Common use cases are colors, font sizes and dimensions.

YouEye gives you the freedom to implement your design system needs however it's most comfortable for you.

ccss.setProps([
[['width'], { demo: 300 }],
[['color'], { paragraph: '#c893a1' }],
[['font-size'], { large: 16 }]
])
Live Editor
Result
Memes are fun!

Static and Dynamic extraction

For increased performance YouEye supports static and dynamic extraction. @you-eye/babel-plugin-react will

  • Extract styles into static CSS files;
  • Convert component calls to native DOM elements with class names;
  • Replace dynamic calls with CSS variables;
  • Resolve constants at build time;
  • Achieves Atomic CSS extraction strategy;
  • Minify prop names and values.
<Ui
paddingTop={10}
display="flex"
color="light0"
/>
.cxg4hb { padding-top: 50px }
.c5th36 { display: flex }
.cy34hg { color: #fff }
<div className="cxg4hb c5th36 cy34hg" />