CSS units

React application that converts absolute units used in CSS.

Description

Additionally, it includes a dynamic div element that adjusts the width, based on user input. The app also allows to customize the conversion factor from pixels to inches, enabling precise on-screen measurements.

Technologies Used

• JS Libraries: ReactJS, Math.js
• CSS Libraries: TailwindCSS
• Programming Language: TypeScript
• Build tool: Vite
• Hosting: GitHub Pages
• Dev Environment: VSCode with dev containers in Pop!_OS

Online

Visit the project at: https://jhordyess.github.io/css-units/.

Screenshot

How to use

1. Clone the repository:

git clone git@github.com:jhordyess/css-units.git

2. Open the project folder:

cd css-units

3. Install the dependencies:

yarn

4. Run the project:

yarn dev

5. Open the browser at http://localhost:5173/css-units/

How to use with VSCode dev containers

You can use the VSCode dev containers to run the project in a containerized environment.

You need to have installed Docker and VSCode, and the Dev Containers extension.

1. Clone the repository:

git clone git@github.com:jhordyess/css-units.git

2. Open the project with VSCode:

code css-units

3. Open the command palette and select the option Dev Containers: Reopen in Container.

4. Wait for the container to be built and the project to be started.

5. Open the terminal in VSCode and run the project:

yarn dev

6. Open the browser at http://localhost:5173/css-units/

To-Do

• Add resize event support.
• Add more features 🤔

Contribution

If you would like to contribute to the project, open an issue or make a pull request on the repository.

License

© 2023> Jhordyess. Under the MIT license. See the LICENSE file for more details.

---

Made with 💪 by Jhordyess