https://github.com/itz-fork/zephyr
Minimal class-less css stylesheet to make boring sites look cool! [WIP]
https://github.com/itz-fork/zephyr
classless-css css-darkmode css-theme minimal-css
Last synced: 3 months ago
JSON representation
Minimal class-less css stylesheet to make boring sites look cool! [WIP]
- Host: GitHub
- URL: https://github.com/itz-fork/zephyr
- Owner: Itz-fork
- Created: 2023-11-27T00:09:50.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2023-11-27T18:28:47.000Z (about 2 years ago)
- Last Synced: 2024-12-28T00:46:42.490Z (about 1 year ago)
- Topics: classless-css, css-darkmode, css-theme, minimal-css
- Language: CSS
- Homepage: https://itz-fork.github.io/Zephyr
- Size: 22.5 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Zephyr 🎐
Minimal class-less css stylesheet to make boring sites look cool!
## Usage
Zephyr doesn't intends to become a complete css component kit, it's a *css stylesheet* to make default HTML sites better
Check out the [demo](https://itz-fork.github.io/Zephyr). If you're satisfied give it a try~
**In HTML**
```html
```
**In Css**
```css
@import url("https://cdn.jsdelivr.net/gh/Itz-fork/Zephyr-Css@latest/Zephyr/zephyr.all.css");
/* Again, use what you want */
@import url("https://cdn.jsdelivr.net/gh/Itz-fork/Zephyr-Css@latest/Zephyr/styles/buttons.css");
@import url("https://cdn.jsdelivr.net/gh/Itz-fork/Zephyr-Css@latest/Zephyr/styles/card.css");
@import url("https://cdn.jsdelivr.net/gh/Itz-fork/Zephyr-Css@latest/Zephyr/styles/text.css");
@import url("https://cdn.jsdelivr.net/gh/Itz-fork/Zephyr-Css@latest/Zephyr/styles/form.css");
```
## z-* helpers
These are additional data classes to make sure you don't have to touch css, unless it's necessary
Syntax: ``
- Buttons
- `data-z-red`
- `data-z-green`
- `data-z-white`
- `data-z-yellow`
- `data-z-purple`
- `data-z-blue` (accent color)
- CSS cards
- Create a container div with `data-z-card-container`
- Add cards with `data-z-card`
- Code blocks
- You can add code blocks with file names like this,
```html
file_name.js
console.log("My code")
```
- Text formatting
- Center text with `data-z-center`
## Examples 👷
Take a look at [Demo Html File](https://github.com/Itz-fork/Zephyr-Css/blob/main/index.html)