YouEye Documentation

website·Indexed 31 days ago

A single component approach to UI building powered by CCSS. YouEye aims to shift the paradigm of separating styles into separate stylesheets, offering a babel-plugin-react for extracting static CSS and converting static components to HTML.

Tokens: 2.8K
Snippets: 18
Records: 27
Agent score: 57%

What's inside YouEye

Understand YouEye performance and CCSS architecture
YouEye uses CCSS to minimize processing overhead compared to other CSS-in-JS solutions. Its performance impact is comparable to using dynamic values in styled-components or styled-system. The core is kept primitive to maintain efficiency.
https://youeye.dev/docs/getting-started/faq/
Implement a single-component UI approach with UiBox
The UiBox approach shifts the paradigm of separating styles into separate stylesheets by treating markup and styles as a single concern: Presentation. This method leverages CSS-in-JS to eliminate awkward naming conventions, remove the need for class name concatenation for dynamic props, and keep presentation logic in one place. It allows developers to define strict design system rules and understand layout relations directly where the component is used.
```
// Example of a dynamic styled component implementation
const UiBox = styled.div`
  display: flex;
  ${({ width }) => width && `width: ${width}rem;`}
`

// Usage of the component with layout props
<UiBox
  pad={5}
  height={20}
  width="100%"
  direction="column"
  align="center"
  valign="center"
  background="dark-3"
  position="relative"
>
  {/* Content */}
</UiBox>
```
https://youeye.dev/docs/getting-started/brief-history/
Compare YouEye (CCSS) with styled-system
Unlike styled-system, YouEye's CCSS mapping approach allows the compiler to support custom properties and custom values. This architecture enables developers to create their own custom design systems, meaning the functionality of Styled System could be implemented on top of CCSS.
https://youeye.dev/docs/getting-started/faq/
Use @you-eye/styled in React Native
For React Native projects, use the native-specific import path. The Ui component will render as a View by default. Other React Native components can be used via Ui.Text and similar helpers, following the same pattern as the HTML version.
```
import { Ui } from '@cryptic-css/styled/native'
```
https://youeye.dev/docs/implementations/styled/
Install and enable @you-eye/babel-plugin-react
Add @you-eye/babel-plugin-react to the plugins section of your Babel configuration to enable static CSS extraction and component optimization.
```
{
  "plugins": ["...", "@you-eye/babel-plugin-react"]
}
```
https://youeye.dev/docs/babel-plugins/babel-plugin-react/
Style child elements based on parent hover state using the Ui component
To style an element based on its parent's context (such as a hover state) within the <Ui> component, use the child prop. The child prop accepts a CSS selector as a key, allowing you to target specific nested elements when the parent is hovered. This is the required alternative to the standard ccss function's :hover syntax when working with <Ui> components.
```
render(
  <Ui.a 
    href="#" 
    pad={3} 
    child={{ ':hover span': { opacity: 1 } }}
  >
    Hover for pizza 
    <Ui.span opacity={0}>🍕</Ui.span>
  </Ui.a>
)
```
https://youeye.dev/docs/guides/tips-and-tricks/
Enable or disable blog features using the blog plugin
Blog features are powered by the blog plugin. To add blog content, place files within the blog directory. The plugin supports the use of tags for organizing posts. To completely remove blog features from the project, delete the blog directory.
https://youeye.dev/blog/tags/hello/
Use the YouEye Ui component for styling
The Ui component serves as an all-purpose UI building block that allows applying CSS styles directly via properties/attributes. It supports a polymorphic as prop to render as specific HTML tags (e.g., <Ui as="section">). For those using @you-eye/styled, property-based components like <Ui.section /> are also available.
```
import Ui from 'chosen-implementation'

// Basic usage with CSS properties
const Component = () => <Ui display="flex" />

// Using the 'as' prop for HTML tags
<Ui as="section" display="flex" />
```
https://youeye.dev/docs/getting-started/basic-usage/
Enable or disable blog features using the blog plugin
Blog features are powered by the blog plugin. To add blog posts, place files within the blog directory. The plugin supports the use of tags. To completely remove blog functionality from the project, delete the entire blog directory.
https://youeye.dev/blog/2019/05/30/welcome/
Optimize YouEye performance with static extraction
While generating CSS at runtime has performance costs, YouEye provides a Babel plugin that supports static extraction. This plugin optimizes performance by replacing YouEye UI calls with native DOM elements and class names, reducing the runtime overhead associated with CSS-in-JS.
https://youeye.dev/docs/getting-started/faq/
Use CSS properties as props with YouEye
YouEye allows developers to use any standard CSS property directly as a prop on the <Ui> component. It supports both full CSS property names and 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>
```
https://youeye.dev/
Set up and manage blog posts using the blog plugin
To use blog features, add content files to the blog directory. The plugin supports the use of tags for organizing posts. To completely disable or remove blog functionality, delete the blog directory.
https://youeye.dev/blog/