Home | YouEye

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.

CSS as props
Maintainability
Style sharing
Single component approach

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>

It is taught that separating concerns is a good practice. Markup and styles however are the same concern: Presentation.

Coupling markup with styles is not a new idea, it was how webpages were styled before CSS. HTML needed an interface to connect to this new technology: Selectors.

Maintaining selectors require rules, naming systems - which none them are flawless -, it forces new tools and workarounds to handle dynamic cases, but first and foremost: selectors make hard to understand the results by looking at the markup.

YouEye/inline styles/utility classes are removing this overhead. You can understand the layout immediately just by looking at the code, without the need to construct the possible outcome in your mind checking through multiple files and separate code segments. These are especially important if the codebase is managed by multiple members.

Not following/understanding the conventions/layout of a project correctly will cause frictions in the design-system. YouEye is getting rid of a lot of variables, improves consistency and enforces a less error prone approach.

Examples of handling dynamic cases

.item {
    list-style-type: none;
    margin-left: 10px;
    border: 1px solid black;
}
.item--active { font-weight: bold }
.item--highlighted { border-color: yellow }

Class names

// String concatenation
<li className={`item ${isActive ? 'item---active' : ''} ${isTop10 ? 'item--highlighted' : ''}`} />

// String concatenation + CSS Modules
<li className={`${styles.item} ${isActive ? styles.itemActive : ''} ${isTop10 ? styles.itemHighlighted : ''}`} />

// 'classnames' 3rd party tool
<li className={classNames(['item', { 'item--active': isActive, 'item--highlighted': isTop10 }])} />

// 'classnames' 3rd party tool + CSS Modules
<li className={classNames([styles.item, { [styles.itemActive]: isActive, [styles.itemHighlighted]: isTop10 }])} />

Styled Components

const StyledItem = styled.div`
    list-style-type: none;
    margin-left: 10px;
    border: 1px solid black;
    ${({ active }) => active && 'font-weight: bold'}
    ${({ highlighted }) => highlighted && 'border-color: yellow'}
`

YouEye props

<Ui.li
    listStyleType="none"
    marginLeft={2}
    borderWidth={1}
    borderColor={isTop10 ? 'yellow' : 'black'}
    fontWeight={isActive ? 'normal' : 'bold'}
/>

YouEye custom prop

<Ui.li item={{ active: isActive, highlighted: isTop10 }} />

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.

Value maps
Plugins
Custom props
Shorthands

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

<Ui width="demo" textAlign="center" margin="0 auto">
    <Ui.span fontSize="large" color="paragraph">
        Memes are fun!
    </Ui.span>
</Ui>

<Ui width="demo" textAlign="center" margin="0 auto">
    <Ui.span fontSize="large" color="paragraph">
        Memes are fun!
    </Ui.span>
</Ui>

Result

Enhance the functionality of existing properties by supporting new value types and/or special rules.

Good examples are CCSS's plugin-gutter for consistent spacing, and plugin-ratio to support the padding ratio "hack" out-of-the-box.

Live Editor

<Ui
    display="grid"
    gridTemplateColumns="1fr 1fr"
    width="100%"
    // 5 * 5px
    gridGap={5}
>
    {/* 3 * 5px */}
    <Ui padding={3}>Column 1</Ui>
    <Ui padding={3}>Column 2</Ui>
</Ui>

<Ui
    display="grid"
    gridTemplateColumns="1fr 1fr"
    width="100%"
    // 5 * 5px
    gridGap={5}
>
    {/* 3 * 5px */}
    <Ui padding={3}>Column 1</Ui>
    <Ui padding={3}>Column 2</Ui>
</Ui>

Result

Add your own custom properties to share, compose, re-use styles, and design tokens. Create amazing new features living right inside your CSS.

Good examples are CCSS's prop-keyframes to simplify animation creation, and prop-mq to support prepared custom breakpoints instead of manually constructing them.

Live Editor

<Ui
    animation="1s linear infinite"
    keyframes={{
        from: { opacity: 0 },
        to: { opacity: 1 }
    }}
    at={['tablet-', {
        keyframes: {
            from: { opacity: 0, transform: 'scale(1)' },
            to: { opacity: 1, transform: 'scale(2)' }
        }
    }]}
    >
    Current size:
    <Ui.span at={['tablet-', { display: 'none' }]}>Desktop</Ui.span>
    <Ui.span at={['small+', { display: 'none' }]}>Tablet</Ui.span>
</Ui>

<Ui
    animation="1s linear infinite"
    keyframes={{
        from: { opacity: 0 },
        to: { opacity: 1 }
    }}
    at={['tablet-', {
        keyframes: {
            from: { opacity: 0, transform: 'scale(1)' },
            to: { opacity: 1, transform: 'scale(2)' }
        }
    }]}
    >
    Current size:
    <Ui.span at={['tablet-', { display: 'none' }]}>Desktop</Ui.span>
    <Ui.span at={['small+', { display: 'none' }]}>Tablet</Ui.span>
</Ui>

Result

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" />

Paradigm shift

Examples of handling dynamic cases

Class names

Styled Components

YouEye props

YouEye custom prop

Super-charged by CCSS

Long names, long values

Long names, short values

Short names, short values

Static and Dynamic extraction