├── .gitignore ├── examples ├── shared │ ├── utils │ │ └── text │ │ │ ├── index.js │ │ │ ├── text.js │ │ │ └── text.spec.js │ ├── assets │ │ ├── more.svg │ │ ├── like.svg │ │ ├── reply.svg │ │ └── retweet.svg │ ├── index.html │ └── data │ │ └── 755481795206971392.json ├── css │ ├── src │ │ ├── components │ │ │ ├── app │ │ │ │ ├── index.js │ │ │ │ └── app.js │ │ │ ├── footer │ │ │ │ ├── index.js │ │ │ │ └── footer.js │ │ │ ├── header │ │ │ │ ├── index.js │ │ │ │ └── header.js │ │ │ ├── tweet │ │ │ │ ├── index.js │ │ │ │ └── tweet.js │ │ │ └── content │ │ │ │ ├── index.js │ │ │ │ └── content.js │ │ ├── index.js │ │ └── styles │ │ │ └── main.css │ ├── package.json │ └── webpack.custom.babel.js ├── jss │ ├── src │ │ ├── components │ │ │ ├── app │ │ │ │ ├── index.js │ │ │ │ └── app.js │ │ │ ├── footer │ │ │ │ ├── index.js │ │ │ │ └── footer.js │ │ │ ├── header │ │ │ │ ├── index.js │ │ │ │ └── header.js │ │ │ ├── tweet │ │ │ │ ├── index.js │ │ │ │ └── tweet.js │ │ │ ├── content │ │ │ │ ├── index.js │ │ │ │ └── content.js │ │ │ └── global-styles │ │ │ │ ├── index.js │ │ │ │ └── global-styles.js │ │ └── index.js │ ├── package.json │ └── README.md ├── aphrodite │ ├── src │ │ ├── components │ │ │ ├── app │ │ │ │ ├── index.js │ │ │ │ └── app.js │ │ │ ├── tweet │ │ │ │ ├── index.js │ │ │ │ └── tweet.js │ │ │ ├── content │ │ │ │ ├── index.js │ │ │ │ └── content.js │ │ │ ├── footer │ │ │ │ ├── index.js │ │ │ │ └── footer.js │ │ │ └── header │ │ │ │ ├── index.js │ │ │ │ └── header.js │ │ ├── index.js │ │ └── global.css │ ├── webpack.custom.babel.js │ ├── package.json │ └── README.md ├── radium │ ├── src │ │ ├── components │ │ │ ├── app │ │ │ │ ├── index.js │ │ │ │ └── app.js │ │ │ ├── content │ │ │ │ ├── index.js │ │ │ │ └── content.js │ │ │ ├── footer │ │ │ │ ├── index.js │ │ │ │ └── footer.js │ │ │ ├── header │ │ │ │ ├── index.js │ │ │ │ └── header.js │ │ │ └── tweet │ │ │ │ ├── index.js │ │ │ │ └── tweet.js │ │ └── index.js │ ├── package.json │ └── README.md ├── css-modules │ ├── src │ │ ├── components │ │ │ ├── app │ │ │ │ ├── index.js │ │ │ │ ├── app.js │ │ │ │ └── app.css │ │ │ ├── content │ │ │ │ ├── index.js │ │ │ │ ├── content.css │ │ │ │ └── content.js │ │ │ ├── footer │ │ │ │ ├── index.js │ │ │ │ ├── footer.css │ │ │ │ └── footer.js │ │ │ ├── header │ │ │ │ ├── index.js │ │ │ │ ├── header.css │ │ │ │ └── header.js │ │ │ └── tweet │ │ │ │ ├── index.js │ │ │ │ ├── tweet.css │ │ │ │ └── tweet.js │ │ ├── styles │ │ │ └── colors.css │ │ └── index.js │ ├── webpack.custom.babel.js │ ├── package.json │ └── README.md ├── styled-components │ ├── src │ │ ├── components │ │ │ ├── app │ │ │ │ ├── index.js │ │ │ │ └── app.js │ │ │ ├── footer │ │ │ │ ├── index.js │ │ │ │ └── footer.js │ │ │ ├── header │ │ │ │ ├── index.js │ │ │ │ └── header.js │ │ │ ├── tweet │ │ │ │ ├── index.js │ │ │ │ └── tweet.js │ │ │ └── content │ │ │ │ ├── index.js │ │ │ │ └── content.js │ │ └── index.js │ ├── package.json │ └── README.md ├── .babelrc ├── .eslintrc ├── README.md ├── package.json └── webpack.base.babel.js ├── site ├── favicon.ico ├── src │ ├── index.css │ ├── index.js │ ├── App.css │ ├── App.js │ └── logo.svg ├── package.json ├── index.html └── README.md ├── CONTRIBUTING.md ├── LICENSE.md └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | build 3 | .DS_Store 4 | -------------------------------------------------------------------------------- /examples/shared/utils/text/index.js: -------------------------------------------------------------------------------- 1 | export * from './text'; 2 | -------------------------------------------------------------------------------- /examples/css/src/components/app/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './app'; 2 | -------------------------------------------------------------------------------- /examples/jss/src/components/app/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './app'; 2 | -------------------------------------------------------------------------------- /examples/aphrodite/src/components/app/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './app'; 2 | -------------------------------------------------------------------------------- /examples/css/src/components/footer/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './footer'; 2 | -------------------------------------------------------------------------------- /examples/css/src/components/header/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './header'; 2 | -------------------------------------------------------------------------------- /examples/css/src/components/tweet/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './tweet'; 2 | -------------------------------------------------------------------------------- /examples/jss/src/components/footer/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './footer'; 2 | -------------------------------------------------------------------------------- /examples/jss/src/components/header/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './header'; 2 | -------------------------------------------------------------------------------- /examples/jss/src/components/tweet/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './tweet'; 2 | -------------------------------------------------------------------------------- /examples/radium/src/components/app/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './app'; 2 | -------------------------------------------------------------------------------- /examples/aphrodite/src/components/tweet/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './tweet'; 2 | -------------------------------------------------------------------------------- /examples/css-modules/src/components/app/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './app'; 2 | -------------------------------------------------------------------------------- /examples/css/src/components/content/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './content'; 2 | -------------------------------------------------------------------------------- /examples/jss/src/components/content/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './content'; 2 | -------------------------------------------------------------------------------- /examples/radium/src/components/content/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './content'; 2 | -------------------------------------------------------------------------------- /examples/radium/src/components/footer/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './footer'; 2 | -------------------------------------------------------------------------------- /examples/radium/src/components/header/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './header'; 2 | -------------------------------------------------------------------------------- /examples/radium/src/components/tweet/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './tweet'; 2 | -------------------------------------------------------------------------------- /examples/aphrodite/src/components/content/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './content'; 2 | -------------------------------------------------------------------------------- /examples/aphrodite/src/components/footer/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './footer'; 2 | -------------------------------------------------------------------------------- /examples/aphrodite/src/components/header/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './header'; 2 | -------------------------------------------------------------------------------- /examples/css-modules/src/components/content/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './content'; 2 | -------------------------------------------------------------------------------- /examples/css-modules/src/components/footer/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './footer'; 2 | -------------------------------------------------------------------------------- /examples/css-modules/src/components/header/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './header'; 2 | -------------------------------------------------------------------------------- /examples/css-modules/src/components/tweet/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './tweet'; 2 | -------------------------------------------------------------------------------- /examples/styled-components/src/components/app/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './app'; 2 | -------------------------------------------------------------------------------- /examples/css-modules/src/components/tweet/tweet.css: -------------------------------------------------------------------------------- 1 | .container { 2 | padding: 0 .6rem; 3 | } 4 | -------------------------------------------------------------------------------- /examples/jss/src/components/global-styles/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './global-styles'; 2 | -------------------------------------------------------------------------------- /examples/styled-components/src/components/footer/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './footer'; 2 | -------------------------------------------------------------------------------- /examples/styled-components/src/components/header/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './header'; 2 | -------------------------------------------------------------------------------- /examples/styled-components/src/components/tweet/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './tweet'; 2 | -------------------------------------------------------------------------------- /site/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/styled-components/comparison/HEAD/site/favicon.ico -------------------------------------------------------------------------------- /examples/styled-components/src/components/content/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './content'; 2 | -------------------------------------------------------------------------------- /site/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /examples/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "react"], 3 | "plugins": ["transform-class-properties"] 4 | } 5 | -------------------------------------------------------------------------------- /examples/shared/assets/more.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /examples/css-modules/src/styles/colors.css: -------------------------------------------------------------------------------- 1 | @value accent: #1da1f2; 2 | @value animation: #e81c4f; 3 | @value border: #e1e8ed; 4 | @value primary: #292f33; 5 | @value secondary: #8899a6; 6 | -------------------------------------------------------------------------------- /examples/css/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from 'react-dom'; 3 | 4 | import App from './components/app'; 5 | 6 | render(, document.getElementById('example-root')); 7 | -------------------------------------------------------------------------------- /examples/aphrodite/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from 'react-dom'; 3 | 4 | import App from './components/app'; 5 | 6 | render(, document.getElementById('example-root')); 7 | -------------------------------------------------------------------------------- /examples/css-modules/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from 'react-dom'; 3 | 4 | import App from './components/app'; 5 | 6 | render(, document.getElementById('example-root')); 7 | -------------------------------------------------------------------------------- /examples/styled-components/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from 'react-dom'; 3 | 4 | import App from './components/app'; 5 | 6 | render(, document.getElementById('example-root')); 7 | -------------------------------------------------------------------------------- /examples/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "extends": "airbnb", 4 | "rules": { 5 | "react/prop-types": 0 6 | }, 7 | "env": { 8 | "browser": true, 9 | "mocha": true 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /site/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import './index.css'; 5 | 6 | ReactDOM.render( 7 | , 8 | document.getElementById('root') 9 | ); 10 | -------------------------------------------------------------------------------- /examples/jss/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from 'react-dom'; 3 | 4 | import GlobalStyles from './components/global-styles'; 5 | import App from './components/app'; 6 | 7 | render(, document.getElementById('example-root')); 8 | -------------------------------------------------------------------------------- /examples/shared/assets/like.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /examples/radium/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from 'react-dom'; 3 | import { StyleRoot } from 'radium'; 4 | 5 | import App from './components/app'; 6 | 7 | render( 8 | 9 | 10 | , 11 | document.getElementById('example-root') 12 | ); 13 | -------------------------------------------------------------------------------- /examples/css/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "start": "../node_modules/.bin/webpack-dev-server --config webpack.custom.babel.js" 8 | }, 9 | "author": "Max Stoiber", 10 | "license": "MIT" 11 | } 12 | -------------------------------------------------------------------------------- /examples/css/webpack.custom.babel.js: -------------------------------------------------------------------------------- 1 | import { extendBaseConfig } from '../webpack.base.babel'; 2 | 3 | export default extendBaseConfig({ 4 | module: { 5 | loaders: [ 6 | { 7 | test: /\.css$/, 8 | exclude: /node_modules/, 9 | loader: 'style!css', 10 | }, 11 | ], 12 | }, 13 | }); 14 | -------------------------------------------------------------------------------- /examples/aphrodite/webpack.custom.babel.js: -------------------------------------------------------------------------------- 1 | import { extendBaseConfig } from '../webpack.base.babel'; 2 | 3 | export default extendBaseConfig({ 4 | module: { 5 | loaders: [ 6 | { 7 | test: /\.css$/, 8 | exclude: /node_modules/, 9 | loader: 'style!css', 10 | }, 11 | ], 12 | }, 13 | }); 14 | -------------------------------------------------------------------------------- /examples/shared/assets/reply.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /examples/css/src/components/app/app.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Tweet from '../tweet'; 4 | import data from '../../../../shared/data/755481795206971392.json'; 5 | 6 | import 'normalize.css'; 7 | import '../../styles/main.css'; 8 | 9 | const App = () => ( 10 |
11 | 12 |
13 | ); 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /examples/css-modules/src/components/app/app.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Tweet from '../tweet'; 4 | import data from '../../../../shared/data/755481795206971392.json'; 5 | 6 | import 'normalize.css'; 7 | import styles from './app.css'; 8 | 9 | const App = () => ( 10 |
11 | 12 |
13 | ); 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /site/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "site", 3 | "version": "0.0.1", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.1.0" 7 | }, 8 | "dependencies": { 9 | "react": "^15.2.1", 10 | "react-dom": "^15.2.1" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "eject": "react-scripts eject" 16 | } 17 | } -------------------------------------------------------------------------------- /examples/styled-components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "styled-components-example", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "start": "../node_modules/.bin/webpack-dev-server --config ../webpack.base.babel.js --content-base build" 8 | }, 9 | "author": "Max Stoiber", 10 | "license": "MIT", 11 | "dependencies": { 12 | "styled-components": "^0.2.5" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /site/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /examples/css-modules/webpack.custom.babel.js: -------------------------------------------------------------------------------- 1 | import autoprefixer from 'autoprefixer'; 2 | import values from 'postcss-modules-values'; 3 | import { extendBaseConfig } from '../webpack.base.babel'; 4 | 5 | export default extendBaseConfig({ 6 | module: { 7 | loaders: [ 8 | { 9 | test: /\.css$/, 10 | exclude: /node_modules/, 11 | loader: 'style!css?modules!postcss', 12 | }, 13 | ], 14 | }, 15 | postcss: () => [autoprefixer, values], 16 | }); 17 | -------------------------------------------------------------------------------- /examples/jss/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jss-example", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "start": "../node_modules/.bin/webpack-dev-server --config ../webpack.base.babel.js --content-base build" 8 | }, 9 | "author": "Max Stoiber", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "css-loader": "0.25.0", 13 | "react-jss": "4.0.3", 14 | "style-loader": "0.13.1" 15 | }, 16 | "dependencies": {} 17 | } 18 | -------------------------------------------------------------------------------- /examples/radium/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "radium-example", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "start": "../node_modules/.bin/webpack-dev-server --config ../webpack.base.babel.js --content-base build" 8 | }, 9 | "author": "Max Stoiber", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "style-loader": "0.13.1", 13 | "css-loader": "0.25.0" 14 | }, 15 | "dependencies": { 16 | "radium": "0.18.1" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/aphrodite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aphrodite-example", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "start": "../node_modules/.bin/webpack-dev-server --config webpack.custom.babel.js --content-base build" 8 | }, 9 | "author": "Max Stoiber", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "style-loader": "0.13.1", 13 | "css-loader": "0.25.0" 14 | }, 15 | "dependencies": { 16 | "aphrodite": "0.5.0" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/aphrodite/src/global.css: -------------------------------------------------------------------------------- 1 | html { 2 | color: #292f33; 3 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 4 | font-size: 14px; 5 | line-height: 1.3125; 6 | } 7 | 8 | a { 9 | text-decoration: none; 10 | color: #1da1f2; 11 | } 12 | 13 | svg { 14 | fill: currentColor; 15 | height: 1.25em; 16 | } 17 | 18 | @media screen and (min-width: 360px) { 19 | html { 20 | font-size: 15px; 21 | } 22 | } 23 | 24 | @media screen and (min-width: 600px) { 25 | html { 26 | font-size: 16px; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /examples/css/src/components/content/content.js: -------------------------------------------------------------------------------- 1 | import React, { PropTypes } from 'react'; 2 | 3 | const Content = ({ text, media }) => ( 4 |
5 |

6 | 7 | 8 | 9 |

10 | ); 11 | 12 | Content.propTypes = { 13 | media: PropTypes.object, 14 | text: PropTypes.string, 15 | }; 16 | 17 | export default Content; 18 | -------------------------------------------------------------------------------- /examples/shared/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Max Stoiber on Twitter: "👏 Love love love this article by @chantastic. CSS-in-JS isn’t a campaign against CSS! https://t.co/P3QdkX88rs https://t.co/vV3dJ4fens" 6 | 7 | 8 |
9 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /site/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import logo from './logo.svg'; 3 | import './App.css'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
9 |
10 | logo 11 |

Welcome to React

12 |
13 |

14 | To get started, edit src/App.js and save to reload. 15 |

16 |
17 | ); 18 | } 19 | } 20 | 21 | export default App; 22 | -------------------------------------------------------------------------------- /examples/css-modules/src/components/content/content.css: -------------------------------------------------------------------------------- 1 | @value accent, border from '../../styles/colors.css'; 2 | 3 | .text { 4 | font-size: 1.25rem; 5 | font-weight: 300; 6 | line-height: 1.5em; 7 | margin: 0; 8 | padding: .65625rem 0 .98438rem; 9 | } 10 | 11 | .text a { 12 | color: accent; 13 | } 14 | 15 | .text a:hover { 16 | text-decoration: underline; 17 | } 18 | 19 | .media { 20 | border-radius: .35rem; 21 | border: 1px solid border; 22 | display: block; 23 | margin: .65625rem 0 1.3125rem; 24 | } 25 | 26 | .image { 27 | display: block; 28 | max-width: 100%; 29 | } 30 | -------------------------------------------------------------------------------- /examples/css-modules/src/components/content/content.js: -------------------------------------------------------------------------------- 1 | import React, { PropTypes } from 'react'; 2 | 3 | import styles from './content.css'; 4 | 5 | const Content = ({ text, media }) => ( 6 |
7 |

8 | 9 | 10 | 11 |

12 | ); 13 | 14 | Content.propTypes = { 15 | media: PropTypes.object, 16 | text: PropTypes.string, 17 | }; 18 | 19 | export default Content; 20 | -------------------------------------------------------------------------------- /examples/shared/assets/retweet.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /examples/README.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ### Running an example locally 4 | 5 | - Run `npm install` in this folder (only have to ever do that once) 6 | - Run `npm install` in the folder of the example you want to run 7 | - Run `npm start` in the example folder 8 | 9 | ### Quick links 10 | 11 | Here are quick links to all the existing examples: 12 | 13 | - [Vanilla CSS](./css) 14 | - [Aphrodite](./aphrodite) 15 | - [CSS Modules](./css-modules) 16 | - [JSS](./jss) 17 | - [Radium](./radium) 18 | - [`styled-components`](./styled-components) 19 | 20 | The shared code is inside the `shared/` folder – feel free to check it out too, though it's not very interesting. 21 | -------------------------------------------------------------------------------- /examples/css-modules/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-modules", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "start": "../node_modules/.bin/webpack-dev-server --config webpack.custom.babel.js --content-base build" 8 | }, 9 | "author": "Michele Bertoli", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "autoprefixer": "6.3.7", 13 | "css-loader": "webpack/css-loader#9d2941b2aa8fe7d49338cab459ff678d16cdc5b6", 14 | "postcss-loader": "0.9.1", 15 | "postcss-modules-values": "^1.1.3", 16 | "style-loader": "0.13.1" 17 | }, 18 | "dependencies": { 19 | "normalize.css": "4.2.0" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/jss/src/components/app/app.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import injectSheet from 'react-jss'; 3 | 4 | import Tweet from '../tweet'; 5 | import data from '../../../../shared/data/755481795206971392.json'; 6 | 7 | const styles = { 8 | container: { 9 | margin: '0 auto', 10 | width: '100%', 11 | '@media screen and (min-width: 360px)': { 12 | maxWidth: '400px', 13 | }, 14 | '@media screen and (min-width: 600px)': { 15 | maxWidth: '600px', 16 | }, 17 | }, 18 | }; 19 | 20 | const App = ({ sheet: { classes } }) => ( 21 |
22 | 23 |
24 | ); 25 | 26 | export default injectSheet(styles)(App); 27 | -------------------------------------------------------------------------------- /site/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | React App 7 | 8 | 9 |
10 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Thanks for wanting to contribute! We're currently trying to figure most things out before starting the real work, so follow the Issues and let us know if you want a framework to be included! 4 | 5 | ## Publishing the site 6 | 7 | The site is in the `site` folder. It is deployed via Github Pages, and new changes can be deployed with PRs. 8 | 9 | ### Deployment 10 | 11 | 1. Run `npm run build` in the `site` directory 12 | 2. `git checkout -B gh-pages` 13 | 2. `git add -f build` 14 | 3. `git commit -m "Rebuild website"` 15 | 4. `git push origin :gh-pages` 16 | 5. Go back to the root directory and run `git subtree push --prefix site/build origin gh-pages` 17 | 6. Run `git checkout -` 18 | 19 | Done! 20 | -------------------------------------------------------------------------------- /examples/shared/utils/text/text.js: -------------------------------------------------------------------------------- 1 | export const transform = data => { 2 | let text = data.text; 3 | 4 | data.entities.user_mentions.forEach(userMention => { 5 | text = text.replace( 6 | `@${userMention.screen_name}`, 7 | `@${userMention.screen_name}` 8 | ); 9 | }); 10 | 11 | data.entities.urls.forEach(url => { 12 | text = text.replace( 13 | url.url, 14 | `${url.display_url}` 15 | ); 16 | }); 17 | 18 | data.entities.media.forEach(media => { 19 | text = text.replace( 20 | media.url, 21 | '' 22 | ); 23 | }); 24 | 25 | return text.trim(); 26 | }; 27 | -------------------------------------------------------------------------------- /examples/aphrodite/src/components/app/app.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, css } from 'aphrodite'; 3 | 4 | import Tweet from '../tweet'; 5 | import data from '../../../../shared/data/755481795206971392.json'; 6 | 7 | import 'normalize.css'; 8 | import '../../global.css'; 9 | 10 | const styles = StyleSheet.create({ 11 | container: { 12 | margin: '0 auto', 13 | width: '100%', 14 | '@media screen and (min-width: 360px)': { 15 | maxWidth: '400px', 16 | }, 17 | '@media screen and (min-width: 600px)': { 18 | maxWidth: '600px', 19 | }, 20 | }, 21 | }); 22 | 23 | const App = () => ( 24 |
25 | 26 |
27 | ); 28 | 29 | export default App; 30 | -------------------------------------------------------------------------------- /examples/css-modules/src/components/app/app.css: -------------------------------------------------------------------------------- 1 | @value primary from '../../styles/colors.css'; 2 | 3 | html { 4 | color: primary; 5 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 6 | font-size: 14px; 7 | line-height: 1.3125; 8 | } 9 | 10 | a { 11 | text-decoration: none; 12 | } 13 | 14 | svg { 15 | fill: currentColor; 16 | height: 1.25em; 17 | } 18 | 19 | .container { 20 | margin: 0 auto; 21 | width: 100%; 22 | } 23 | 24 | @media screen and (min-width: 360px) { 25 | html { 26 | font-size: 15px; 27 | } 28 | 29 | .container { 30 | max-width: 400px; 31 | } 32 | } 33 | 34 | @media screen and (min-width: 600px) { 35 | html { 36 | font-size: 16px; 37 | } 38 | 39 | .container { 40 | max-width: 600px; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /examples/css-modules/src/components/header/header.css: -------------------------------------------------------------------------------- 1 | @value primary, secondary from '../../styles/colors.css'; 2 | 3 | .header { 4 | display: flex; 5 | padding: 1rem 0 .65625rem; 6 | } 7 | 8 | .profile { 9 | flex: 1 0 0; 10 | margin: 0 .3rem; 11 | } 12 | 13 | .image { 14 | border-radius: .35rem; 15 | display: block; 16 | width: 100%; 17 | } 18 | 19 | .user { 20 | flex: 7 0 0; 21 | margin: 0 .3rem; 22 | } 23 | 24 | .url { 25 | display: inline-block; 26 | margin-top: -.15rem; 27 | } 28 | 29 | .url:hover .name { 30 | text-decoration: underline; 31 | } 32 | 33 | .name { 34 | color: primary; 35 | font-weight: 700; 36 | } 37 | 38 | .screenName { 39 | color: secondary; 40 | } 41 | 42 | .screenName:before { 43 | content: '\a'; 44 | white-space: pre; 45 | } 46 | -------------------------------------------------------------------------------- /examples/jss/src/components/global-styles/global-styles.js: -------------------------------------------------------------------------------- 1 | import injectSheet from 'react-jss'; 2 | import 'normalize.css'; 3 | 4 | // Global styles 5 | const styles = { 6 | html: { 7 | color: '#292f33', 8 | fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif', 9 | fontSize: 14, 10 | lineHeight: '1.3125', 11 | }, 12 | a: { 13 | textDecoration: 'none', 14 | color: '#1da1f2', 15 | }, 16 | svg: { 17 | fill: 'currentColor', 18 | height: '1.25em', 19 | }, 20 | '@media screen and (min-width: 360px)': { 21 | html: { 22 | fontSize: 15, 23 | }, 24 | }, 25 | '@media screen and (min-width: 600px)': { 26 | html: { 27 | fontSize: 16, 28 | }, 29 | }, 30 | }; 31 | 32 | export default injectSheet(styles, { named: false })(); 33 | -------------------------------------------------------------------------------- /examples/css/src/components/header/header.js: -------------------------------------------------------------------------------- 1 | import React, { PropTypes } from 'react'; 2 | 3 | const Header = ({ name, profileImageUrl, screenName, url }) => ( 4 |
5 |
6 | 7 | {name} 8 | 9 |
10 | 16 |
17 | ); 18 | 19 | Header.propTypes = { 20 | name: PropTypes.string, 21 | profileImageUrl: PropTypes.string, 22 | screenName: PropTypes.string, 23 | url: PropTypes.string, 24 | }; 25 | 26 | export default Header; 27 | -------------------------------------------------------------------------------- /examples/css/src/components/tweet/tweet.js: -------------------------------------------------------------------------------- 1 | import React, { PropTypes } from 'react'; 2 | 3 | import Header from '../header'; 4 | import Content from '../content'; 5 | import Footer from '../footer'; 6 | import { transform } from '../../../../shared/utils/text'; 7 | 8 | const Tweet = ({ data }) => ( 9 |
10 |
16 | 20 |
25 |
26 | ); 27 | 28 | Tweet.propTypes = { 29 | data: PropTypes.object, 30 | }; 31 | 32 | export default Tweet; 33 | -------------------------------------------------------------------------------- /examples/css-modules/src/components/header/header.js: -------------------------------------------------------------------------------- 1 | import React, { PropTypes } from 'react'; 2 | 3 | import styles from './header.css'; 4 | 5 | const Header = ({ name, profileImageUrl, screenName, url }) => ( 6 |
7 |
8 | 9 | {name} 10 | 11 |
12 | 18 |
19 | ); 20 | 21 | Header.propTypes = { 22 | name: PropTypes.string, 23 | profileImageUrl: PropTypes.string, 24 | screenName: PropTypes.string, 25 | url: PropTypes.string, 26 | }; 27 | 28 | export default Header; 29 | -------------------------------------------------------------------------------- /examples/css-modules/src/components/tweet/tweet.js: -------------------------------------------------------------------------------- 1 | import React, { PropTypes } from 'react'; 2 | 3 | import Header from '../header'; 4 | import Content from '../content'; 5 | import Footer from '../footer'; 6 | import { transform } from '../../../../shared/utils/text'; 7 | 8 | import styles from './tweet.css'; 9 | 10 | const Tweet = ({ data }) => ( 11 |
12 |
18 | 22 |
27 |
28 | ); 29 | 30 | Tweet.propTypes = { 31 | data: PropTypes.object, 32 | }; 33 | 34 | export default Tweet; 35 | -------------------------------------------------------------------------------- /examples/styled-components/src/components/tweet/tweet.js: -------------------------------------------------------------------------------- 1 | import React, { PropTypes } from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | import Header from '../header'; 5 | import Content from '../content'; 6 | import Footer from '../footer'; 7 | import { transform } from '../../../../shared/utils/text'; 8 | 9 | const Wrapper = styled.div` 10 | padding: 0 .6rem; 11 | `; 12 | 13 | const Tweet = ({ data }) => ( 14 | 15 |
21 | 25 |