color-schemer
A React app to help you select a color scheme, built with styled-components and polished
styled-componentsJavaScript★ 54⑂ 5 forksMITupdated 1 month ago
visit the demo
git clone https://github.com/styled-components/color-schemer.gitstyled-components/color-schemerREADME.mdfork it — it’s yours
Color Schemer
A demo React app built with 💅 styled-components and ✨ polished.
Structure
Every component has a folder beneath the src/ folder, with an index.js containing the component and a style.js containing the styled components used within that component.
colors ├── App ├── Tile ├── Tiles ├── global-styles.js # The global styles └── index.js
┌───────────────────────────────────────────────────────────────────┐
│ <App /> │
│┌─────────────────────────────────────────────────────────────────┐│
││ ││
││ ││
││ <BigTile /> ││
││ ││
││ ││
│└─────────────────────────────────────────────────────────────────┘│
│┌─────────────────────────────────────────────────────────────────┐│
││ <Tiles /> ││
││┌───────────┐┌───────────┐┌───────────┐┌───────────┐┌───────────┐││
│││ ││ ││ ││ ││ │││
│││ <Tile /> ││ <Tile /> ││ <Tile /> ││ <Tile /> ││ <Tile /> │││
│││ ││ ││ ││ ││ │││
││└───────────┘└───────────┘└───────────┘└───────────┘└───────────┘││
│└─────────────────────────────────────────────────────────────────┘│
└───────────────────────────────────────────────────────────────────┘
Calculation
We take the entered color, convert it to HSL and render the same hue and saturation with lightness' of 0.1, 0.3, 0.5, 0.7 and 0.9.
Running locally
git clone https://github.com/styled-components/color-schemer cd color-schemer # Go to downloaded directory npm install # Install dependencies npm start # Start the development server
Uses
License
Copyright (c) 2017 Maximilian Stoiber. Licensed under the MIT License, see the LICENSE file for more information.
more like this