https://github.com/semanticpixel/ember-styled-components
Visual primitives for the component age. A simple port for Ember of styled-components 💅
https://github.com/semanticpixel/ember-styled-components
Last synced: 12 days ago
JSON representation
Visual primitives for the component age. A simple port for Ember of styled-components 💅
- Host: GitHub
- URL: https://github.com/semanticpixel/ember-styled-components
- Owner: semanticpixel
- License: mit
- Created: 2017-12-21T04:17:35.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-23T17:03:28.000Z (over 8 years ago)
- Last Synced: 2025-08-09T05:31:24.425Z (10 months ago)
- Language: JavaScript
- Size: 184 KB
- Stars: 12
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Visual primitives for the component age. A simple port of styled-components 💅 for Ember
Utilising tagged template literals (a recent addition to JavaScript) and the power of CSS allows 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!
*This is, not fully-featured, fork from styled-components made by [Glen Maddern](https://twitter.com/glenmaddern) and [Max Stoiber](https://twitter.com/mxstbr). Thank you for making this possible!*
## Installation
```
npm install ember-styled-components
```
## Example
```javascript
// wrapper-component.js
import styled from 'ember-styled-components';
/**
* Create a wrapper component that renders a with
* some padding and a papayawhip background
*/
export default styled.section`
padding: 4em;
background: papayawhip;
`;
```
```javascript
// title-component.js
import styled from 'ember-styled-components';
/**
* Create a title component that renders an
which is
* centered, palevioletred and sized at 1.5em
*/
export default styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
```
```handlebars
{{!-- Use them like any other Ember component – except they're styled! --}}
{{#wrapper-component}}
{{#title-component}}Hello World, this is my first styled component!{{/title-component}}
{{/wrapper-component}}
```
This is what you'll see in your browser:
## Contributing
If you want to contribute to `ember-styled-components` please see our [contributing and community guidelines](./CONTRIBUTING.md), they'll help you get set up locally and explain the whole process.
Please also note that the repository follows out [Code of Conduct](./CODE_OF_CONDUCT.md), make sure to review and follow it.
## License
Licensed under the MIT License, Copyright © 2017 Luis Torres.
See [LICENSE](./LICENSE) for more information.
## TODOs
- [ ] Tests
- [ ] Demo website
## Acknowledgements
This project builds on a long line of earlier work by clever folks all around the world.
* [Styled Components](https://github.com/styled-components/styled-components/)
* [Vue Styled Components](https://github.com/styled-components/vue-styled-components/)
## Credits
This document is based on the Styled Components `README.md` layout: https://github.com/styled-components/styled-components/