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

deveerei (69)in #steemhunt • 6 years ago (edited)

Styled Components

An easier way to design apps with ES6 and CSS

Screenshots

Screen Shot 06-04-18 at 11.56 PM 001.PNG

Hunter's comment

What is Styled Components?

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

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 - is a US-based exchange with trading UI, FIX API and REST API.
Swat.io - Social Media Managment for Teams.
Grabient.com - A beautiful and simple UI for generating web gradients. (source).

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

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

This is posted on Steemhunt - A place where you can dig products and earn STEEM.
View on Steemhunt.com

#opensource #programming #developers #utopian-io

6 years ago in #steemhunt by deveerei (69)

$24.72

Sort:

Trending

[-]

mkam (39) 6 years ago

Pros:

Great solution for coding in CSS
It would make app development easy
User-friendly
Reasonable price

Cons:

No downsides

$2.17

2 votes

[-]

chronocrypto (75) 6 years ago (edited)

Thank you for posting on Steemhunt!
However, your post has been delisted on Steemhunt because it does not meet the following
posting guidelines.

SteemHunt does not allow the use of BidBots.
Urgent Announcement @steemhunt will exclude all bid bot upvoted hunts

$1.07

1 vote

[-]

deveerei (69) 6 years ago

Thanks a lot!

$0.00

[-]

noobster (54) 6 years ago (edited)

Pros:

User friendly
Various useful features
Can be used for apps
Very useful tool for developers

Cons:

Small target group
Price

Thanks for this awesome hunt! Have a nice day!

$1.06

1 vote

[-]

josephace135 (69) 6 years ago

Pros:

Great platform which simplifies and makes the designs of your applications easier just by using their already proven codes which are being used by some well-known companies or platforms like Bloomberg and Huffington Post.
Very great user interface which is very friendly.
Has lots of stylings to offers thanks to its many documentations found in its Github.
To top it all, this platform is open source, meaning anyone who is a coder and has something to impart, he can contribute right away and wait for merging of his/her pull requests.

Cons:

None for this amazing platform, such a great initiative.

$1.03

1 vote

[-]

phoenixlady (54) 6 years ago

Pros :

It is very user friendly
Easy to install
It supports a lot of features
Can be very useful to developers
Lightweight
It is very simple and easy

Cons :

Amazing product but the price is too expensive

$0.99

2 votes

[-]

autoacademics (39) 6 years ago

Pros:

Great solution for coding in CSS
It would make app development easy
User-friendly
Reasonable price
Cons:

No downsides

$0.91

1 vote

[-]

reiban (57) 6 years ago

Great job on this one @deveerei!

Pros:

Open Source.
An existing user-base may provide great support especially for open source projects.
Simpler streamlined coding.
Improved and faster developmental workflows because of streamlining.

Cons:

I don't have any comments on cons.

$0.04

1 vote

[-]

haneun (53) 6 years ago

Pros:

Being Open Source.
A wide user base
Simplified coding especially for reviews and edits
Helps improve work efficiency

Cons:

None I can think of.

$0.04

1 vote

[-]

blessednami (51) 6 years ago

The Pros:

Having been used by many developers and websites/companies, this product just proves it has that Wow factor that is effective and quality-wise, a good product to use.
This makes coding a lot simpler.
Streamlining the codes provides better developments especially when doing bug hunts and improvements on the codes.
Open Source means you'll be able to use it for no fees at all and is free of copyright infringements.
Open Source means improvements over this product can be taken over by anyone in case the developers discontinue Styled Components.

The Cons:

Support may be limited for open source products in the future if the original developers lets go of it and no one or a non-competitive team succeeds the project handling.

$0.00

1 vote

[-]

wilbejel (52) 6 years ago

Pros:
Informative
User friendly

Con:
NONE

$0.00

1 vote

[-]

livelifefullest (62) 6 years ago (edited)

Pros: It seems this could be of good use to start with building some apps / The tool itself looks pretty easy
Cons: basic templates / price / speed

$0.00

[-]

vspdivine (52) 6 years ago

Pros:-

an interesting feature, joyfully change the look of the page.
very easy to use.
you can use all the features of CSS as per your requirement.
very handy tool for application developers.
remove the mapping between the components and styles.
The "styled" method works accurately on all of your own or any third-party components as well.
you can extend your style according to your creativity.
full theaming support.
Cons:-
templates needs some improvement.

$0.00

[-]

nieloagranca (65) 6 years ago

Pros:

An app help you design CSS.
Available from npmjs which is very convenient for developers.
User friendly.
easy install.

Cons:
None as I can see

$0.00

[-]

hoa0123 (55) 6 years ago

Pros :

good product to use
Simple and make easy
improvements on the codes and bug hunt

Cons :

price

$0.00

[-]

neemanbhat (57) 6 years ago

pros

Supports many features like styleint, styled themes and highlights, utilities
Ends need to map components and styles.
Makes job of a development easier
Software is an open source project for further use and development
It is user friendly and also makes coding lot easier.

Cons

Review of templates is the first thing that has to be checked by professional developers.
Price is more

$0.00

[-]

maikuraki (69) 6 years ago

$0.00

[-]

truthsfinder (62) 6 years ago

Pros:

Great tool for developers to start with, makes life easier and better
It is an open source which is really good since most developers wanted to used tools which is for free to reserved its resources
It has good graphical user interface
Lightweight

Cons:

Best support will be acquired through purchased

$0.00

[-]

vinzie1 (71) 6 years ago

Pros:

User Friendly UI
Easy, Fast, and Reliable
it is an open source and it is very awesome styles

Cons:

None for this product

$0.00

[-]

mindblast (67) 6 years ago

Pros :

A good enhancement for your website which you will be creating mapping between components and styles
It has a better styling effect that can help your website to look better
Not too complicated to understand

Cons :

You need to be a little bit technical to be able to install and then implement the script into your website.

$0.00

[-]

afifa (64) 6 years ago

Pros
• Lovely features
• Easy to utilize
• Programming language simple
• Can be futher improved in the future

Cons

Non Found

$0.00

[-]

mcenoramle (54) 6 years ago

Pros:

Easy tool to help you design your web page/css
lightweight and free to use
opensource

Cons:

None from I can see

$0.00

[-]

gentlemanoi (58) 6 years ago

Pros:

A lightweight component to use in your application
Great tool for UX designer to create or build system easier
It has a great graphical user interface
It is an open source which you can edit and review the codes

Cons:

None as I can see

$0.00

[-]

an0na (60) 6 years ago

Pros:

User friendly
Great IDE for developers
Nice UI and many tools & features

Cons:

None as I can see

$0.00

[-]

superoo7 (64) 6 years ago (edited)

As a web developer that had been using a lot of CSS, Sass and also styled-component, these are my thoughts:

The Pros:

Making CSS more programmable and into container based.
CSS in JS support template literal, making CSS to have cooler features.
Most of the feature of Sass are in styled component.
Open source project.
Can be added into your workflow easily (Gulp, Grunt, Webpack)

The Cons：

Learning curve and syntax changes.
Mixing CSS into JS, not sure everyone is the fan of doing so.
Without the use of SSR, might caused bad User Experience for older browser user or those disabled JS

$0.00

[-]

jepoyasinas (53) 6 years ago

Pros

Friendly user
Make the coding or the development become easier
Open source
Nice Tool

Cons

Price

$0.00

[-]

saimegh (60) 6 years ago

Pros :

Open Source
Great solution for coding in CSS
Improved and faster developmental workflows because of streamlining
Easy to use & less price

Cons :

None that i can see

$0.00

[-]

fel1xw (58) 6 years ago

Pros:

Scoped css styles
Easy to maintain / refactor / remove components
Ability to have themes easily
Active community

Cons:

You need to write css in your js files

$0.00

[-]

pogaku95 (47) 6 years ago

Pros:

Great tool for developers to start with, makes life easier and better
It is an open source which is really good since most developers wanted to used tools which is for free to reserved its resources
It has good graphical user interface
Lightweight
Cons:

Best support will be acquired through purchased

$0.00

[-]

project7 (66) 6 years ago

Thanks for your hunt, however your post is delisted from Steemhunt because we found out that your post used minnowbooster which we don't allow to use.

Screenshot 2018-06-05 16.24.56.png