Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
https://github.com/paypal/glamorous

DEPRECATED: 💄 Maintainable CSS with React
https://github.com/paypal/glamorous
css-in-js glamor glamorous react styled-components
Last synced: 21 days ago
JSON representation
DEPRECATED: 💄 Maintainable CSS with React
Host: GitHub
URL: https://github.com/paypal/glamorous
Owner: paypal
License: mit
Archived: true
Created: 2017-04-03T21:35:49.000Z (about 7 years ago)
Default Branch: master
Last Pushed: 2018-12-06T19:58:04.000Z (over 5 years ago)
Last Synced: 2024-05-17T07:42:12.549Z (30 days ago)
Topics: css-in-js, glamor, glamorous, react, styled-components
Language: JavaScript
Homepage: https://glamorous.rocks
Size: 1.25 MB
Stars: 3,644
Watchers: 59
Forks: 209
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Lists

awesome-stars - glamorous - 💄 Maintainable CSS with React (JavaScript)
awesome-stars - glamorous
awesome-stars - paypal/glamorous - DEPRECATED: 💄 Maintainable CSS with React (JavaScript)
awesome-stars - paypal/glamorous - DEPRECATED: 💄 Maintainable CSS with React (JavaScript)
awesome-stars - glamorous
my-awesome-stars - paypal/glamorous - DEPRECATED: 💄 Maintainable CSS with React (JavaScript)
awesome-css-in-js - glamorous
awesome - glamorous - DEPRECATED: 💄 Maintainable CSS with React (JavaScript)
awesome-stars - paypal/glamorous - DEPRECATED: 💄 Maintainable CSS with React (JavaScript)
README

        # STATUS: DEPRECATED AND UNMAINTAINED

**For details on the unmaintained status (and to help people with an automated migration to [emotion](https://emotion.sh)), see [#419](https://github.com/paypal/glamorous/issues/419).**



  

  


  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]

[![All Contributors](https://img.shields.io/badge/all_contributors-67-orange.svg?style=flat-square)](#contributors)

[![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

  ](#glamorousrocks)

- [Installation](#installation)

- [Usage](#usage)

- [Documentation](#documentation)

- [Related projects](#related-projects)

- [Using glamorous with react-sketchapp](#using-glamorous-with-react-sketchapp)

- [Usage with Stylus](#usage-with-stylus)

- [Users](#users)

- [Inspiration](#inspiration)

- [Other Solutions](#other-solutions)

- [Support](#support)

- [Got Questions?](#got-questions)

- [Swag 👕](#swag-)

- [Contributors](#contributors)

- [LICENSE](#license)

## Installation

You will find instructions to install glamorous [here](https://glamorous.rocks/basics/#installation).

## Usage

You will find a getting started guide [here](https://glamorous.rocks/getting-started/).

## Documentation

You will find [tutorials](https://glamorous.rocks/getting-started/),

[examples](https://glamorous.rocks/examples/),

[API documentation](https://glamorous.rocks/api), and more at the glamorous

website:



glamorous.rocks



## Related projects

- [`jest-glamor-react`](https://github.com/kentcdodds/jest-glamor-react): Jest utilities for Glamor and React

- [`glamorous-native`](https://github.com/robinpowered/glamorous-native): React Native component styling solved 💄

- [`glamorous-primitives`](https://github.com/nitin42/glamorous-primitives): style primitive interfaces with glamorous 💄

- [`babel-plugin-glamorous-displayname`](https://github.com/bernard-lin/babel-plugin-glamorous-displayname): Automatically adds a `displayName` to your glamorous components for a better debugging experience.

- [`styled-system`](https://github.com/jxnblk/styled-system): Design system utilities for styled-components, glamorous, and other css-in-js libraries

- [`glamorous-pseudo`](https://github.com/tkh44/glamorous-pseudo): Pseudo component to extend built-in GlamorousComponents

- [`preact-glam`](https://github.com/vesparny/preact-glam): A tiny glamorous version for preact

- [`glamorous-jsxstyle`](https://github.com/paulmolluzzo/glamorous-jsxstyle): jsxstyle components generated with glamorous

- [`vscode-glamorous`](https://github.com/nitin42/vscode-glamorous): A vscode extension for `glamorous`, `glamorous-native` and `glamorous-primitives`.

- [`glam-atom`](https://github.com/nitin42/glam-atom): Atom editor extension for `glamorous`, `glamorous-native` and `glamorous-primitives`.

- [`css-in-js`](https://atom.io/packages/css-in-js): Atom editor extension making it easy to convert normal CSS format to CSS in JS format.

- [Convert CSS-in-JS](https://marketplace.visualstudio.com/items?itemName=paulmolluzzo.convert-css-in-js): VSCode extension making it easy to convert normal CSS format to CSS in JS format.

- [`glamorous-redocx`](https://github.com/nitin42/glamorous-redocx): style [redocx](https://github.com/nitin42/redocx) components with glamorous 💄

- [`stylelint-processor-glamorous`](https://github.com/zabute/stylelint-processor-glamorous): Lint glamorous and related css-in-js with [stylelint](https://github.com/stylelint/stylelint).

## Using glamorous with react-sketchapp



  



With the release of [`glamorous-primitives`](https://github.com/nitin42/glamorous-primitives), now you can use glamorous with [react-sketchapp](https://github.com/airbnb/react-sketchapp) to manage design systems and use React components for designs.

You can find documentation and related examples [here](https://github.com/airbnb/react-sketchapp/tree/master/examples/glamorous).

## Usage with Stylus

You can use [glamorous-stylus](https://github.com/nitin42/glamorous-stylus) for styling React components with Stylus. Find detailed documentation [here](https://github.com/nitin42/glamorous-stylus#api-reference).

## Users

Who uses `glamorous`? See [other/USERS.md](https://github.com/paypal/glamorous/blob/master/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](https://github.com/styled-components/styled-components)

- [jsxstyle](https://github.com/smyte/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](other/FAQ.md).

## Swag 👕

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](http://amzn.to/2rxvB1T).



  





  



## Contributors

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

| [
_{Kent C. Dodds}](https://kentcdodds.com)
[💻](https://github.com/paypal/glamorous/commits?author=kentcdodds "Code") [📖](https://github.com/paypal/glamorous/commits?author=kentcdodds "Documentation") [🚇](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/paypal/glamorous/commits?author=kentcdodds "Tests") [👀](#review-kentcdodds "Reviewed Pull Requests") | [
_{Ives van Hoorne}](http://ivesvh.com)
[💡](#example-CompuIves "Examples") | [
_{Gerardo Nardelli}](https://gnardelli.com)
[📖](https://github.com/paypal/glamorous/commits?author=patitonar "Documentation") | [
_{Chandan Rai}](https://github.com/crowchirp)
[📖](https://github.com/paypal/glamorous/commits?author=crowchirp "Documentation") | [
_{BinHong Lee}](https://binhonglee.github.io)
[📖](https://github.com/paypal/glamorous/commits?author=binhonglee "Documentation") | [
_{Paul Molluzzo}](https://paul.molluzzo.com)
[📖](https://github.com/paypal/glamorous/commits?author=paulmolluzzo "Documentation") [💡](#example-paulmolluzzo "Examples") | [
_{Sriram Thiagarajan}](http://tsriram.in)
[💻](https://github.com/paypal/glamorous/commits?author=tsriram "Code") |

| :---: | :---: | :---: | :---: | :---: | :---: | :---: |

| [
_{Pavithra Kodmad}](https://github.com/pksjce)
[💡](#example-pksjce "Examples") | [
_{Alessandro Arnodo}](http://alessandro.arnodo.net)
[💻](https://github.com/paypal/glamorous/commits?author=vesparny "Code") [📖](https://github.com/paypal/glamorous/commits?author=vesparny "Documentation") [⚠️](https://github.com/paypal/glamorous/commits?author=vesparny "Tests") | [
_{Jason Miller}](https://jasonformat.com)
[👀](#review-developit "Reviewed Pull Requests") | [
_{Kyle Welch}](http://www.krwelch.com)
[👀](#review-kwelch "Reviewed Pull Requests") [💡](#example-kwelch "Examples") | [
_{Javi Velasco}](http://javivelasco.com)
[👀](#review-javivelasco "Reviewed Pull Requests") | [
_{Brandon Dail}](https://twitter.com/aweary)
[👀](#review-aweary "Reviewed Pull Requests") | [
_{Jason Brown}](http://browniefed.com)
[👀](#review-browniefed "Reviewed Pull Requests") |

| [
_jackyho112](https://github.com/jackyho112)
[💻](https://github.com/paypal/glamorous/commits?author=jackyho112 "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=jackyho112 "Tests") | [
_{Kurtis Kemple}](https://twitter.com/kurtiskemple)
[💻](https://github.com/paypal/glamorous/commits?author=kkemple "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=kkemple "Tests") [📖](https://github.com/paypal/glamorous/commits?author=kkemple "Documentation") | [
_{Bernardo Raposo}](http://bernardoraposo.com)
[📖](https://github.com/paypal/glamorous/commits?author=braposo "Documentation") [💡](#example-braposo "Examples") | [
_{Ryan Delaney}](http://rdel.io)
[💻](https://github.com/paypal/glamorous/commits?author=rrdelaney "Code") | [
_{Anthony Ng}](http://anthonyng.me)
[📖](https://github.com/paypal/glamorous/commits?author=newyork-anthonyng "Documentation") | [
_{Matthew Crutchfield}](http://cnn.com)
[💡](#example-mtcrutch "Examples") | [
_{Kye Hohenberger}](https://github.com/tkh44)
[💻](https://github.com/paypal/glamorous/commits?author=tkh44 "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=tkh44 "Tests") [📖](https://github.com/paypal/glamorous/commits?author=tkh44 "Documentation") |

| [
_{Bernard Lin}](https://github.com/bernard-lin)
[📖](https://github.com/paypal/glamorous/commits?author=bernard-lin "Documentation") [🔌](#plugin-bernard-lin "Plugin/utility libraries") | [
_{Miguel Correa}](http://miguelc1221.github.io/)
[💻](https://github.com/paypal/glamorous/commits?author=miguelc1221 "Code") | [
_{Brian Hough}](http://rallypoint.gg)
[💡](#example-bhough "Examples") | [
_{Erik Cupal}](https://github.com/ErikCupal)
[💻](https://github.com/paypal/glamorous/commits?author=ErikCupal "Code") | [
_{Kok J Sam}](https://github.com/sammkj)
[💻](https://github.com/paypal/glamorous/commits?author=sammkj "Code") | [
_{Oleg Proskurin}](http://twitter.com/#!/usulpro)
[📖](https://github.com/paypal/glamorous/commits?author=UsulPro "Documentation") | [
_{Luke John}](https://github.com/luke-john)
[💻](https://github.com/paypal/glamorous/commits?author=luke-john "Code") |

| [
_FredericH](http://fr.linkedin.com/in/fredericheem)
[💡](#example-FredericHeem "Examples") | [
_{Atticus White}](https://atticuswhite.com)
[📖](https://github.com/paypal/glamorous/commits?author=ajwhite "Documentation") [🔌](#plugin-ajwhite "Plugin/utility libraries") | [
_marzelin](https://github.com/marzelin)
[💻](https://github.com/paypal/glamorous/commits?author=marzelin "Code") | [
_iwantmyname](https://iwantmyname.com/)
[🚇](#infra-iwantmyname "Infrastructure (Hosting, Build-Tools, etc)") | [
_{Ethan Godt}](http://ethangodt.com)
 | [
_{Zill Ding}](https://github.com/zillding)
[💻](https://github.com/paypal/glamorous/commits?author=zillding "Code") | [
_{Dan Bradley}](https://github.com/debradley)
[💻](https://github.com/paypal/glamorous/commits?author=debradley "Code") |

| [
_{Lufty Wiranda}](http://instagram.com/luftywiranda13)
[💻](https://github.com/paypal/glamorous/commits?author=luftywiranda13 "Code") | [
_{Ansuman Shah}](https://github.com/ansumanshah)
[💻](https://github.com/paypal/glamorous/commits?author=ansumanshah "Code") [📖](https://github.com/paypal/glamorous/commits?author=ansumanshah "Documentation") | [
_{Travis LaDuke}](http://-)
[💡](#example-laduke "Examples") | [
_{Aydın Çağrı Dumlu}](https://github.com/acgrdumlu)
[🐛](https://github.com/paypal/glamorous/issues?q=author%3Aacgrdumlu "Bug reports") [💻](https://github.com/paypal/glamorous/commits?author=acgrdumlu "Code") | [
_{Maja Wichrowska}](https://github.com/majapw)
[🐛](https://github.com/paypal/glamorous/issues?q=author%3Amajapw "Bug reports") | [
_{Tom Liu}](https://github.com/gt3240)
[📖](https://github.com/paypal/glamorous/commits?author=gt3240 "Documentation") | [
_{Siddharth Kshetrapal}](https://github.com/siddharthkp)
[⚠️](https://github.com/paypal/glamorous/commits?author=siddharthkp "Tests") [🔧](#tool-siddharthkp "Tools") |

| [
_WillowHQ](https://github.com/WillowHQ)
[📖](https://github.com/paypal/glamorous/commits?author=WillowHQ "Documentation") | [
_{Mohammad Rajabifard}](https://tarino.ir)
[🐛](https://github.com/paypal/glamorous/issues?q=author%3Amorajabi "Bug reports") [📖](https://github.com/paypal/glamorous/commits?author=morajabi "Documentation") | [
_{Omar Albacha}](https://github.com/Oalbacha)
[💻](https://github.com/paypal/glamorous/commits?author=Oalbacha "Code") [📖](https://github.com/paypal/glamorous/commits?author=Oalbacha "Documentation") | [
_tdeschryver](https://github.com/tdeschryver)
[💻](https://github.com/paypal/glamorous/commits?author=tdeschryver "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=tdeschryver "Tests") | [
_{Dylan Mozlowski}](https://github.com/DylanMoz)
[💻](https://github.com/paypal/glamorous/commits?author=DylanMoz "Code") | [
_{andretshurotshka}](https://github.com/goodmind)
[💻](https://github.com/paypal/glamorous/commits?author=goodmind "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=goodmind "Tests") | [
_Danila](https://github.com/O4epegb)
[⚠️](https://github.com/paypal/glamorous/commits?author=O4epegb "Tests") |

| [
_{Junyoung Clare Jang}](http://ailrun.github.io/)
[💻](https://github.com/paypal/glamorous/commits?author=Ailrun "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=Ailrun "Tests") | [
_{Björn Ricks}](https://twitter.com/bjoernricks)
[🐛](https://github.com/paypal/glamorous/issues?q=author%3Abjoernricks "Bug reports") [💻](https://github.com/paypal/glamorous/commits?author=bjoernricks "Code") [📖](https://github.com/paypal/glamorous/commits?author=bjoernricks "Documentation") [⚠️](https://github.com/paypal/glamorous/commits?author=bjoernricks "Tests") | [
_{Tyler Deitz}](http://tylerdeitz.com)
[💻](https://github.com/paypal/glamorous/commits?author=tvler "Code") | [
_{Shovan Chatterjee}](https://twitter.com/shovan_ch)
[📖](https://github.com/paypal/glamorous/commits?author=shovanch "Documentation") | [
_{johnjessewood}](https://github.com/johnjesse)
[💻](https://github.com/paypal/glamorous/commits?author=johnjesse "Code") | [
_Daniel](https://www.danielberndt.net)
[💻](https://github.com/paypal/glamorous/commits?author=danielberndt "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=danielberndt "Tests") | [
_{Ken Powers}](https://knpw.rs)
[🤔](#ideas-knpwrs "Ideas, Planning, & Feedback") [💡](#example-knpwrs "Examples") |

| [
_{John Grishin}](http://johngrish.in)
[🐛](https://github.com/paypal/glamorous/issues?q=author%3Aexah "Bug reports") [💻](https://github.com/paypal/glamorous/commits?author=exah "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=exah "Tests") | [
_{Mordy Tikotzky}](https://github.com/tikotzky)
[🐛](https://github.com/paypal/glamorous/issues?q=author%3Atikotzky "Bug reports") [💻](https://github.com/paypal/glamorous/commits?author=tikotzky "Code") | [
_{Alasdair McLeay}](https://github.com/penx)
[💡](#example-penx "Examples") | [
_{Ardamis Yeshak}](https://github.com/zabute)
[🔧](#tool-zabute "Tools") | [
_{Matthew Armstrong}](https://github.com/raingerber)
[⚠️](https://github.com/paypal/glamorous/commits?author=raingerber "Tests") | [
_{Wu Haotian}](https://github.com/whtsky)
[💻](https://github.com/paypal/glamorous/commits?author=whtsky "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=whtsky "Tests") | [
_{Viktor Ivarsson}](https://github.com/viktorivarsson)
[💻](https://github.com/paypal/glamorous/commits?author=viktorivarsson "Code") |

| [
_{Mitchell Hamilton}](https://hamil.town)
[💻](https://github.com/paypal/glamorous/commits?author=mitchellhamilton "Code") | [
_{Aaron Jensen}](https://twitter.com/aaronjensen)
[💻](https://github.com/paypal/glamorous/commits?author=aaronjensen "Code") | [
_{Colin Howeth}](http://colinhoweth.com)
[💻](https://github.com/paypal/glamorous/commits?author=cbhoweth "Code") [📖](https://github.com/paypal/glamorous/commits?author=cbhoweth "Documentation") | [
_{Royston Shufflebotham}](https://github.com/roystons)
[📖](https://github.com/paypal/glamorous/commits?author=roystons "Documentation") |

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/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