-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
17 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,68 +1,35 @@ | ||
| This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). | ||
|
|
||
| ## Available Scripts | ||
| # Color Palette App | ||
|
|
||
| In the project directory, you can run: | ||
| This is a react project created to allow a user to compare colors, and see how colors will interact with eachother. | ||
|
|
||
| ### `npm start` | ||
| ### / | ||
|
|
||
| Runs the app in the development mode.<br /> | ||
| Open [http://localhost:3000](http://localhost:3000) to view it in the browser. | ||
| Here a user can see all the different palettes currently stored in state. Each palette is a minifid verison of itself to allow the user to preview the available colors. Clicking on each palette takes you to a specific page for each - /palette/{name}. This will eventually use a get request to pull in the data specific to each user. | ||
|
|
||
| The page will reload if you make edits.<br /> | ||
| You will also see any lint errors in the console. | ||
| Clicking create new palette will take you to /new/palette | ||
|
|
||
| ### `npm test` | ||
| ### /palette/{name} | ||
|
|
||
| Launches the test runner in the interactive watch mode.<br /> | ||
| See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. | ||
| This page allows a user to see the full version of their palette. | ||
|
|
||
| ### `npm run build` | ||
| Using the slider in the top bar, a user can adjust the "shade" to try lighter or darker variations of all of the colors in the palette. | ||
|
|
||
| Builds the app for production to the `build` folder.<br /> | ||
| It correctly bundles React in production mode and optimizes the build for the best performance. | ||
| Each "color box" can be clicked on to copy the hex code to easily use the color elsewhere. Clicking the more button takes the user to /palette/{name}/{color} | ||
|
|
||
| The build is minified and the filenames include the hashes.<br /> | ||
| Your app is ready to be deployed! | ||
| Hex can also be changed using the drop down menu to rgb, and rgba. | ||
|
|
||
| See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. | ||
| ### /palette/{name}/{color} | ||
|
|
||
| ### `npm run eject` | ||
| Here a user can see 9 different shades of the selected color they picked. For example: in a palette called "material-ui" if you choose red, it select 9 different variants of red from a scale of 100-900. Going from lightest to darkest. Each box can be used to copy the hex code of the colors | ||
|
|
||
| **Note: this is a one-way operation. Once you `eject`, you can’t go back!** | ||
| Hex can also be changed using the drop down menu to rgb, and rgba. | ||
|
|
||
| If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. | ||
| ### /new/palette | ||
|
|
||
| Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. | ||
| This is where someone can create a customized palette with up to 20 colors. User must specify a palette name at the top before submitting, this name also must not be the same as palettes already stored. | ||
|
|
||
| You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. | ||
| The user can open the drawer on the left and use the color picker to select a color. Then they must select a new name and use the button to add the color to the palette. | ||
|
|
||
| ## Learn More | ||
|
|
||
| You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). | ||
|
|
||
| To learn React, check out the [React documentation](https://reactjs.org/). | ||
|
|
||
| ### Code Splitting | ||
|
|
||
| This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting | ||
|
|
||
| ### Analyzing the Bundle Size | ||
|
|
||
| This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size | ||
|
|
||
| ### Making a Progressive Web App | ||
|
|
||
| This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app | ||
|
|
||
| ### Advanced Configuration | ||
|
|
||
| This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration | ||
|
|
||
| ### Deployment | ||
|
|
||
| This section has moved here: https://facebook.github.io/create-react-app/docs/deployment | ||
|
|
||
| ### `npm run build` fails to minify | ||
|
|
||
| This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify | ||
| On save palette the custom palette will be added to the "/" home page |