{"id":22542784,"url":"https://github.com/devonchurch/fish-pie","last_synced_at":"2026-02-27T03:01:43.546Z","repository":{"id":97157519,"uuid":"177221683","full_name":"devonChurch/fish-pie","owner":"devonChurch","description":"Styled Components Cliffs Notes","archived":false,"fork":false,"pushed_at":"2019-04-04T00:52:46.000Z","size":18,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-28T07:44:06.221Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devonChurch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2019-03-22T23:30:55.000Z","updated_at":"2019-04-04T00:52:47.000Z","dependencies_parsed_at":null,"dependency_job_id":"24a9bfb4-0e19-4e6e-93c0-f93aaa65744c","html_url":"https://github.com/devonChurch/fish-pie","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/devonChurch/fish-pie","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devonChurch%2Ffish-pie","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devonChurch%2Ffish-pie/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devonChurch%2Ffish-pie/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devonChurch%2Ffish-pie/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devonChurch","download_url":"https://codeload.github.com/devonChurch/fish-pie/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devonChurch%2Ffish-pie/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29883111,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-26T23:51:21.483Z","status":"online","status_checked_at":"2026-02-27T02:00:06.759Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-12-07T13:12:41.130Z","updated_at":"2026-02-27T03:01:43.531Z","avatar_url":"https://github.com/devonChurch.png","language":null,"readme":"# [Styled Components](https://www.styled-components.com/) _(Cliffs Notes)_\n\n## CSS in Javascript 😱\n\n### Why 🤔\n\n- ✅ **React Compositions**\n- ✅ **Style Encapsulation**\n- ✅ **Dynamic Styles**\n\n### Support 👍\n\n- ✔ [Vendor prefixing](https://www.styled-components.com/docs/basics)\n- ✔ [Typescript Suport](https://www.styled-components.com/docs/api#typescript)\n- ✔ [Jest Integration](https://www.styled-components.com/docs/tooling#jest-integration)\n- ✔ [Enzyme Hooks](https://www.styled-components.com/docs/api#enzymefind)\n- ✔ [Linting Support _(Style Lint)_](https://www.styled-components.com/docs/tooling#stylelint)\n\n[🔽 Next](https://github.com/devonChurch/fish-pie#agenda-)\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n## Agenda 🗒\n\n- 🕐 [Composition](https://github.com/devonChurch/fish-pie#composition-)\n- 🕑 [Styles](https://github.com/devonChurch/fish-pie#styles-)\n- 🕒 [Inheritance](https://github.com/devonChurch/fish-pie#inheritance-)\n- 🕓 [Dynamic](https://github.com/devonChurch/fish-pie#dynamic-)\n- 🕔 [Tagged Templates](https://github.com/devonChurch/fish-pie#tagged-templates-)\n- 🕕 [Polymorphism](https://github.com/devonChurch/fish-pie#polymorphism-)\n- 🕖 [Pseudo Elements](https://github.com/devonChurch/fish-pie#pseudo-elements-)\n- 🕗 [Theming](https://github.com/devonChurch/fish-pie#theming-)\n- 🕘 [Polished](https://github.com/devonChurch/fish-pie#polished-)\n\n[🔽 Next](https://github.com/devonChurch/fish-pie#composition-)\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n## Composition 🏗\n\n_Lets make a button..._\n\n### React ⚛\n\n##### Input ✏\n\n```javascript\nconst Button = styled.button``;\n\nReactDOM.render(\u003cButton\u003eHello World\u003c/Button\u003e, document.getElementById(\"app\"));\n```\n\n##### Output 💎\n\n![1](https://user-images.githubusercontent.com/15273233/54859129-723f4080-4d6e-11e9-95ab-99c12720a98e.png)\n\n[🔽 Next](https://github.com/devonChurch/fish-pie/blob/master/README.md#dom-injection-)\n\n.\n\n.\n\n.\n\n### DOM Injection 💾\n\n##### Output 💎\n\n![dom-output](https://user-images.githubusercontent.com/15273233/55283414-24a28380-53bf-11e9-81db-d50b89afdbcc.png)\n\n[🔽 Next](https://github.com/devonChurch/fish-pie/blob/master/README.md#its-just-css-)\n\n.\n\n.\n\n.\n\n### It's just CSS 😵\n\n##### Output 💎\n\n![change-inspector](https://user-images.githubusercontent.com/15273233/55283345-a8f40700-53bd-11e9-9baa-ebe0e9fee485.gif)\n\n[🔽 Next](https://github.com/devonChurch/fish-pie#styles-)\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n## Styles 💄\n\n_Lets add some styles..._\n\n### Traditional 💡\n\n##### Input ✏\n\n```javascript\nconst Button = styled.button`\n  // Reset.\n  background: transparent;\n  border: 0;\n  padding: 0;\n\n  // Custom.\n  background: blue;\n  border-radius: 0.2rem;\n  color: white;\n  padding: 0.5rem 1rem;\n  font-size: 1rem;\n`;\n\nconst MyApp = () =\u003e \u003cButton\u003eHello World\u003c/Button\u003e;\n```\n\n##### Output 💎\n\n![2](https://user-images.githubusercontent.com/15273233/54859430-fb0bab80-4d71-11e9-9cf8-1123fed27aea.png)\n\n[🔽 Next](https://github.com/devonChurch/fish-pie/blob/master/README.md#shortcut-)\n\n.\n\n.\n\n.\n\n### Shortcut 🔦\n\n##### Input ✏\n\n```javascript\nconst MyApp = () =\u003e (\n  \u003cbutton css={`\n    // Reset.\n    background: transparent;\n    border: 0;\n    padding: 0;\n\n    // Custom.\n    background: blue;\n    border-radius: 0.2rem;\n    color: white;\n    padding: 0.5rem 1rem;\n    font-size: 1rem;\n  `}\u003eHello World\u003c/button\u003e\n);\n```\n\n##### Output 💎\n\n![2](https://user-images.githubusercontent.com/15273233/54859430-fb0bab80-4d71-11e9-9cf8-1123fed27aea.png)\n\n[🔽 Next](https://github.com/devonChurch/fish-pie#inheritance-)\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n## Inheritance ⚡\n\n_Lets focus on structure..._\n\n### Linear Structure 👾\n\n##### Input ✏\n\n```javascript\nconst ButtonReset = styled.button`\n  background: transparent;\n  border: 0;\n  padding: 0;\n`;\n\nconst ButtonLarge = styled(ButtonReset)`\n  background: blue;\n  border-radius: 0.2rem;\n  color: white;\n  padding: 0.5rem 1rem;\n  font-size: 1rem;\n`;\n\nconst ButtonSmall = styled(ButtonLarge)`\n  padding: 0.25rem 0.5rem;\n  font-size: 0.75rem;\n`;\n\nconst MyApp = () =\u003e (\n  \u003c\u003e\n    \u003cButtonLarge\u003eLarge Button\u003c/ButtonLarge\u003e\n    \u003cButtonSmall\u003eSmall Button\u003c/ButtonSmall\u003e\n  \u003c/\u003e\n);\n```\n\n##### Output 💎\n\n![3](https://user-images.githubusercontent.com/15273233/54859518-f7c4ef80-4d72-11e9-91a4-3cbe52c111f1.png)\n\n[🔽 Next](https://github.com/devonChurch/fish-pie#snippet-structure-)\n\n.\n\n.\n\n.\n\n### Snippet Structure 😺\n\n##### Input ✏\n\n```javascript\nconst ButtonReset = css`\n  background: transparent;\n  border: 0;\n  padding: 0;\n`;\n\nconst ButtonLarge = styled.button`\n  ${ButtonReset}\n  background: blue;\n  border-radius: 0.2rem;\n  color: white;\n  padding: 0.5rem 1rem;\n  font-size: 1rem;\n`;\n\nconst ButtonSmall = styled(ButtonLarge)`\n  padding: 0.25rem 0.5rem;\n  font-size: 0.75rem;\n`;\n\nconst MyApp = () =\u003e (\n  \u003c\u003e\n    \u003cButtonLarge\u003eLarge Button\u003c/ButtonLarge\u003e\n    \u003cButtonSmall\u003eSmall Button\u003c/ButtonSmall\u003e\n  \u003c/\u003e\n);\n```\n\n##### Output 💎\n\n![3](https://user-images.githubusercontent.com/15273233/54859518-f7c4ef80-4d72-11e9-91a4-3cbe52c111f1.png)\n\n[🔽 Next](https://github.com/devonChurch/fish-pie#global-structure-)\n\n.\n\n.\n\n.\n\n### Global Structure 🌎\n\n##### Input ✏\n\n```javascript\nconst GlobalStyle = createGlobalStyle`\n  button {\n    background: transparent;\n    border: 0;\n    padding: 0;\n  }\n`;\n\nconst ButtonLarge = styled.button`\n  background: blue;\n  border-radius: 0.2rem;\n  color: white;\n  padding: 0.5rem 1rem;\n  font-size: 1rem;\n`;\n\nconst ButtonSmall = styled(ButtonLarge)`\n  padding: 0.25rem 0.5rem;\n  font-size: 0.75rem;\n`;\n\nconst MyApp = () =\u003e (\n  \u003c\u003e\n    \u003cGlobalStyle /\u003e\n    \u003cButtonLarge\u003eLarge Button\u003c/ButtonLarge\u003e\n    \u003cButtonSmall\u003eSmall Button\u003c/ButtonSmall\u003e\n  \u003c/\u003e\n);\n```\n\n##### Output 💎\n\n![3](https://user-images.githubusercontent.com/15273233/54859518-f7c4ef80-4d72-11e9-91a4-3cbe52c111f1.png)\n\n[🔽 Next](https://github.com/devonChurch/fish-pie#dynamic-)\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n## Dynamic 🎈\n\n_Adapting to component props..._\n\n### Single Styles 👁\n\n##### Input ✏\n\n```javascript\nconst Button = styled.button`\n  background: blue;\n  border-radius: 0.2rem;\n  color: white;\n  padding: ${({ isSmall }) =\u003e (isSmall ? \"0.25rem 0.5rem\" : \"0.5rem 1rem\")};\n  font-size: ${({ isSmall }) =\u003e (isSmall ? \"0.75rem\" : \"1rem\")};\n`;\n\nconst MyApp = () =\u003e (\n  \u003c\u003e\n    \u003cButton\u003eLarge Button\u003c/Button\u003e\n    \u003cButton isSmall\u003eSmall Button\u003c/Button\u003e\n  \u003c/\u003e\n);\n```\n\n##### Output 💎\n\n![3](https://user-images.githubusercontent.com/15273233/54859518-f7c4ef80-4d72-11e9-91a4-3cbe52c111f1.png)\n\n[🔽 Next](https://github.com/devonChurch/fish-pie#abstract-logic-)\n\n.\n\n.\n\n.\n\n### Abstract Logic 👠\n\n##### Input ✏\n\n```javascript\nconst Button = styled.button.attrs(({ isSmall }) =\u003e ({\n  padding: isSmall ? \"0.25rem 0.5rem\" : \"0.5rem 1rem\",\n  fontSize: isSmall ? \"0.75rem\" : \"1rem\"\n}))`\n  ${ButtonReset}\n  background: blue;\n  border-radius: 0.2rem;\n  color: white;\n  padding: ${({ padding }) =\u003e padding};\n  font-size: ${({ fontSize }) =\u003e fontSize};\n`;\n\nconst MyApp = () =\u003e (\n  \u003c\u003e\n    \u003cButton\u003eLarge Button\u003c/Button\u003e\n    \u003cButton isSmall\u003eSmall Button\u003c/Button\u003e\n  \u003c/\u003e\n);\n```\n\n##### Output 💎\n\n![3](https://user-images.githubusercontent.com/15273233/54859518-f7c4ef80-4d72-11e9-91a4-3cbe52c111f1.png)\n\n[🔽 Next](https://github.com/devonChurch/fish-pie#style-blocks-)\n\n.\n\n.\n\n.\n\n### Style Blocks 💥\n\n##### Input ✏\n\n```javascript\nconst colors = {\n  success: \"green\",\n  error: \"red\",\n  disabled: \"gray\"\n};\n\nconst Button = styled.button`\n  background: ${({ type }) =\u003e colors[type] || \"blue\"};\n  border-radius: 0.2rem;\n  color: white;\n  padding: 0.5rem 1rem;\n  font-size: 1rem;\n\n  ${({ type }) =\u003e\n    type === \"disabled\" \u0026\u0026\n    css`\n      color: black;\n      cursor: not-allowed;\n      opacity: 0.5;\n    `}\n`;\n\nconst MyApp = () =\u003e (\n  \u003c\u003e\n    \u003cButton\u003eStandard Button\u003c/Button\u003e\n    \u003cButton type=\"error\"\u003eError Button\u003c/Button\u003e\n    \u003cButton type=\"disabled\"\u003eDisabled Button\u003c/Button\u003e\n  \u003c/\u003e\n);\n```\n\n##### Output 💎\n\n![4](https://user-images.githubusercontent.com/15273233/54860001-cb13d680-4d78-11e9-89fa-4b76fc3089a2.png)\n\n[🔽 Next](https://github.com/devonChurch/fish-pie#tagged-templates-)\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n## Tagged Templates 💍\n\n_[What are they](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates) and [how do they work](https://mxstbr.blog/2016/11/styled-components-magic-explained/)..._\n\n##### Input ✏\n\n```javascript\nconst myFnc = (\n  strings, // [\"↵  padding: \", \";↵  color: \", \";↵\"]\n  ...values // [\"10px\", \"red\"]\n) =\u003e\n  (\n    strings[0] +\n    values[0] + // \"Padding\" reference.\n    strings[1] +\n    values[1] + // \"Color\" reference (plus \"Paddings\" trailing semicolon).\n    strings[2]\n  ) // \"Colors\" trailing semicolon\n    .trim() // Remove white space.\n    .replace(/\\t/gm, \"\"); // Remove tabs.\n\n// Create a fictitious style declaration.\nmyFnc`\n  padding: ${\"10px\"};\n  color: ${\"red\"};\n`;\n```\n\n##### Output 💎\n\n```css\npadding: 10px;\ncolor: red;\n```\n\n[🔽 Next](https://github.com/devonChurch/fish-pie#polymorphism-)\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n## Polymorphism 🐘\n\n_Change the root native element type..._\n\n##### Input ✏\n\n```javascript\nconst Button = styled.button`\n  ${ButtonReset}\n  background: blue;\n  border-radius: 0.2rem;\n  color: white;\n  padding: 0.5rem 1rem;\n  font-size: 1rem;\n\n  ${({ as }) =\u003e\n    as === \"a\" \u0026\u0026\n    css`\n      cursor: pointer;\n      text-decoration: underline;\n    `}\n`;\n\nconst MyApp = () =\u003e (\n  \u003c\u003e\n    \u003cButton\u003eGeneric Button\u003c/Button\u003e\n    \u003cButton as=\"a\" href=\"#\"\u003e\n      Link Button\n    \u003c/Button\u003e\n  \u003c/\u003e\n);\n```\n\n##### Output 💎\n\n![5](https://user-images.githubusercontent.com/15273233/54860831-aa517e00-4d84-11e9-8711-94b07588843c.png)\n\n[🔽 Next](https://github.com/devonChurch/fish-pie#pseudo-elements-)\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n## Pseudo Elements 🍻\n\n_Just like regular CSS..._\n\n##### Input ✏\n\n```javascript\nconst Button = styled.button`\n  background: blue;\n  border: 1px solid blue;\n  border-radius: 0.2rem;\n  color: white;\n  display: inline-block;\n  padding: 0.5rem 2.25rem 0.5rem 1rem;\n  position: relative;\n  font-size: 1rem;\n  transition: 200ms;\n\n  \u0026:after {\n    content: \" ⚙\";\n    position: absolute;\n    right: 0.5rem;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  \u0026:hover {\n    transform: scale(1.25);\n    z-index: 1;\n  }\n\n  ${({as}) =\u003e as === 'a' \u0026\u0026 css`\n    color: blue;\n    background: white;\n    cursor: pointer;\n    text-decoration: underline;\n\n    \u0026:after {\n      content: \" 🔗\";\n    }\n  `}\n`;\n\nconst MyApp = () =\u003e (\n  \u003c\u003e\n    \u003cButton\u003eGeneric Button\u003c/Button\u003e\n    \u003cButton as=\"a\" href=\"#\"\u003eLink Button\u003c/Button\u003e\n  \u003c/\u003e\n);\n```\n\n##### Output 💎\n\n![6](https://user-images.githubusercontent.com/15273233/54862977-3d031480-4da7-11e9-82c2-8d344a8cb2a9.gif)\n\n[🔽 Next](https://github.com/devonChurch/fish-pie#theming-)\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n## Theming ♻\n\n_Light -vs- Dark, Cozy -vs Compact etc..._\n\n##### Input ✏\n\n```javascript\nconst bodyBackground = theme(\"mode\", {\n  light: \"white\",\n  dark: \"blue\"\n});\n\nconst GlobalStyle = createGlobalStyle`\n  body {\n    background: ${bodyBackground};\n  }\n`;\n\nconst buttonBackground = theme(\"mode\", {\n  light: \"blue\",\n  dark: \"white\"\n});\n\nconst buttonColor = theme(\"mode\", {\n  light: \"white\",\n  dark: \"blue\"\n});\n\nconst Button = styled.button`\n  background: ${buttonBackground};\n  border-radius: 0.2rem;\n  color: ${buttonColor};\n  padding: 0.5rem 1rem;\n  font-size: 1rem;\n`;\n\nconst MyApp = () =\u003e {\n  const [isLight, setIsLight] = useState(true);\n  return (\n    \u003cThemeProvider theme={{ mode: isLight ? \"light\" : \"dark\" }}\u003e\n      \u003c\u003e\n        \u003cGlobalStyle /\u003e\n        \u003cButton onClick={() =\u003e setIsLight(!isLight)}\u003eToggle Theme\u003c/Button\u003e\n      \u003c/\u003e\n    \u003c/ThemeProvider\u003e\n  );\n};\n```\n\n##### Output 💎\n\n![7](https://user-images.githubusercontent.com/15273233/54863399-1051fb80-4dad-11e9-9849-1ab6b9229f02.gif)\n\n[🔽 Next](https://github.com/devonChurch/fish-pie#polished-)\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n## [Polished](https://polished.js.org) 🌟\n\n_SASS mixins, but in real time..._\n\n### Color Transformations\n\n- ✔ Is a color _Light_ or _Dark_\n- ✔ Parse to `HSL` / `RGB` / `HEX`\n\n### Measurement Transformations\n\n- ✔ Isolate `value` and `unit`\n- ✔ Add `CSS` values together\n\n### General Helpers\n\n- ✔ Create _retina_ image declaration\n- ✔ Hide content _accessibly_\n\n[🔽 Next](https://github.com/devonChurch/fish-pie#thanks-)\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n## Thanks 👍\n\n_Any questions?..._\n\n![](https://media.giphy.com/media/xQAkOKngoJXOw/giphy.gif)\n\nTry out a [CodePen](https://codepen.io/DevonChurch/pen/OqrdPV?editors=0010) that has React / Styled Components integration.\n\n[🔼 Back to Top](https://github.com/devonChurch/fish-pie#style-components-cliffs-notes)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevonchurch%2Ffish-pie","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevonchurch%2Ffish-pie","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevonchurch%2Ffish-pie/lists"}