https://github.com/shellbear/styled-system-example

An introduction to styled-system.
https://github.com/shellbear/styled-system-example

emotion react styled-components styled-system typescript

Last synced: 10 months ago
JSON representation

An introduction to styled-system.

• Host: GitHub
• URL: https://github.com/shellbear/styled-system-example
• Owner: shellbear
• License: mit
• Created: 2021-07-05T07:16:28.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2021-07-05T15:38:47.000Z (over 4 years ago)
• Last Synced: 2024-12-31T21:24:16.637Z (12 months ago)
• Topics: emotion, react, styled-components, styled-system, typescript
• Language: TypeScript
• Homepage: https://shellbear.me/blog/styled-system
• Size: 522 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Styled-system example

An example and introduction to [styled-system](https://styled-system.com/).

**Read the full step-by-step article: https://shellbear.me/blog/styled-system**

![preview](.github/img/preview.jpg)

## Components

- [Button](src/components/Button.tsx) - Introduce usage of [Variants](https://styled-system.com/variants/)

- [Grid](src/components/Grid.tsx) - Use [Grid Layout](https://styled-system.com/api#grid-layout/) and [Responsive Styles](https://styled-system.com/responsive-styles/)

- [Image](src/components/Image.tsx) - Use the [Border](https://styled-system.com/api/#border) styles

All the components and props are used in the [src/App.tsx](src/App.tsx) component.

## 💻 Getting started

```

yarn

# or

npm install

yarn start

#or

npm start

```

Runs the app in the development mode.\

Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.\

You will also see any lint errors in the console.

## License

MIT