Welcome to harso-css

What is this library?

This Library is A Superrr CSS3 Library
You can just give style to anythings with the ClassNames we say
Also don't forget to follow me on : Github, Youtube

Installation

npm i harso-css
https://cdn.jsdelivr.net/npm/harso-css@latest/ (install as a script tag)

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

The class name nav-bar will make a nav-bar without any background color

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-orange">Hi</button>`

`<button class="btn-blue-1">Hi</button>`

`<button class="btn-blue-2">Hi</button>`

`<button class="btn-white">Hi</button>`

`<button class="btn-dark">Hi</button>`

`<button class="btn-yellow">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;`

Name		Name	Last commit message	Last commit date
Latest commit History 21 Commits
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTERS.md		CONTRIBUTERS.md
LICENSE		LICENSE
README.md		README.md
buttons.html		buttons.html
harso.css		harso.css
package.json		package.json

License

Sreehari521/harso-css

Folders and files

Latest commit

History

Repository files navigation

Welcome to harso-css

What is this library?

Installation

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

Red Text

Yellow Text

White Text

Green Text

Light Green Text

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

The class name nav-bar will make a nav-bar without any background color

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-orange">Hi</button>

<button class="btn-blue-1">Hi</button>

<button class="btn-blue-2">Hi</button>

<button class="btn-white">Hi</button>

<button class="btn-dark">Hi</button>

<button class="btn-yellow">Hi</button>

Transitions

class name trans-0 = transition: 0s;

class name trans-0dot1 = transition: 0.1s;

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;

About

Resources