UNPKG

harso-css

Version:

A CSS Framework to make beautiful pages in a few class names

github.com/harso-css/harso-css

harso-css/harso-css

72 lines (65 loc) • 4.92 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
# 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 <br> ### <h2>Fonts</h2> ### 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 ### <br> ### <h2>Colors</h2> ### <h3>Blue Text</h3> = ``` <h3 class="blue">Blue Text</h3> ```<br><br> ### <h3>Red Text</h3> = ``` <h3 class="red">Red Text</h3> ```<br><br> ### <h3>Yellow Text</h3> = ``` <h3 class="yellow">Yellow Text</h3> ```<br><br> ### <h3>White Text</h3> = ``` <h3 class="white">White Text</h3> ```<br><br> ### <h3>Green Text</h3> = ``` <h3 class="green">Green Text</h3> ```<br><br> ### <h3>Light Green Text</h3> = ``` <h3 class="light-green">Light Green Text</h3> ```<br><br> ### <h2>There are more colors like this, that light-blue</span>, <span>royal-blue</span>, <span>dark</span>, <span>brown</span>, <span>pink</span>, <span>plum</span>, <span>violet</span>, <span>purple</span>, <span></span> and <span>orange</span></h2><hr> > ### <h2>Note: You can just add the prefix bg- to the color classnames for getting that bg(background) instead of color</h2><hr><hr><br> ### <h2>Some Others...</h2> ### <h3>Give this classname to an a tag : a-no-decr, then it don't have any text-decoration</h3> ### <h3>Look that how you can create a nav-bar with harso-css in the Examples\NavBar\index.html</h3> ### <h3>class name text-center will make the text in the center</h3> ### <h3>class name center will gives you display as flex, align-items as center, justify-content as center and min-height as 100vh</h3><br><br> ### <h2>Animations</h2> ### <h3>Give this classname to a tag : rainbow-bg-infinite, then the bg of that element will have a rainbow animation forever</h3> ### <h3>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</h3> ### <h3>Give this classname to a tag : rainbow-text-infinite, then the color of that element will have a rainbow animation forever</h3> ### <h3>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</h3><br><br> ### <h2>Buttons</h2> ### <h3>We have many buttons, you can look it in <a href="https://harso-css.github.io/harso-css/Examples/Buttons/buttons.html">here</a></h3> ### ```<button class="btn btn-danger">Hi</button>``` ### ```<button class="btn btn-info">Hi</button>``` ### ```<button class="btn btn-warning">Hi</button>```<br><br> ### ```<button class="btn btn-fill">Hi</button>``` ### ```<button class="btn btn-border">Hi</button>```<br><br> ### <h2>Transitions</h2> ### 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 <br><br> ### <h2>Opacity</h2> ### 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... <br><hr><br> <div style="display: flex; flex-direction: column;"> <img src="https://avatars.githubusercontent.com/u/82920449?s=120&v=4" width="200px" height="200px" /> <img src="https://avatars.githubusercontent.com/u/73747859?s=120&v=4" width="200px" height="200px" /> <img src="https://avatars.githubusercontent.com/u/83082760?s=120&v=4" width="200px" height="200px" /> <img src="https://avatars.githubusercontent.com/u/74598401?s=120&v=4" width="200px" height="200px" /> <img src="https://avatars.githubusercontent.com/u/74092334?s=120&v=4" width="200px" height="200px" /> <img src="https://avatars.githubusercontent.com/u/80135238?s=120&v=4" width="200px" height="200px" /> </div>