# Styled Components
An easier way to design apps with ES6 and CSS

---
## Screenshots
<center>![Screen Shot 06-04-18 at 11.52 PM.PNG](https://i.imgur.com/F9Mx4Mq.png)</center>

<center>![Screen Shot 06-04-18 at 11.51 PM.PNG](https://i.imgur.com/mO7ngdJ.png)</center>

<center>![Screen Shot 06-04-18 at 11.56 PM.PNG](https://i.imgur.com/c9m3Vao.png)</center>

<center>![Screen Shot 06-04-18 at 11.56 PM 001.PNG](https://i.imgur.com/vXCQDE7.png)</center>

<center>![Screen Shot 06-04-18 at 11.57 PM.PNG](https://i.imgur.com/G1SIkTk.png)</center>



---
## Hunter's comment
# <center> What is Styled Components? </center> <h1>

You can head over to this YouTube video that discusses the motivation behind it and introduces Styled Components:

https://www.youtube.com/watch?v=bIK2NwoK9xk

***

Styled-components is a coding/programming system for apps and websites that implements tagged template literals to style your components.

This crosses out the need for mapping between components and styles. This means that defining styles just needs creating normal React components, that has your styles attached to it.

***

If you want to see what things can be built with Styled Components or what websites/companies have already used them, you can go directly to this link here: https://www.styled-components.com/ecosystem.

**Here are a few examples out of that link:**

- **[Coinbase Pro](https://pro.coinbase.com/)** - is a US-based exchange with trading UI, FIX API and REST API.
- **[Swat.io](https://swat.io/)** - Social Media Managment for Teams.
- **[Grabient.com](https://www.grabient.com/)** - A beautiful and simple UI for generating web gradients. (source).

***

Here's a sample YouTube video for creating styles with this product:

https://www.youtube.com/watch?v=u6gQ48rSw-E

***

All images used are from styled-components.com and websites who used this open-source system.

---
## Link
https://www.styled-components.com/?ref=steemhunt

---
## Contributors
Hunter: @deveerei

---
<center><br/>![Steemhunt.com](https://i.imgur.com/jB2axnW.png)<br/>
This is posted on Steemhunt - A place where you can dig products and earn STEEM.
[View on Steemhunt.com](https://steemhunt.com/@deveerei/styled-components-an-easier-way-to-design-apps-with-es6-and-css)
</center>

<center>
![footer.png](https://steemitimages.com/DQmYWVAcL1vgXUiCXsD2jxHkAs9eQQL6YAHHStYNbwmEgNn/footer.png)
[<img src="https://steemitimages.com/DQmTRKXBusWRaXX1kCMKa2WFYfwHDsWPC1Md6A5zigJCvsT/1steem.png)">](https://steemit.com/@steemph)[<img src="https://steemitimages.com/DQmQRngoJRY9Hf8uMiMPvvd71mHUK3W74dXNQxg51qFJLJ5/1bayan.png)">](https://steemit.com/@bayanihan)[<img src="https://steemitimages.com/DQmcbCVPTaG1hL61YhnHP9F9ZsiFzfQ55duaS9RzDiwPdUp/1phil.png)">](https://steemit.com/created/philippines)
<center>![deveerei new.png](https://steemitimages.com/DQmVCDNSJVPJDYbwcRzLrtKCgXjXECzya2s9Zm9kueFquco/deveerei%20new.png)</center>
<center>![deveerei.png](https://steemitimages.com/DQmaQEkJjr9vXiwjDVHRasmfhPEhDTmnvJASJaRacyY6PRX/deveerei.png)</center>
![spacer.png](https://steemitimages.com/DQmcMcks4AeCodygB69uWnMv43YYj35oDeDMiEmZ5JzUcAT/spacer.png)
[<img src="https://steemitimages.com/DQmR2F5Hf5ruzoBFQjmK7LZQUgGuegZS2ZxpUMCpu3EQ9VC/Facebook_30px.png">](https://www.facebook.com/deveereiblog)[<img src="https://steemitimages.com/DQmXebbopRSA9xXx5js81cXJvaiZEx1VW6JBBvNnPYWPEEZ/Twitter_30px.png">](https://twitter.com/deveerei)[<img src="https://steemitimages.com/DQmd1iUQEHaMcUWiD4H4ZymBDXVQ9zEjp13imKoD2wro29o/WordPress_30px.png">](https://deveerei.wordpress.com/)[<img src="https://steemitimages.com/DQmVXSvKyisxeCYeFw8KbYu13knvJWMJR2EPjhkGrdqh9sL/DeviantART_30px.png">](http://deveerei.deviantart.com/)[<img src="https://steemitimages.com/DQmbw9rr9isfGGHZRd7Ff3i2BvkfgxMXh3NAEbSuYzcgGuW/Instagram_32px.png">](https://www.instagram.com/deveerei/)
![Source.png](https://steemitimages.com/DQmUgLnAYNCS7aUWB7FEM4p1v88sFjKMhwv1ba3CQZ693Lz/Source.png)