https://github.com/shamscorner/wtf-css-unit
Sometimes finding the right css units can be a pain. This tool will help you to figure out the right css units for your project. Figure out your CSS unit with ease. All you need to do is just answer some questions. Inspired by whatunit.com.
https://github.com/shamscorner/wtf-css-unit
css css-units css3 font-sizes sveltekit tailwindcss units
Last synced: about 2 months ago
JSON representation
Sometimes finding the right css units can be a pain. This tool will help you to figure out the right css units for your project. Figure out your CSS unit with ease. All you need to do is just answer some questions. Inspired by whatunit.com.
- Host: GitHub
- URL: https://github.com/shamscorner/wtf-css-unit
- Owner: shamscorner
- License: mit
- Created: 2023-11-22T09:18:53.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-14T17:49:16.000Z (over 2 years ago)
- Last Synced: 2025-03-28T04:39:18.727Z (over 1 year ago)
- Topics: css, css-units, css3, font-sizes, sveltekit, tailwindcss, units
- Language: TypeScript
- Homepage: https://wtf-css-unit.vercel.app
- Size: 1.06 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# WTF is CSS Units Anyway?
**🚜 Under Active Construction (not finished yet)**
Sometimes finding the right css units can be a pain. This tool will help you to figure out the right css units for your project. Figure out your CSS unit with ease. All you need to do is just answer some questions.
This project is highly inspired by [whatunit.com](https://whatunit.com/). Check the awesome flowchart there.
This project is created from this awesome [sveltekit starter template](https://github.com/shamscorner/sveltekit-stackter)
## TODOs
- [x] Font size
- [x] Spacing
- [x] Positioning
- [x] Details/effects
- [x] Flex or grid
- [ ] Width or height on an element
## Run on your local?
Rename `.env-example` to `.env` or `.env.local`
Install dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
```bash
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
```
## Building
To create a production version of your app:
```bash
npm run build
```
You can preview the production build with `npm run preview`.
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
## Vercel deployment
[Check here](https://vercel.com/guides/how-can-i-use-bitbucket-pipelines-with-vercel#configuring-bitbucket-pipelines-for-vercel)
[Twitter](https://twitter.com/shamscorner)