https://github.com/ikartehfox/color-toy

A color playground for testing background and text color visibility!
https://github.com/ikartehfox/color-toy

development html-css-javascript playground testing testing-tools tools

Last synced: about 2 months ago
JSON representation

A color playground for testing background and text color visibility!

• Host: GitHub
• URL: https://github.com/ikartehfox/color-toy
• Owner: iKarTehFox
• License: mpl-2.0
• Created: 2024-06-21T07:07:52.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-06-21T07:16:05.000Z (7 months ago)
• Last Synced: 2024-06-22T00:29:00.059Z (7 months ago)
• Topics: development, html-css-javascript, playground, testing, testing-tools, tools
• Language: HTML
• Homepage: https://color-toy.pages.dev/
• Size: 543 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Color Toy by iKarTehFox

> **A color playground for testing background and text color visibility!**

**Website:** [View in your browser!](https://color-toy.pages.dev)

## Build/run Instructions

Color Toy by iKarTehFox is bundled with Webpack. Follow the instructions below to get started with building the project.

#### Prerequisites

 - [Node.js](https://nodejs.org/)

 - Basic CLI knowledge

#### Instructions

1. Clone the repository and `cd` into it.

```bash

git clone https://github.com/iKarTehFox/color-toy.git && cd color-toy

```

2. Install dependencies: `npm install`

3. Run `npm run build` or `npm run build:prod` to bundle with Webpack in production mode.

   - Bundled files will be located in the `./dist` directory.

   - You can instead run `npm run build:dev` to bundle for development.

4. Serve the files in the `./dist` directory with your favorite http server.

## Features

- Set a custom background color

- Type any text to display in front of the background color

- Choose a custom text color

- Change the text sizing

- Hide the menu with a click of a button (and make it reappear like magic!)

## Gallery

![A screenshot of the page with the menu panel appearing over a Lorem Ipsum in the background. The background color is a pale blue with the text a dark gray.](./assets/image.png)

# Acknowledgements (OSS)

- **Bootstrap** ([Link](https://getbootstrap.com/)): Licensed under MIT License

- **hex-rgb** ([GitHub](https://github.com/sindresorhus/hex-rgb)): Licensed under MIT License

 

- **Material Design Icons by Pictogrammers** ([GitHub](https://github.com/Templarian/MaterialDesign)): Licensed under Apache License 2.0

- **Webpack** ([GitHub](https://github.com/webpack/webpack)): Licensed under MIT License

Each license can be found in the code's respective files or website.