🎨 Aesthetic is a powerful React library for styling components, whether it be CSS-in-JS using objects, importing stylesheets, or simply referencing external class names.
JavaScript Other
Switch branches/tags
v2.0.0 v1.4.0 v1.3.0 v1.2.0 v1.0.1 v1.0.0 v0.5.2 v0.5.1 v0.5.0 v0.3.0 aesthetic@2.6.0 aesthetic@2.5.0 aesthetic@2.4.1 aesthetic@2.4.0 aesthetic@2.3.1 aesthetic@2.3.0 aesthetic@2.2.4 aesthetic@2.2.3 aesthetic@2.2.2 aesthetic@2.2.1 aesthetic@2.2.0 aesthetic@2.1.0 aesthetic@2.0.0 aesthetic@2.0.0-0 aesthetic@1.7.1 aesthetic@1.7.0 aesthetic@1.6.0 aesthetic@1.5.0 aesthetic@1.4.2 aesthetic@1.4.1 aesthetic@1.4.0 aesthetic@1.3.0 aesthetic@1.3.0-rc.1 aesthetic@1.2.0 aesthetic@1.1.2 aesthetic@1.1.1 aesthetic@1.1.0 aesthetic@1.0.1 aesthetic@1.0.0 aesthetic@0.6.2 aesthetic@0.6.1 aesthetic@0.6.0 aesthetic@0.5.2 aesthetic@0.5.1 aesthetic@0.5.0 aesthetic@0.4.0 aesthetic@0.3.0 aesthetic@0.1.2 aesthetic@0.1.1 aesthetic@0.1.0 aesthetic@0.0.4 aesthetic@0.0.3 aesthetic@0.0.2 aesthetic@0.0.1 aesthetic-utils@1.6.2 aesthetic-utils@1.6.1 aesthetic-utils@1.6.0 aesthetic-utils@1.5.0 aesthetic-utils@1.4.2 aesthetic-utils@1.4.1 aesthetic-utils@1.4.0 aesthetic-utils@1.3.0 aesthetic-utils@1.3.0-rc.1 aesthetic-utils@1.2.0 aesthetic-utils@1.1.2 aesthetic-utils@1.1.1 aesthetic-utils@1.1.0 aesthetic-utils@1.0.1 aesthetic-utils@1.0.0 aesthetic-utils@0.4.3 aesthetic-utils@0.4.2 aesthetic-utils@0.4.1 aesthetic-utils@0.4.0 aesthetic-utils@0.3.0 aesthetic-native@1.7.0 aesthetic-native@1.6.1 aesthetic-native@1.6.0 aesthetic-native@1.5.0 aesthetic-native@1.4.2 aesthetic-native@1.4.1 aesthetic-native@1.4.0 aesthetic-native@1.3.0 aesthetic-native@1.3.0-rc.1 aesthetic-native@1.2.0 aesthetic-native@1.1.2 aesthetic-native@1.1.1 aesthetic-native@1.1.0 aesthetic-native@1.0.1 aesthetic-native@1.0.0 aesthetic-native@0.3.2 aesthetic-native@0.3.1 aesthetic-native@0.3.0 aesthetic-native@0.2.2 aesthetic-native@0.2.1 aesthetic-native@0.2.0 aesthetic-native@0.1.0 aesthetic-jss@0.1.0 aesthetic-jss@0.0.4 aesthetic-jss@0.0.3 aesthetic-jss@0.0.2
Nothing to show
Clone or download
Latest commit 99d5d0b Jul 19, 2018

README.md

Aesthetic

Build Status

Aesthetic is a powerful React library for styling components, whether it be CSS-in-JS using style objects, importing stylesheets, or simply referencing external class names. Simply put, Aesthetic is an abstraction layer that utilizes higher-order-components for the compilation of styles via third-party libraries, all the while providing customizability, theming, and a unified syntax.

import React from "react";
import PropTypes from "prop-types";
import { StylesPropType } from "aesthetic";
import withStyles, { classes } from "../path/to/styler";

function Button({ children, styles }) {
  return (
    <button type="button" className={classes(styles.button)}>
      {children}
    </button>
  );
}

Button.propTypes = {
  children: PropTypes.node.isRequired,
  styles: StylesPropType.isRequired
};

export default withStyles(({ unit }) => ({
  button: {
    textAlign: "center",
    display: "inline-block",
    padding: unit
  }
}))(Button);

Requirements

  • React 15/16+
  • IE 10+
  • WeakMap

Installation

Aesthetic requires React as a peer dependency.

npm install aesthetic react --save
// Or
yarn add aesthetic react

Documentation

https://milesj.gitbook.io/aesthetic