{"id":14990551,"url":"https://github.com/joeshub/css-in-react","last_synced_at":"2025-07-24T11:05:56.973Z","repository":{"id":148496950,"uuid":"72959256","full_name":"joeshub/css-in-react","owner":"joeshub","description":"🍭 CSS in React - Learn the best CSS in JS frameworks by example","archived":false,"fork":false,"pushed_at":"2018-03-20T22:13:29.000Z","size":8204,"stargazers_count":104,"open_issues_count":1,"forks_count":13,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-12T02:24:27.662Z","etag":null,"topics":["aphrodite","css","css-in-js","css-in-react","css-modules","cssinjs","decss","emotion","glamor","glamorous","jss","postcss","radium","react","react-css-modules","stylable","styled-components","styletron"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/joeshub.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-11-05T23:31:39.000Z","updated_at":"2025-02-13T01:47:42.000Z","dependencies_parsed_at":"2023-05-20T08:15:16.694Z","dependency_job_id":null,"html_url":"https://github.com/joeshub/css-in-react","commit_stats":{"total_commits":196,"total_committers":4,"mean_commits":49.0,"dds":"0.18877551020408168","last_synced_commit":"a13677c3fc9d86cbb3fe97f640f4abe3e0660523"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joeshub%2Fcss-in-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joeshub%2Fcss-in-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joeshub%2Fcss-in-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joeshub%2Fcss-in-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joeshub","download_url":"https://codeload.github.com/joeshub/css-in-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248506272,"owners_count":21115408,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aphrodite","css","css-in-js","css-in-react","css-modules","cssinjs","decss","emotion","glamor","glamorous","jss","postcss","radium","react","react-css-modules","stylable","styled-components","styletron"],"created_at":"2024-09-24T14:20:20.866Z","updated_at":"2025-04-12T02:24:35.027Z","avatar_url":"https://github.com/joeshub.png","language":"JavaScript","readme":"# 🍭 CSS in React\nLearn the best frameworks by example\n\n## Cheat Sheet\n\u003cimg src=\"https://raw.githubusercontent.com/joeshub/css-in-react-content/master/CSS-in-React-Frameworks-CheatSheet.png\" alt=\"CSS in React Cheat Sheet\" align=\"center\" /\u003e\n\n## Requirements\n* [node](https://nodejs.org/en/download/releases/) - version 6\n* [yarn](https://yarnpkg.com) or npm\n\n## Usage\n1. Fork and clone this repo\n2. ``yarn install``\n6. ``yarn start``\n7. Open [http://0.0.0.0:3333](http://0.0.0.0:3333)\n\n## Sections\n01. [React](https://github.com/facebook/react) with [CSS loader](https://github.com/webpack-contrib/css-loader)\n02. [React](https://github.com/facebook/react) using inline styles\n03. [Radium](https://github.com/FormidableLabs/radium)\n04. [Aphrodite](https://github.com/Khan/aphrodite)\n05. [React-css-modules](https://github.com/gajus/react-css-modules) with [PostCSS](https://github.com/postcss/postcss)\n06. [Styletron](https://github.com/rtsao/styletron)\n07. [Styled Components](https://github.com/styled-components/styled-components)\n08. [Emotion](https://github.com/emotion-js/emotion)\n09. [Stylable](https://github.com/wix/stylable)\n10. [Glamor](https://github.com/threepointone/glamor)\n11. [React JSS](https://github.com/cssinjs/react-jss)\n12. [Glamorous](https://github.com/paypal/glamorous)\n13. [DeCSS](https://github.com/kossnocorp/decss)\n\n## How this project is organized\n\n### Buttons\n- Each folder contains a button example for learning the basics of that framework and to show what features it supports.\n\n### Workshops\n- Some folders folder also contains a workshop with challenges explained in the README\n- Currently there are workshops for:\n  - Radium\n  - React CSS Modules with PostCSS\n  - Styled Components\n\n### Solutions\n- Workshops have a separate solutions complete with code and implementation steps in the README\n\n### Workshop Slides\n- To get started check out the [slides for this workshop](http://seifi.org/css/sxsw-slides-css-in-react-the-good-the-bad-and-the-ugly.html) which was given at SXSW 2017\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoeshub%2Fcss-in-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoeshub%2Fcss-in-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoeshub%2Fcss-in-react/lists"}