a small starter for building a component library with styled-components 💅
Demo is at: https://sw-yx.github.io/react-styled-duotone/demo
This component lib uses:
CSS mix-blend mode styled-components, polished, styled-components-modifiers 💅
- Primary-Color: #FBFBFB, Secondary-Color: #283B6B
- Primary-Color: #FCC862, Secondary-Color: #2D45C6
- Primary-Color: #71DF6F, Secondary-Color: #272D67
- Primary-Color: #D92037, Secondary-Color: #2A3060
- Primary-Color: #8ADFD0, Secondary-Color: #5C2998
- Primary-Color: #FCC862, Secondary-Color: #2D45C6
- Primary-Color: #A3D5CA, Secondary-Color: #E52839
- https://css-tricks.com/almanac/properties/m/mix-blend-mode/ Demoed here and here
- http://webdesignerwall.com/tutorials/create-spotify-colorizer-effects-css-blend-modes
- also check out: https://github.com/nagelflorian/react-duotone and https://lukyvj.github.io/colofilter.css/
- or SVG filters demoed here and here and here
To install dependencies with Yarn, run:
$ yarnor to install with npm, run:
$ npm installNOTE: When you run build, Babel will create a build directory. This is what your users
will interact with when they use your library. Nothing in lib gets shipped with your
published module.
Run once:
$ npm run build
Run the watch script:
$ npm run build:watch
NOTE: the build script runs in the prepublish script just before you publish to npm.
If you already have an account with npm, you can simply run:
$ npm login
$ npm publish
If you don't have an account with npm:
NOTE: Your email address is public
$ npm set init.author.name "Your Name"
$ npm set init.author.email "you@example.com"
$ npm set init.author.url "http://yourblog.com"
$ npm adduser
$ npm publish
I am thankful for any contributions made by the community. By contributing you agree to abide by the Code of Conduct in the Contributing Guidelines. https://hackernoon.com/building-a-react-component-library-part-2-46fd4f77bb5c