Dynamic styles

Alyle UI uses dynamic styles, for a better control of the styles.

Dynamic styles is inspired by many other CSS-in-JS libraries, like JSS and emotion

Some features:

  • Collision-free selectors.
  • Support for RTL/LTR.
  • Support for SSR (server-side rendering)
  • Reusable styles.
  • Theming with custom properties.

Basic style sheet

To create style sheet where some need the configuration of the theme, you can create it in the following way.

const styles = (theme: ThemeVariables) => ({
  // Style name, is optional, this is used to add a prefix to all classes,
  // it will only be seen in dev mode
  $name: 'example',
  // this would be like the name of the class
  demo: {
    color: theme.primary.default,
    // support for direction rtl/ltr
    borderBefore: '2px solid',    // css-ltr: border-left, css-rtl: border-right
    paddingBefore: '.5em',        // css-ltr: padding-left, css-rtl: padding-right
    '&:hover': {                  // \`&\` is equal to \`demo\` and therefore it would be 'demo:hover'
      color: theme.accent.default
    }
  },
  buttonLink: {
    color: theme.primary.default,
    textDecoration: 'inherit',
    '&:hover': {
      textDecoration: 'underline'
    }
  }
});

Example:

Try to pass the mouse over this text.
Link

Basic style

This is like a CSS declarations block.

const STYLE_BORDER = ({
  height: '120px',
  width: '120px',
  background: '#ffe259',
  backgroundImage: `linear-gradient(${
    [
      '45deg',
      '#ffe259 0%`',
      '#ffa751 100%'
    ].join()
  })`,
  borderRadius: '30% 70% 70% 30% / 30% 30% 70% 70%'
});

Made withfavoriteby Enlcxx

Currently v2.9.3. Released under the MIT License