CSSORAMA - The Next Generation CSS Framework

Documentation

Installation

    <link href="https://cssorama.github.io/.github/cssorama.css" rel="stylesheet">

Why Use CSSORAMA

1. Flexible CSS Framework
2. Write only classes - no CSS required
3. Create Custom Components And Store them later use like, (I created Navbar using CSSARAMA, I Don't have to everytime write that code again, I just need to add that code in a custom file navBar.component.js.md)
4. Responsive in design and Mobile friendly.

Classes

sr-only

position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;

not-sr-only

position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;

focus-within

position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;

focus

position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;

pointer-events-none

pointer-events: none;

pointer-events-auto

pointer-events: auto;

visible

visibility: visible;

invisible

visibility: hidden;

static

position: static;

fixed

position: fixed;

absolute

position: absolute;

relative

position: relative

sticky

position: sticky

inset-0

top: 0;
right: 0;
bottom: 0;
left: 0

inset-1

top: .25rem;
right: .25rem;
bottom: .25rem;
left: .25rem

inset-2

top: .5rem;
right: .5rem;
bottom: .5rem;
left: .5rem

inset-3

top: .75rem;
right: .75rem;
bottom: .75rem;
left: .75rem

inset-4

top: 1rem;
right: 1rem;
bottom: 1rem;
left: 1rem

inset-5

top: 1.25rem;
right: 1.25rem;
bottom: 1.25rem;
left: 1.25rem

inset-6

top: 1.5rem;
right: 1.5rem;
bottom: 1.5rem;
left: 1.5rem

inset-7

top: 1.75rem;
right: 1.75rem;
bottom: 1.75rem;
left: 1.75rem

inset-8

top: 2rem;
right: 2rem;
bottom: 2rem;
left: 2rem

inset-9

top: 2.25rem;
right: 2.25rem;
bottom: 2.25rem;
left: 2.25rem

inset-10

top: 2.5rem;
right: 2.5rem;
bottom: 2.5rem;
left: 2.5rem

inset-11

top: 2.75rem;
right: 2.75rem;
bottom: 2.75rem;
left: 2.75rem

inset-12

top: 3rem;
right: 3rem;
bottom: 3rem;
left: 3rem

inset-14

top: 3.5rem;
right: 3.5rem;
bottom: 3.5rem;
left: 3.5rem

inset-16

top: 4rem;
right: 4rem;
bottom: 4rem;
left: 4rem

inset-20

top: 5rem;
right: 5rem;
bottom: 5rem;
left: 5rem

inset-24

top: 6rem;
right: 6rem;
bottom: 6rem;
left: 6rem

inset-28

top: 7rem;
right: 7rem;
bottom: 7rem;
left: 7rem

inset-32

top: 8rem;
right: 8rem;
bottom: 8rem;
left: 8rem

inset-36

top: 9rem;
right: 9rem;
bottom: 9rem;
left: 9rem

inset-40

top: 10rem;
right: 10rem;
bottom: 10rem;
left: 10rem

inset-44

top: 11rem;
right: 11rem;
bottom: 11rem;
left: 11rem

inset-48

top: 12rem;
right: 12rem;
bottom: 12rem;
left: 12rem

inset-52

top: 13rem;
right: 13rem;
bottom: 13rem;
left: 13rem

inset-56

top: 14rem;
right: 14rem;
bottom: 14rem;
left: 14rem

inset-60

top: 15rem;
right: 15rem;
bottom: 15rem;
left: 15rem

inset-64

top: 16rem;
right: 16rem;
bottom: 16rem;
left: 16rem

inset-72

top: 18rem;
right: 18rem;
bottom: 18rem;
left: 18rem

inset-80

top: 20rem;
right: 20rem;
bottom: 20rem;
left: 20rem

inset-96

top: 24rem;
right: 24rem;
bottom: 24rem;
left: 24rem

inset-auto

top: 24rem;
right: 24rem;
bottom: 24rem;
left: 24rem

inset-x-full

left: 100%;
right: 100%;

inset-y-full

top: 100%;
bottom: 100%

top-0

top: 0

top-1

top: .25rem;

top-2

top: .5rem

top-3

top: .75rem

top-4

top: 1rem

top-5

top: 1.25rem

top-6

top: 1.5rem

top-7

top: 1.75rem

top-8

top: 2rem

top-9

top: 2.25rem

top-10

top: 2.5rem

top-11

top: 2.75rem

top-12

top: 3rem

top-14

top: 3.5rem

top-16

top: 4rem

top-20

top: 5rem

top-24

top: 6rem

top-28

top: 7rem

top-32

top: 8rem

top-36

top: 9rem

top-40

top: 10rem

top-44

top: 11rem

top-48

top: 12rem

top-52

top: 13rem

top-56

top: 14rem

top-60

top: 15rem

top-64

top: 16rem

top-72

top: 18rem

top-80

top: 20rem

top-96

top: 24rem

top-auto

top: auto

bottom-0

bottom: 0

bottom-1

bottom: .25rem

bottom-2

bottom: .5rem

bottom-3

bottom: .75rem

bottom-4

bottom: 1rem

bottom-5

bottom: 1.25rem

bottom-6

bottom: 1.5rem

bottom-7

bottom: 1.75rem

bottom-8

bottom: 2rem

bottom-9

bottom: 2.25rem

bottom-10

bottom: 2.5rem

bottom-11

bottom: 2.75rem

bottom-12

bottom: 3rem

bottom-14

bottom: 3.5rem

bottom-16

bottom: 4rem

bottom-20

bottom: 5rem

bottom-24

bottom: 6rem

bottom-28

bottom: 7rem

bottom-32

bottom: 8rem

bottom-36

bottom: 9rem

bottom-40

bottom: 10rem

bottom-44

bottom: 11rem

bottom-48

bottom: 12rem

bottom-52

bottom: 13rem

bottom-56

bottom: 14rem

bottom-60

bottom: 15rem

bottom-64

bottom: 16rem

bottom-72

bottom: 18rem

bottom-80

bottom: 20rem

bottom-96

bottom: 24rem

bottom-auto

bottom: auto

bottom-full

bottom: 100%

left-0

left: 0

left-1

left: .25rem

left-2

left: .5rem

left-3

left: .75rem

left-4

left: 1rem

left-5

left: 1.25rem

left-6

left: 1.5rem

left-7

left: 1.75rem

left-8

left: 2rem

left-9

left: 2.25rem

left-10

left: 2.5rem

left-11

left: 2.75rem

left-12

left: 3rem

left-14

left: 3.5rem

left-16

left: 4rem

left-18

left: 4.5rem

left-20

left: 5rem

left-24

left: 6rem

left-28

left: 7rem

left-32

left: 8rem

left-36

left: 9rem

left-40

left: 10rem

left-44

left:11rem

left-48

left: 12rem

left-52

left: 13rem

left-56

left: 14rem

left-60

left: 15rem

left-64

left: 16rem

left-72

left: 18rem

left-80

left: 20rem

left-96

left: 24rem