glamorous 💄
 

Maintainable CSS with React

> Read [the intro blogpost][intro-blogpost] and [the v4 announcement blog post][v4-announcement-blogpost]

[![Build Status][build-badge]][build]
[![Code Coverage][coverage-badge]][coverage]
[![version][version-badge]][package]
[![downloads][downloads-badge]][npmcharts]
[![MIT License][license-badge]][license]

[![PRs Welcome][prs-badge]][prs]
[![Chat][chat-badge]][chat]
[![Code of Conduct][coc-badge]][coc]

[![gzip size][gzip-badge]][unpkg-dist]
[![size][size-badge]][unpkg-dist]
[![module formats: umd, cjs, and es][module-formats-badge]][unpkg-dist]
[![Watch on GitHub][github-watch-badge]][github-watch]
[![Star on GitHub][github-star-badge]][github-star]
[![Tweet][twitter-badge]][twitter]

Table of Contents

*
glamorous.rocks

* Documentation
* Related projects
* Using glamorous with react-sketchapp
* Usage with Stylus
* Users
* Inspiration
* Other Solutions
* Support
* Got Questions?
* Swag 👕
* Contributors
* LICENSE

Documentation

You will find tutorials,
examples,
API documentation, and more at the glamorous
website:

glamorous.rocks

Related projects

* jest-glamor-react: Jest utilities for Glamor and React
* glamorous-native: React Native component styling solved 💄
* glamorous-primitives: style primitive interfaces with glamorous 💄
* babel-plugin-glamorous-displayname: Automatically adds a displayName to your glamorous components for a better debugging experience.
* styled-system: Design system utilities for styled-components, glamorous, and other css-in-js libraries
* glamorous-pseudo: Pseudo component to extend built-in GlamorousComponents
* preact-glam: A tiny glamorous version for preact
* glamorous-jsxstyle: jsxstyle components generated with glamorous
* vscode-glamorous: A vscode extension for glamorous, glamorous-native and glamorous-primitives.
* glam-atom: Atom editor extension for glamorous, glamorous-native and glamorous-primitives.
* css-in-js: Atom editor extension making it easy to convert normal CSS format to CSS in JS format.
* Convert CSS-in-JS: VSCode extension making it easy to convert normal CSS format to CSS in JS format.
* glamorous-redocx: style redocx components with glamorous 💄
* stylelint-processor-glamorous: Lint glamorous and related css-in-js with stylelint.

Using glamorous with react-sketchapp

With the release of glamorous-primitives, now you can use glamorous with react-sketchapp to manage design systems and use React components for designs.

You can find documentation and related examples here.

Usage with Stylus

You can use glamorous-stylus for styling React components with Stylus. Find detailed documentation here.

Users

Who uses glamorous? See other/USERS.md and add yourself if you use glamorous!

Inspiration

This package was inspired by the work from people's work on the following
projects:

* styled-components
* jsxstyle

Other Solutions

There are actually quite a few solutions to the general problem of styling in
React. This isn't the place for a full-on comparison of features, but I'm
unaware of any which supports _all_ of the features which this library supports.

Support

If you need help, please fork [this CodeSandbox][help-sandbox] and bring it up
in [the chat][chat]

Got Questions?

Check out the FAQ.

Swag 👕

You can pick up [glamorous stickers][stickers] from
unixstickers.com! A portion of all purchases
will be donated to [Girls Who Code][gwc]! 🎉

In addition, a community member created this awesome t-shirt, and they're now
available on Amazon! For every shirt purchased, GSM Studio will donate $1 to
[Girls Who Code][gwc] to support the next generation of programmers. The shirts
come in various colors and sizes. In addition you can check out other clever
t-shirts by GSM Studio.

Contributors

Thanks goes to these people ([emoji key][emojis]):

|
_{Kent C. Dodds}
💻 📖 🚇") ⚠️ 👀 |
_{Ives van Hoorne}
💡 |
_{Gerardo Nardelli}
📖 |
_{Chandan Rai}
📖 |
_{BinHong Lee}
📖 |
_{Paul Molluzzo}
📖 💡 |
_{Sriram Thiagarajan}
💻 |
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
|
_{Pavithra Kodmad}
💡 |
_{Alessandro Arnodo}
💻 📖 ⚠️ |
_{Jason Miller}
👀 |
_{Kyle Welch}
👀 💡 |
_{Javi Velasco}
👀 |
_{Brandon Dail}
👀 |
_{Jason Brown}
👀 |
|
_jackyho112
💻 ⚠️ |
_{Kurtis Kemple}
💻 ⚠️ 📖 |
_{Bernardo Raposo}
📖 💡 |
_{Ryan Delaney}
💻 |
_{Anthony Ng}
📖 |
_{Matthew Crutchfield}
💡 |
_{Kye Hohenberger}
💻 ⚠️ 📖 |
|
_{Bernard Lin}
📖 🔌 |
_{Miguel Correa}
💻 |
_{Brian Hough}
💡 |
_{Erik Cupal}
💻 |
_{Kok J Sam}
💻 |
_{Oleg Proskurin}
📖 |
_{Luke John}
💻 |
|
_FredericH
💡 |
_{Atticus White}
📖 🔌 |
_marzelin
💻 |
_iwantmyname
🚇") |
_{Ethan Godt}
|
_{Zill Ding}
💻 |
_{Dan Bradley}
💻 |
|
_{Lufty Wiranda}
💻 |
_{Ansuman Shah}
💻 📖 |
_{Travis LaDuke}
💡 |
_{Aydın Çağrı Dumlu}
🐛 💻 |
_{Maja Wichrowska}
🐛 |
_{Tom Liu}
📖 |
_{Siddharth Kshetrapal}
⚠️ 🔧 |
|
_WillowHQ
📖 |
_{Mohammad Rajabifard}
🐛 📖 |
_{Omar Albacha}
💻 📖 |
_tdeschryver
💻 ⚠️ |
_{Dylan Mozlowski}
💻 |
_{andretshurotshka}
💻 ⚠️ |
_Danila
⚠️ |
|
_{Junyoung Clare Jang}
💻 ⚠️ |
_{Björn Ricks}
🐛 💻 📖 ⚠️ |
_{Tyler Deitz}
💻 |
_{Shovan Chatterjee}
📖 |
_{johnjessewood}
💻 |
_Daniel
💻 ⚠️ |
_{Ken Powers}
🤔 |
|
_{John Grishin}
🐛 💻 ⚠️ |
_{Mordy Tikotzky}
🐛 💻 |
_{Alasdair McLeay}
💡 |
_{Ardamis Yeshak}
🔧 |
_{Matthew Armstrong}
⚠️ |

This project follows the [all-contributors][all-contributors] specification.
Contributions of any kind welcome!

LICENSE

MIT

[npm]: https://www.npmjs.com/
[node]: https://nodejs.org
[build-badge]: https://img.shields.io/travis/paypal/glamorous.svg?style=flat-square
[build]: https://travis-ci.org/paypal/glamorous
[coverage-badge]: https://img.shields.io/codecov/c/github/paypal/glamorous.svg?style=flat-square
[coverage]: https://codecov.io/github/paypal/glamorous
[version-badge]: https://img.shields.io/npm/v/glamorous.svg?style=flat-square
[package]: https://www.npmjs.com/package/glamorous
[downloads-badge]: https://img.shields.io/npm/dm/glamorous.svg?style=flat-square
[npmcharts]: https://npmcharts.com/compare/glamorous
[license-badge]: https://img.shields.io/npm/l/glamorous.svg?style=flat-square
[license]: https://github.com/paypal/glamorous/blob/master/LICENSE
[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[prs]: http://makeapullrequest.com
[chat]: https://gitter.im/paypal/glamorous
[chat-badge]: https://img.shields.io/gitter/room/paypal/glamorous.svg?style=flat-square
[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
[coc]: https://github.com/paypal/glamorous/blob/master/other/CODE_OF_CONDUCT.md
[github-watch-badge]: https://img.shields.io/github/watchers/paypal/glamorous.svg?style=social
[github-watch]: https://github.com/paypal/glamorous/watchers
[github-star-badge]: https://img.shields.io/github/stars/paypal/glamorous.svg?style=social
[github-star]: https://github.com/paypal/glamorous/stargazers
[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20glamorous!%20https://github.com/paypal/glamorous%20%F0%9F%91%8D
[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/paypal/glamorous.svg?style=social
[emojis]: https://github.com/kentcdodds/all-contributors#emoji-key
[all-contributors]: https://github.com/kentcdodds/all-contributors
[gzip-badge]: http://img.badgesize.io/https://unpkg.com/glamorous/dist/glamorous.umd.min.js?compression=gzip&label=gzip%20size&style=flat-square
[size-badge]: http://img.badgesize.io/https://unpkg.com/glamorous/dist/glamorous.umd.min.js?label=size&style=flat-square
[unpkg-dist]: https://unpkg.com/glamorous/dist/
[module-formats-badge]: https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20es-green.svg?style=flat-square
[intro-blogpost]: https://medium.com/p/fb3c9f4ed20e
[help-sandbox]: http://kcd.im/glamorous-help
[gwc]: https://girlswhocode.com/
[stickers]: https://www.unixstickers.com/tag/glamorous
[v4-announcement-blogpost]: https://blog.kentcdodds.com/glamorous-v4-is-here-c678fe02a39a