Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Color Schemer

colors.styled-components.com

The color schemer app

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.

About

A React app to help you select a color scheme, built with styled-components and polished

Topics

Resources

License

Releases

No releases published

Packages

No packages published