Look is a modular, plugin-based and feature-rich styling library for React.
It intelligently splits static and dynamic styles to maximize reusablility and performance. It simplyfies how you are styling your Components.

Warning: This README and the docs reference the 1.0.0 Version. It does not support React Native by now (coming soon).
Make sure to test it!

Features

• ES2015 Classes & React.createClass
• stateless Components
• server-side rendering
• plugin-based
• developer tools
• Sass-like nesting
• pseudo classes
• media queries
• platform queries
• conditioned styles
• stateful values
• fallback values
• extending
• vendor prefixing
• CSS, font-face & keyframes API

Documentation

The documentation contains information on every part of Look including usage guides and API reference.

New to Look?
Make sure to check out the Getting Started Guide which provides a full guide on how to use Look. From installation, over configuration and up to even developer tooling.

Table of contents

1. Getting Started
   • 1.1. Installation
   • 1.2. First Component
   • 1.3. Stateless Components
   • 1.4. Pseudo classes
   • 1.5. Media queries
   • 1.6. Mixins & Plugins
   • 1.7. Fallback values
   • 1.8. Vendor prefixes
   • 1.9. Server-side rendering
   • 1.10. DevTools
2. Registry
   • 2.1. Plugins
     • 2.1.1 DevTools
   • 2.2. Mixins
3. API Reference
   • 3.1. Look
   • 3.2. StyleSheet
   • 3.3. LookRoot
   • 3.4. StyleContainer
4. Guides
   • 4.1. Upgrading Look
   • 4.2. Configuring Look
   • 4.3. Build your own: Mixin
   • 4.4. Build your own: Plugin
5. FAQ

Example

npm install react-look

The syntax is quite similar to Sass and other React styling libraries. Use nested objects to define pseudo classes, media queries or conditioned styles.

import React, { Component, PropTypes } from 'react'
import look, { StyleSheet } from 'react-look'

class Header extends Component {
  static defaultProps = { size: 24 };
  static propTypes = { size: PropTypes.number.isRequired };
  state = { status: 'active' };

  render() {
    return (
      // Styles are basically applied using the `className` property
      <header className={styles.header}>
        <h1 className={styles.title}>
          {this.props.title}
        </h1>
      </header>
    )
  }
}

// generates classNames for each selector
const styles = StyleSheet.create({
  header: {
    transition: '200ms all linear',
    // Use media queries or pseudo classes
    // using nested style objects. Those get transformed
    // on the fly and can be nested endlessly.
    '@media (min-height: 800px)': {
      fontSize: 13,
      ':hover': {    
        fontSize: 15
      }
    },
        // You can also use mixins with the same selector.
        // They'll get split intelligently and evaluated on render
    'status=active': {             
      backgroundColor: 'green',
      'size>=20': {            
        backgroundColor: 'pink'       
      }
    }
  },
  title: {
    fontWeight: 800,
    // use functions to inject props, state or context values
    fontSize: (props, state, context) => props.size * state.zoom
  }
})

export default look(Header)

Demo

Check out the provided examples for some special use cases. See them in action using the demo. You can easily run the examples on your own within the provided demo by just:

git clone --bare https://github.com/rofrischmann/react-look.git
npm install
npm run babel
# run this as a client-side only demo
npm run demo
# run this as a universal demo
npm run demo:universal

License

Look is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann.

Contributing

I would love to see people getting involved.
If you have a feature request please create an issue. Also if you're even improving Look by any kind please don't be shy and send a pull request to let everyone benefit.

Issues

If you're having any issue please let me know as fast as possible to find a solution a hopefully fix the issue. Try to add as much information as possible such as your environment, exact case, the line of actions to reproduce the issue.

Pull Requests

If you are creating a pull request, try to use commit messages that are self-explanatory. Also always add some tests unless it's totally senseless (add a reason why it's senseless) and test your code before you commit so Travis won't throw errors.