Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/harso-css/harso-css
A CSS Framework to make beautiful pages in a few class names
https://github.com/harso-css/harso-css
animation css css3 library
Last synced: 30 days ago
JSON representation
A CSS Framework to make beautiful pages in a few class names
- Host: GitHub
- URL: https://github.com/harso-css/harso-css
- Owner: harso-css
- License: mit
- Created: 2021-10-01T11:20:40.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2021-10-21T17:26:08.000Z (about 3 years ago)
- Last Synced: 2024-04-29T17:46:06.906Z (7 months ago)
- Topics: animation, css, css3, library
- Language: CSS
- Homepage: https://npmjs.com/package/harso-css
- Size: 146 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: docs/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: docs/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Welcome to harso-css
[](#contributors-)
## What is this library?
> This Library is A Superr CSS3 Library
> A CSS Framework that helps you to make your pages Cool!!
## Installation
> Install via npm: ```npm i harso-css```
> Install via CDN: ``````
# Documentation
###
Fonts
### The first thing that this library include is it will automatically gives margin and padding as 0
### This can change your font-family only with a classname
#### Example :``` ``` => This will set the font family to sans-serif for every content inside the body
### The fonts that we can use are : sans-serif, cursive, monospace, consolas, fantasy
###
### Colors
### Blue Text
= ``` Blue Text
```
### Red Text
= ``` Red Text
```
### Yellow Text
= ``` Yellow Text
```
### White Text
= ``` White Text
```
### Green Text
= ``` Green Text
```
### Light Green Text
= ``` Light Green Text
```
### There are more colors like this, that light-blue, royal-blue, dark, brown, pink, plum, violet, purple, and orange
### Some Others...
### Give this classname to an a tag : a-no-decr, then it don't have any text-decoration
### Look that how you can create a nav-bar with harso-css in the Examples\NavBar\index.html
### class name text-center will make the text in the center
### class name center will gives you display as flex, align-items as center, justify-content as center and min-height as 100vh
###
Animations
### Give this classname to a tag : rainbow-bg-infinite, then the bg of that element will have a rainbow animation forever
### Give this classname to a tag : rainbow-bg-one-time-only, then the bg of that element will have a rainbow animation for one time
### Give this classname to a tag : rainbow-text-infinite, then the color of that element will have a rainbow animation forever
### Give this classname to a tag : rainbow-text-one-time-only, then the color of that element will have a rainbow animation for one time
###
Buttons
### We have many buttons, you can look it in here
### ```Hi```
### ```Hi```
### ```Hi```
### ```Hi```
### ```Hi```
###
Transitions
> ```trans-0 = transition: 0s;```
> ```trans-0dot1 = transition: 0.1s;```
**Like these, We also have more classes for transition such as: trans-0dot2, trans-0dot3, trans-0dot4, trans-0dot5, trans-0dot6, trans-0dot7, trans-0dot8, trans-0dot9, trans-1, trans-1dot1, trans1dot2, trans-1dot3, trans-1dot4, trans-1dot5, trans-1dot6, trans-0dot7, trans-1dot8, trans-1dot9, trans-2, trans-2dot1 trans-2dot2, trans-2dot3, tans-2dot4, trans-2dot5, trans-2dot6, trans-2dot7, trans-2dot9, and trans-3**
###
Opacity
> ```op-0 = opacity: 0s;```
> ```op-0dot1 = opacity: 0.1s;```
> ```op-0dot2 = opacity: 0.2s;```
> ```op-0dot3 = opacity: 0.3s;```
> ```op-0dot4 = opacity: 0.4s;```
> ```op-0dot5 = opacity: 0.5s;```
> ```op-0dot6 = opacity: 0.6s;```
> ```op-0dot7 = opacity: 0.7s;```
> ```op-0dot8 = opacity: 0.8s;```
> ```op-0dot9 = opacity: 0.9s;```
> ```op-1 = opacity: 1s;```
## Contributors ✨
Hover on a icon to see their description.
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Sreehari521
📆 🔧 🤔 🐛 💻
E - Coders (Aasheesh Agarwal)
🤔 🐛 💻
Anantjit
🤔 🐛
somePythonProgrammer
🤔 🐛
Adatta1276
💻 🤔 🐛
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!