{"_id":"@a-2-c-2-anpm/dignissimos-optio-consequuntur","name":"@a-2-c-2-anpm/dignissimos-optio-consequuntur","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@a-2-c-2-anpm/dignissimos-optio-consequuntur","version":"1.0.0","description":"
\"@a-2-c-2-anpm/dignissimos-optio-consequuntur\" \"@a-2-c-2-anpm/dignissimos-optio-consequuntur\"\n \n \"@a-2-c-2-anpm/dignissimos-optio-consequuntur\"\n \n
\n\n
\n\n
\n Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅\n
\n
\n \"downloads:\n \n \"Discord\"\n \"gzip\n \"module\n \"Code\n
\n\n---\n\n**Upgrading from v5?** See the [migration guide](https://@a-2-c-2-anpm/dignissimos-optio-consequuntur.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v6).\n\nUtilizing [tagged template literals](https://www.@a-2-c-2-anpm/dignissimos-optio-consequuntur.com/docs/advanced#tagged-template-literals) (a recent addition to JavaScript) and the [power of CSS](https://www.@a-2-c-2-anpm/dignissimos-optio-consequuntur.com/docs/api#supported-css), `@a-2-c-2-anpm/dignissimos-optio-consequuntur` allow you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!\n\n```jsx\nconst Button = styled.button`\n color: grey;\n`;\n```\n\nAlternatively, you may use [style objects](https://www.@a-2-c-2-anpm/dignissimos-optio-consequuntur.com/docs/advanced#style-objects). This allows for easy porting of CSS from inline styles, while still supporting the more advanced @a-2-c-2-anpm/dignissimos-optio-consequuntur capabilities like component selectors and media queries.\n\n```jsx\nconst Button = styled.button({\n color: 'grey',\n});\n```\n\nEquivalent to:\n\n```jsx\nconst Button = styled.button`\n color: grey;\n`;\n```\n\n`@a-2-c-2-anpm/dignissimos-optio-consequuntur` is compatible with both React (for web) and React Native – meaning it's the perfect choice even for truly universal apps! See the [documentation about React Native](https://www.@a-2-c-2-anpm/dignissimos-optio-consequuntur.com/docs/basics#react-native) for more information.\n\n_Supported by [Front End Center](https://frontend.center). Thank you for making this possible!_\n\n---\n\n## [Docs](https://www.@a-2-c-2-anpm/dignissimos-optio-consequuntur.com/docs)\n\n**See the documentation at [@a-2-c-2-anpm/dignissimos-optio-consequuntur.com/docs](https://www.@a-2-c-2-anpm/dignissimos-optio-consequuntur.com/docs)** for more information about using `@a-2-c-2-anpm/dignissimos-optio-consequuntur`!\n\nQuicklinks to some of the most-visited pages:\n\n- [**Getting started**](https://www.@a-2-c-2-anpm/dignissimos-optio-consequuntur.com/docs/basics)\n- [API Reference](https://@a-2-c-2-anpm/dignissimos-optio-consequuntur.com/docs/api)\n- [Theming](https://www.@a-2-c-2-anpm/dignissimos-optio-consequuntur.com/docs/advanced#theming)\n- [Server-side rendering](https://www.@a-2-c-2-anpm/dignissimos-optio-consequuntur.com/docs/advanced#server-side-rendering)\n- [Tagged Template Literals explained](https://www.@a-2-c-2-anpm/dignissimos-optio-consequuntur.com/docs/advanced#tagged-template-literals)\n\n---\n\n## Example\n\n```jsx\nimport React from 'react';\n\nimport styled from '@a-2-c-2-anpm/dignissimos-optio-consequuntur';\n\n// Create a react component that renders an <h1> which is\n// centered, palevioletred and sized at 1.5em\nconst Title = styled.h1`\n font-size: 1.5em;\n text-align: center;\n color: palevioletred;\n`;\n\n// Create a <Wrapper> react component that renders a <section> with\n// some padding and a papayawhip background\nconst Wrapper = styled.section`\n padding: 4em;\n background: papayawhip;\n`;\n\nfunction MyUI() {\n return (\n // Use them like any other React component – except they're styled!\n <Wrapper>\n <Title>Hello World, this is my first styled component!\n \n );\n}\n```\n\nThis is what you'll see in your browser:\n\n
\n \n \"Screenshot\n \n
\n\n---\n\n## Looking for v5?\n\nThe `main` branch is for the most-current version of @a-2-c-2-anpm/dignissimos-optio-consequuntur, currently v6. For changes targeting v5, please point your PRs at the `legacy-v5` branch.\n\n---\n\n## Built with `@a-2-c-2-anpm/dignissimos-optio-consequuntur`\n\nA lot of hard work goes into community libraries, projects, and guides. A lot of them make it easier to get started or help you with your next project! There are also a whole lot of interesting apps and sites that people have built using @a-2-c-2-anpm/dignissimos-optio-consequuntur.\n\nMake sure to head over to [awesome-@a-2-c-2-anpm/dignissimos-optio-consequuntur](https://github.com/@a-2-c-2-anpm/dignissimos-optio-consequuntur/awesome-@a-2-c-2-anpm/dignissimos-optio-consequuntur) to see them all! And please contribute and add your own work to the list so others can find it.\n\n---\n\n## Contributing\n\nIf you want to contribute to `@a-2-c-2-anpm/dignissimos-optio-consequuntur` please see our [contributing and community guidelines](./CONTRIBUTING.md), they'll help you get set up locally and explain the whole process.\n\nPlease also note that all repositories under the `@a-2-c-2-anpm/dignissimos-optio-consequuntur` organization follow our [Code of Conduct](./CODE_OF_CONDUCT.md), make sure to review and follow it.\n\n---\n\n## Badge\n\nLet everyone know you're using _@a-2-c-2-anpm/dignissimos-optio-consequuntur_ → [![style: @a-2-c-2-anpm/dignissimos-optio-consequuntur](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/a-2-c-2-anpm/dignissimos-optio-consequuntur)\n\n```md\n[![style: @a-2-c-2-anpm/dignissimos-optio-consequuntur](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/a-2-c-2-anpm/dignissimos-optio-consequuntur)\n```\n\n---\n\n## Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].\n\n\n---\n\n## Backers\n\nThank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/@a-2-c-2-anpm/dignissimos-optio-consequuntur#backer)]\n\n\n\n---\n\n## Sponsors\n\nSupport this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/@a-2-c-2-anpm/dignissimos-optio-consequuntur#sponsor)]\n\n\n\n\n\n\n\n\n\n\n\n\n---\n\n## License\n\nLicensed under the MIT License, Copyright © 2016-present Glen Maddern and Maximilian Stoiber.\n\nSee [LICENSE](./LICENSE) for more information.\n\n---\n\n## Acknowledgements\n\nThis project builds on a long line of earlier work by clever folks all around the world. We'd like to thank Charlie Somerville, Nik Graf, Sunil Pai, Michael Chan, Andrey Popp, Jed Watson & Andrey Sitnik who contributed ideas, code or inspiration.\n\nSpecial thanks to [@okonet](https://github.com/okonet) for the fantastic logo.\n","readmeFilename":"README.md"}