harso-css
4.0.0 • Public • Published Welcome to harso-css
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:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/harso-css@4.0.0/harso.css">
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 :<body class="sans-serif"></body> => 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
=
<h3 class="blue">Blue Text</h3>
Red Text
=
<h3 class="red">Red Text</h3>
Yellow Text
=
<h3 class="yellow">Yellow Text</h3>
White Text
=
<h3 class="white">White Text</h3>
Green Text
=
<h3 class="green">Green Text</h3>
Light Green Text
=
<h3 class="light-green">Light Green Text</h3>
There are more colors like this, that light-blue, royal-blue, dark, brown, pink, plum, violet, purple, and orange
Note: You can just add the prefix bg- to the color classnames for getting that bg(background) instead of color
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
<button class="btn btn-danger">Hi</button>
<button class="btn btn-info">Hi</button>
<button class="btn btn-warning">Hi</button>
<button class="btn btn-fill">Hi</button>
<button class="btn btn-border">Hi</button>
Transitions
class name trans-0 = transition: 0s;
class name trans-0dot1 = transition: 0.1s;
like this we have 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, trans-3
Opacity
class name op-0 = opacity: 0s;
class name op-0dot1 = opacity: 0.1s;
class name op-0dot2 = opacity: 0.2s;
class name op-0dot3 = opacity: 0.3s;
class name op-0dot4 = opacity: 0.4s;
class name op-0dot5 = opacity: 0.5s;
class name op-0dot6 = opacity: 0.6s;
class name op-0dot7 = opacity: 0.7s;
class name op-0dot8 = opacity: 0.8s;
class name op-0dot9 = opacity: 0.9s;
class name op-1 = opacity: 1s;
Our contributers...
Package Sidebar
Install
Weekly Downloads
