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

npm i harso-css

Weekly Downloads

3

Version

4.0.0

License

MIT

Unpacked Size

20.3 kB

Total Files

8

Last publish

Collaborators

  • sreehari.s