https://github.com/microdroid/coal-ui
A super simple dark UI library.
https://github.com/microdroid/coal-ui
css framework scss ui web
Last synced: 2 months ago
JSON representation
A super simple dark UI library.
- Host: GitHub
- URL: https://github.com/microdroid/coal-ui
- Owner: MicroDroid
- License: mit
- Created: 2019-05-06T21:44:51.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-05-07T03:05:35.000Z (almost 7 years ago)
- Last Synced: 2025-02-11T00:53:19.041Z (about 1 year ago)
- Topics: css, framework, scss, ui, web
- Language: CSS
- Homepage: https://microdroid.github.io/coal-ui/
- Size: 104 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# coal-ui
dark ui css lib. ([docs](#docs)) ([showcase](https://microdroid.github.io/coal-ui))
## features
- predefined (but customizable) dark design choices
- random helpers everywhere (feature or not? i don't know)
- ~5KiB gzipped when I last checked
- totally responsive
- grid
- zero deps.
## how to use?
`npm i coal-ui` and use the file in `dist/`. (or download it from repo if you don't use npm)
OR use CDN (via jsdelivr): https://cdn.jsdelivr.net/npm/coal-ui@0.1.3/dist/coal.css
## docs
ok I won't write like literally everything, most of it just works as expected.
### general usage (must read)
- if you're going to use sass, you can import only the stuff you need, which can significantly reduce bundle size.
- breakpoints are `any` `sm` `md` `lg` and `xl`
- they're just `min-width` media queries, whereas `any` is `min-width: 0px`.
- many classes (like spacing ones) are in form of `${property}-${breakpoint}-${value}`
- So for example `pt-sm-4` applies padding-top on small screens
- Also there's `py` (vertical) and `px` (horizontal) and just `p` (all), likewise for margins.
### spacing helpers
- there's padding helpers (e.g. `pt-md-4`) and margin ones (e.g. `mr-any-0`)
- by default there are 10 steps, each are `0.5rem` increments.
### grid
- you guessed it, 12 columns are in a row.
- please wrap your columns with a `div` with class `row`
- btw there's `.with-gutters` for quick sensible paddings.
- here's how it works:
- `col-md-4` third (4/12)
- `col-md-auto` auto width
- `col-md` fill remaining space
- some examples:
- `col-any-4` is a third of a row on any screen.
- `col-md` and another `col-md` are two equal width columns on md screens
- `col-md-3` and another `col-md`, first is `3/12` space and the other fills remaining
- `col-md-auto` and another `col-md-2`, first uses what it needs, second uses `2/12` space, rest is empty.
### colors
- default colors are: `black` `very-very-dark` `very-dark` `dark` `dark-grey` `grey` `light-grey` `light` `very-light` `very-very-light` `white`
- for text, use `.black` or whatever
- for backgrounds, use `.black-background`
### interesting classes
- font stuff
- sizing:
- `.huge`
- `.very-huge`
- weight:
- `.very-thin`
- `.thin`
- `.bold`
- `.very-bold`
- display stuff
- `d-any-inline`
- `d-any-inline-block`
- `d-any-block`
- `d-any-inline-flex`
- `d-any-flex`
- other:
- `.no-overflow` put ellipsis instead of wrapping text
- `.no-decoration` remove `` decorations
- `.circular`
- `.slightly-rounded`
- `.rounded`
- `.very-rounded`
- `.text-right`
- `.text-left`
- `.borderless`
- `.sane-image` fix `![]()
`s overflowing like crazy outside everything
----------
## why?
fun.
## what's the point?
there's no point.
## BUT WHY
ok maybe you want to make that super fast page and want some super quick CSS. but there's still no point of this.
wait, maybe you want to make your life harder.
## how to help dev this?
you probably shouldn't but here:
```bash
git clone git@github.com:MicroDroid/coal-ui.git
cd coal-ui
npm i
npm run dev # dist/coal.css ✔️
```