1 | <p align="center" style="color: #343a40">
|
2 | <img src="https://cdn.rawgit.com/tkh44/emotion/master/emotion.png" alt="emotion" height="150" width="150">
|
3 | <h1 align="center">emotion</h1>
|
4 | </p>
|
5 | <p align="center" style="font-size: 1.2rem;">The Next Generation of CSS-in-JS</p>
|
6 |
|
7 | [![Backers on Open Collective](https://opencollective.com/emotion/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/emotion/sponsors/badge.svg)](#sponsors) [![npm version](https://badge.fury.io/js/emotion.svg)](https://badge.fury.io/js/emotion)
|
8 | [![Build Status](https://img.shields.io/circleci/project/github/emotion-js/emotion/master.svg)](https://circleci.com/gh/emotion-js/emotion)
|
9 | [![codecov](https://codecov.io/gh/emotion-js/emotion/branch/master/graph/badge.svg)](https://codecov.io/gh/emotion-js/emotion)
|
10 | ![core size](https://img.shields.io/bundlephobia/min/emotion.svg?label=core%20gzip%20size)
|
11 | ![core gzip size](https://img.shields.io/bundlephobia/minzip/emotion.svg?label=core%20size)
|
12 | ![react size](https://img.shields.io/bundlephobia/min/@emotion/styled-base.svg?label=react%20gzip%20size)
|
13 | ![react gzip size](https://img.shields.io/bundlephobia/minzip/@emotion/styled-base.svg?label=react%20size)
|
14 | [![slack](https://emotion.now.sh/badge.svg)](http://emotion.now.sh/)
|
15 |
|
16 | Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching in production.
|
17 |
|
18 | # [👀 Demo Sandbox](https://codesandbox.io/s/pk1qjqpw67)
|
19 |
|
20 | # [📖 Docs](https://emotion.sh/docs/introduction)
|
21 |
|
22 | Frequently viewed docs:
|
23 |
|
24 | - [Introduction](https://emotion.sh/docs/introduction)
|
25 | - [Install](https://emotion.sh/docs/install)
|
26 | - [CSS Prop](https://emotion.sh/docs/css-prop)
|
27 | - [Styled Components](https://emotion.sh/docs/styled)
|
28 | - [Composition](https://emotion.sh/docs/composition)
|
29 | - [Nested Selectors](https://emotion.sh/docs/nested)
|
30 | - [Media Queries](https://emotion.sh/docs/media-queries)
|
31 |
|
32 | ### Quick Start
|
33 |
|
34 | Get up and running with a single import.
|
35 |
|
36 | ```bash
|
37 | npm install --save emotion
|
38 | ```
|
39 |
|
40 | ```javascript
|
41 | import { css } from 'emotion'
|
42 |
|
43 | const app = document.getElementById('root')
|
44 | const myStyle = css`
|
45 | color: rebeccapurple;
|
46 | `
|
47 | app.classList.add(myStyle)
|
48 | ```
|
49 |
|
50 | Look here 👉 _[emotion babel plugin feature table and documentation](https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin-emotion)_
|
51 |
|
52 | ### Demo Sandbox
|
53 |
|
54 | [Demo Code Sandbox](https://codesandbox.io/s/pk1qjqpw67)
|
55 |
|
56 | ### Examples
|
57 |
|
58 | - [emotion website](site) [[Demo Here](https://emotion.sh)]
|
59 | - [next-hnpwa-guide-kit](https://github.com/tkh44/next-hnpwa-guide-kit) [[Demo Here](https://hnpwa.life)]
|
60 | - [reactivesearch](https://github.com/appbaseio/reactivesearch), a react UI library for Elasticsearch [[Website](https://opensource.appbase.io/reactivesearch/)]
|
61 | - [circuit-ui](https://github.com/sumup/circuit-ui), a react component library built at SumUp [[Storybook](https://sumup.github.io/circuit-ui/)]
|
62 | - [govuk-react](https://github.com/penx/govuk-react/), a React component library built for UK Government departments
|
63 | - **open a PR and add yours!**
|
64 |
|
65 | ### Ecosystem
|
66 |
|
67 | - [facepaint](https://github.com/emotion-js/facepaint)
|
68 | - [emotion-vue](https://github.com/egoist/emotion-vue)
|
69 | - [ember-emotion](https://github.com/alexlafroscia/ember-emotion)
|
70 | - [CSS to emotion transform](https://transform.now.sh/css-to-emotion/)
|
71 | - [ShevyJS](https://github.com/kyleshevlin/shevyjs)
|
72 | - [design-system-utils](https://github.com/mrmartineau/design-system-utils) - Utilities to give better access to your design system.
|
73 |
|
74 | ### In the Wild
|
75 |
|
76 | - [healthline.com](https://www.healthline.com)
|
77 | - [nytimes.com](https://www.nytimes.com)
|
78 | - [vault.crucible.gg](http://vault.crucible.gg/)
|
79 | - [saldotuc.com](https://saldotuc.com)
|
80 | - [gatsbythemes.com](https://gatsbythemes.com/)
|
81 | - [blazity.com](https://blazity.com/)
|
82 | - [postmates.com](https://postmates.com/)
|
83 | - [thedisconnect.co](https://thedisconnect.co/one)
|
84 | - [zefenify.com](https://zefenify.com/about.html)
|
85 | - [sentry.io](https://sentry.io)
|
86 |
|
87 | ## Contributors
|
88 |
|
89 | This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
|
90 | <a href="graphs/contributors"><img src="https://opencollective.com/emotion/contributors.svg?width=890&button=false" /></a>
|
91 |
|
92 | ## Backers
|
93 |
|
94 | Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/emotion#backer)]
|
95 |
|
96 | <a href="https://opencollective.com/emotion#backers" target="_blank"><img src="https://opencollective.com/emotion/backers.svg?width=890"></a>
|
97 |
|
98 | ## Sponsors
|
99 |
|
100 | Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/emotion#sponsor)]
|
101 |
|
102 | <a href="https://opencollective.com/emotion/sponsor/0/website" target="_blank"><img src="https://opencollective.com/emotion/sponsor/0/avatar.svg"></a>
|
103 | <a href="https://opencollective.com/emotion/sponsor/1/website" target="_blank"><img src="https://opencollective.com/emotion/sponsor/1/avatar.svg"></a>
|
104 | <a href="https://opencollective.com/emotion/sponsor/2/website" target="_blank"><img src="https://opencollective.com/emotion/sponsor/2/avatar.svg"></a>
|
105 | <a href="https://opencollective.com/emotion/sponsor/3/website" target="_blank"><img src="https://opencollective.com/emotion/sponsor/3/avatar.svg"></a>
|
106 | <a href="https://opencollective.com/emotion/sponsor/4/website" target="_blank"><img src="https://opencollective.com/emotion/sponsor/4/avatar.svg"></a>
|
107 | <a href="https://opencollective.com/emotion/sponsor/5/website" target="_blank"><img src="https://opencollective.com/emotion/sponsor/5/avatar.svg"></a>
|
108 | <a href="https://opencollective.com/emotion/sponsor/6/website" target="_blank"><img src="https://opencollective.com/emotion/sponsor/6/avatar.svg"></a>
|
109 | <a href="https://opencollective.com/emotion/sponsor/7/website" target="_blank"><img src="https://opencollective.com/emotion/sponsor/7/avatar.svg"></a>
|
110 | <a href="https://opencollective.com/emotion/sponsor/8/website" target="_blank"><img src="https://opencollective.com/emotion/sponsor/8/avatar.svg"></a>
|
111 | <a href="https://opencollective.com/emotion/sponsor/9/website" target="_blank"><img src="https://opencollective.com/emotion/sponsor/9/avatar.svg"></a>
|