{"id":15838017,"url":"https://github.com/damassi/react-styled-components-for-designers","last_synced_at":"2025-08-01T22:33:06.616Z","repository":{"id":28781811,"uuid":"119137918","full_name":"damassi/react-styled-components-for-designers","owner":"damassi","description":"React and Styled Components for Designers","archived":false,"fork":false,"pushed_at":"2022-12-07T17:36:35.000Z","size":1355,"stargazers_count":5,"open_issues_count":19,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-01T03:41:42.996Z","etag":null,"topics":["beginner-friendly","guide","react","styled-components"],"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/damassi.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}},"created_at":"2018-01-27T06:02:59.000Z","updated_at":"2023-03-08T16:47:37.000Z","dependencies_parsed_at":"2023-01-14T10:00:17.536Z","dependency_job_id":null,"html_url":"https://github.com/damassi/react-styled-components-for-designers","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damassi%2Freact-styled-components-for-designers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damassi%2Freact-styled-components-for-designers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damassi%2Freact-styled-components-for-designers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damassi%2Freact-styled-components-for-designers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/damassi","download_url":"https://codeload.github.com/damassi/react-styled-components-for-designers/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228413919,"owners_count":17915917,"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":["beginner-friendly","guide","react","styled-components"],"created_at":"2024-10-05T16:00:23.527Z","updated_at":"2024-12-06T04:59:30.499Z","avatar_url":"https://github.com/damassi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React and Styled Components for Designers\n\nThis repo contains three example approaches (or phases) for building modern static layouts using [React.js](https://reactjs.org/) and [Styled Components](https://www.styled-components.com/). The [first](https://github.com/damassi/react-styled-components-for-designers/tree/master/src/1-example-css) mimics traditional approaches to layout and css, with a single component being mounted containing all of the HTML laid out and styled via a stylesheet. The [second phase](https://github.com/damassi/react-styled-components-for-designers/tree/master/src/2-example-modular) takes the first a bit further and breaks the HTML apart into individual files / components, showing how a flat file is broken up into multiple files. The [third phase](https://github.com/damassi/react-styled-components-for-designers/tree/master/src/3-example-styled-components) modifies the second by introducing common Styled Components patterns for handling CSS. The first example is typically what is built first; once the layout is responsive and looks right then the second and third phases become production work as markup and CSS is moved from the main file into individual component-files one-by-one.\n\nFrom a design-to-engineering hand-off perspective the first example approach is typically sufficient. However, the second and third examples are included so that the reader may gain a greater insight into how components finally appear in real-world applications.\n\nBuilding upon [`create-react-app`](https://github.com/facebook/create-react-app) and [VSCode](https://code.visualstudio.com/) as a development environment, this project aims to make the barrier of entry as low as possible while providing for the fastest possible iteration times. Also included is an excellent 12-column grid-system based on [Bootstrap](https://github.com/dragma/styled-bootstrap-grid).\n\n### Requisites\n\nA basic understanding of HTML + CSS.\n\n### First Time Installation\n\n1. Install [VSCode](https://code.visualstudio.com/)\n2. Install VSCode shell command `code` : [Cmd + Shift + P] and search for shell.\n3. Install Node.js: https://nodejs.org/en/download/\n4. Then open your terminal and enter\n\n```bash\ngit clone git@github.com:damassi/react-styled-components-for-designers.git\ncd react-styled-components-for-designers\nnpm install -g yarn\nyarn install\nyarn start\n```\n\nThis should launch a web browser pointed at http://localhost:3000, as well as VSCode. Changes to source-files will be immediately reflected in the browser, without a refresh.\n\nBack in VSCode, you should see this pop up:\n\n\u003cimg width=\"1027\" alt=\"screen shot 2018-01-28 at 4 28 11 pm\" src=\"https://user-images.githubusercontent.com/236943/35489183-546a38c8-0448-11e8-87a7-d65b3525a167.png\"\u003e\n\nBe sure to click 'Install All' and once that's complete run `cmd+shift+p \u003e reload window` to reload with new extensions installed. Plugins include [Prettier](https://prettier.io/docs/en/why-prettier.html), an automatic code formatter so you don't have to worry about coding style, as well as [ESLint](https://eslint.org/docs/about/), which will check your code for errors as you type:\n\n\u003cimg width=\"458\" alt=\"screen shot 2018-01-28 at 4 24 59 pm\" src=\"https://user-images.githubusercontent.com/236943/35489151-da6e5608-0447-11e8-82d9-050f69f5de0e.png\"\u003e\n\nYou can open this panel by selecting `View \u003e Problems` from the menu bar.\n\n\u003e **Once the one-time-only setup takes place all that's needed to start coding is `yarn start`. Toggle working examples by modifying the number [located here](https://github.com/damassi/react-styled-components-for-designers/blob/master/src/index.js#L21) and save.**\n\n### A Quick Primer on React and Styled Components\n\n#### React\n\nReact is a popular way to build user interfaces and aims to be as simple as possible. For example:\n\n```javascript\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eName\u003c/h1\u003e\n      \u003cul\u003e\n        \u003cli\u003eHello\u003c/li\u003e\n        \u003cli\u003eHow\u003c/li\u003e\n        \u003cli\u003eAre\u003cli\u003e\n        \u003cli\u003eYou?\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\nis a React component. Look familiar? Yup :) just regular html. And further, individual components can be combined to better describe page structure:\n\n```javascript\nfunction Header() {\n  return \u003ch1\u003eName\u003c/h1\u003e\n}\n\nfunction Description() {\n  return (\n    \u003cul\u003e\n      \u003cli\u003eHello\u003c/li\u003e\n      \u003cli\u003eHow\u003c/li\u003e\n      \u003cli\u003eAre\u003c/li\u003e\n      \u003cli\u003eYou?\u003c/li\u003e\n    \u003c/ul\u003e\n  )\n}\n\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003cHeader /\u003e\n      \u003cDescription /\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\nIf you need to pass data into your component, you can do so with props:\n\n```javascript\nfunction Header(props) {\n  return \u003ch1\u003e{props.name}\u003c/h1\u003e\n}\n\nfunction Description(props) {\n  return \u003cp\u003e{props.description}\u003c/p\u003e\n}\n\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003cHeader name=\"Will Burroughs\" /\u003e\n      \u003cDescription description=\"The place behind the pines\" /\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\nWhen rendered in a web browser, this will output\n\n```javascript\n\u003cdiv\u003e\n  \u003ch1\u003eWill Burroughs\u003c/h1\u003e\n  \u003cp\u003eThe place behind the pines\u003c/p\u003e\n\u003c/div\u003e\n```\n\n#### Styled Components\n\nBuilding on our above example, lets add some styles. Before Styled Components, developers would typically use CSS classes to style markup:\n\n```javascript\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003cdiv className='name'\u003e\n        Leif the Cat\n      \u003c/div\u003e\n      \u003cdiv className='location'\u003e\n        Seattle, WA\n      \u003c/div\u003e\n    \u003c/div\u003e\n  )\n}\n\n// styles.css\n\n.name {\n  font-size: 20px;\n  font-weight: bold;\n}\n\n.location {\n  text-align: center;\n}\n```\n\nWith Styled Components, you can write your CSS directly in your JavaScript -- an innovation made possible by the recent addition of [template literals](http://wesbos.com/tagged-template-literals/) to the JavaScript lanaguage.\n\nWhile the full extent of what's possible will not be covered here, in short template literals allow for an easy way to mix strings and data together (note the back tick characters in the third `introduction` variable):\n\n```javascript\nconst name = 'Chris'\nconst location = 'Seattle'\nconst introduction = `Hello my name is ${name} and I live in ${location}.`\n```\n\nAnd a full example:\n\n```javascript\nimport styled from 'styled-components'\n\nconst Container = styled.div`\n  padding: 20px;\n`\n\nconst Name = styled.div`\n  font-size: 20px;\n  font-weight: bold;\n`\n\nconst Location = styled.div`\n  text-align: center;\n`\n\nfunction App() {\n  return (\n    \u003cContainer\u003e\n      \u003cName\u003eLeif the Cat\u003c/Name\u003e\n      \u003cLocation\u003eSeattle, WA\u003c/Location\u003e\n    \u003c/Container\u003e\n  )\n}\n```\n\nBreaking this apart a bit, what Styled Components do is allow you to assign a variable to an HTML element (in the above example its a `div`, but can be anything) and then pass in styles between the back-ticks. You then use this variable as a React component. Not only does this markup read well semantically, but it allows one to easily share common properties between styles:\n\n```javascript\nconst colors = {\n  darkGrey: '#333',\n  lightGrey: '#ccc'\n}\n\nconst Name = styled.div`\n  color: ${colors.darkGrey};\n  font-size: 20px;\n`\n\nconst Description = styled.div`\n  color: ${colors.lightGrey};\n`\n\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003cName\u003eLeif the Cat\u003c/Name\u003e\n      \u003cDescription\u003eThe best kitty\u003c/Description\u003e\n    \u003c/div\u003e\n  )\n}\n...\n```\n\nCombining all of these things together makes for a flexible codebase as more and more things are broken apart into reusable, modular components that can be shared throughout. It also makes the development experience more convenient as the markup and corresponding styles are co-located side-by-side in the same file.\n\n---\n\n(This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app))\n\n```\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdamassi%2Freact-styled-components-for-designers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdamassi%2Freact-styled-components-for-designers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdamassi%2Freact-styled-components-for-designers/lists"}