Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Cssorama/cssorama.github.io

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

17 Commits

Repository files navigation

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

AltStyle によって変換されたページ (->オリジナル) /