milesj/aesthetic


🎨 Aesthetic is a powerful type-safe, framework agnostic, CSS-in-JS library for styling components, whether it be plain objects, importing stylesheets, or simply referencing external class names.

https://milesj.gitbook.io/aesthetic

License: MIT

Language: TypeScript

Keywords: css-modules, react, react-native, react-style, styler, theme-styles, theming-components, unified-syntax


Aesthetic

Build Status npm version npm deps

Aesthetic is a powerful type-safe, framework agnostic, CSS-in-JS library for styling components, whether it be with plain objects, importing style sheets, or simply referencing external class names. Simply put, Aesthetic is an abstraction layer for the compilation of styles via third-party libraries, all the while providing customizability, theming, additional features, and a unified syntax.

import AphroditeAesthetic from 'aesthetic-adapter-aphrodite';
import { Theme } from './types';

const aesthetic = new AphroditeAesthetic<Theme>();

// Register a theme
aesthetic.registerTheme('light', {
  unit: 8,
});

// Register a style sheet definition for a component
aesthetic.registerStyleSheet('button', ({ unit }) => ({
  button: {
    textAlign: 'center',
    display: 'inline-block',
    padding: unit,
  },
}));

// Parse the styles and generate CSS class names
const styles = aesthetic.createStyleSheet('button');
const className = aesthetic.transformStyles(styles.button);

React

Supports both an HOC and hook styled React API!

import React from 'react';
import useStyles from './useStyles';

export type Props = {
  children: React.ReactNode;
};

export default function Button({ children }: Props) {
  const [styles, cx] = useStyles(({ unit }) => ({
    button: {
      textAlign: 'center',
      display: 'inline-block',
      padding: unit,
    },
  }));

  return (
    <button type="button" className={cx(styles.button)}>
      {children}
    </button>
  );
}

Requirements

  • IE 11+

Installation

yarn add aesthetic
// Or
npm install aesthetic

Documentation

https://milesj.gitbook.io/aesthetic

Project Statistics

Sourcerank 10
Repository Size 4 MB
Stars 117
Forks 6
Watchers 3
Open issues 5
Dependencies 1,618
Contributors 4
Tags 578
Created
Last updated
Last pushed

Top Contributors See all

Miles Johnson dependabot[bot] Sungmin Park Alphy11

Packages Referencing this Repo

aesthetic
Aesthetic is a powerful type-safe, framework agnostic, CSS-in-JS library for styling components t...
Latest release 4.1.1 - Updated - 117 stars
aesthetic-adapter-aphrodite
Aphrodite support for Aesthetic.
Latest release 4.1.0 - Updated - 117 stars
aesthetic-react
React hooks, composers, and more for styling components with Aesthetic.
Latest release 1.1.3 - Updated - 117 stars
aesthetic-adapter-css-modules
CSS modules support for Aesthetic.
Latest release 4.0.0 - Updated - 117 stars
aesthetic-utils
Utility functions for Aesthetic.
Latest release 2.0.1 - Updated - 117 stars
aesthetic-adapter-glamor
Glamor support for Aesthetic.
Latest release 2.2.1 - Updated - 117 stars
aesthetic-adapter-fela
Fela support for Aesthetic.
Latest release 4.0.1 - Updated - 117 stars
aesthetic-adapter-jss
JSS support for Aesthetic.
Latest release 3.4.1 - Updated - 117 stars
aesthetic-adapter-typestyle
TypeStyle support for Aesthetic.
Latest release 3.0.1 - Updated - 117 stars
aesthetic-native
React Native support for Aesthetic.
Latest release 1.6.1 - Updated - 117 stars

Recent Tags See all

aesthetic-react@1.1.3 September 24, 2019
aesthetic-utils@2.0.1 September 16, 2019
aesthetic-react@1.1.2 September 16, 2019
aesthetic-adapter-typestyle@3.0.1 September 16, 2019
aesthetic-adapter-jss@4.0.1 September 16, 2019
aesthetic-adapter-fela@4.0.1 September 16, 2019
aesthetic-adapter-aphrodite@4.1.0 September 16, 2019
aesthetic@4.1.1 September 16, 2019
aesthetic-react@1.1.1 July 24, 2019
aesthetic-react@1.1.0 July 12, 2019
aesthetic@4.1.0 July 11, 2019
aesthetic-utils@2.0.0 July 07, 2019
aesthetic-utils@2.0.0 July 07, 2019
aesthetic-react@1.0.0 July 07, 2019
aesthetic-adapter-typestyle@3.0.0 July 07, 2019

Something wrong with this page? Make a suggestion

Last synced: 2019-09-24 01:38:56 UTC

Login to resync this repository