https://github.com/robrohan/pho-ui
A bare bones, CSS only UI styling kit for people who are not afraid of just CSS. It stays out of your way and gives you a base for creating UIs quickly.
https://github.com/robrohan/pho-ui
css spike style web
Last synced: 7 months ago
JSON representation
A bare bones, CSS only UI styling kit for people who are not afraid of just CSS. It stays out of your way and gives you a base for creating UIs quickly.
- Host: GitHub
- URL: https://github.com/robrohan/pho-ui
- Owner: robrohan
- Created: 2021-04-10T02:48:02.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-11-13T07:55:16.000Z (almost 4 years ago)
- Last Synced: 2025-01-11T10:18:13.550Z (9 months ago)
- Topics: css, spike, style, web
- Language: CSS
- Homepage:
- Size: 35.2 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# pho-ui
Pho-ui is just a stylesheet that styles the default HTML controls into something that looks basic but useable. It also allows you to extend it with just plain old CSS (if you know how to use CSS).
The sheet is only ~400 lines, so you can use it as a starter kit if you like, but you can just override anything using your own sheet on top of it.
Pho-ui styles default HTML elements - things like buttons, text areas, drop downs, checkboxes and radio buttons. You don't have to use any special classes or do anything like that - just write HTML.
It is meant to be something you can just drop into any web project and have something useable that you can iterate on.
## Usage
Just include it:
```html
```
Then build your UI with standard HTML tags.
You can override colors, by overriding the root variables:
```css
:root {
--main-font: "courier";
--select-focus: black;
--color-control: silver;
}
```
See the example files for more usage examples.
Pho-ui does not provide any layout classes or help. I suggest you read up on how to use [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) and [CSS Flex Box](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) instead.
