Create

Object creating and location classes

This section contains a variety of styles related to the creational stage of elements within a webpage. The code is divided into three main sections: "POSITION", "SIZE" and "INDEX".

Classes

• Creational Classes

  • Position

  • Size

  • Index

Under the "POSITION" module, there are several classes related to positioning. These classes include:

• .pos-rel{position: relative}
  .pos-abs{position: absolute}.pos-fixed{position: fixed}.pos-fix{position: fixed}

Additionally, there are several classes related to edge alignment, which set the position of an element based on its distance from the top, left, right, or bottom edges of its parent element. These classes include:

• .top-0{top: 0}.left-0{left: 0}.right-0{right: 0}.bottom-0{bottom: 0}
  .top-20p{top: 20%}.left-20p{left: 20%}.right-20p{right: 20%}.bottom-20p{bottom: 20%}
  . . .

Finally, there are several classes related to z-index and translation. These classes include:

• /* Z-INDEX */
  .z-1{z-index: 1}.z-2{z-index: 2}.z-3{z-index: 3}.z-5{z-index: 5}.z-8{z-index: 8}
  .z-10{z-index: 10}.z-20{z-index: 20}.z-30{z-index: 30}.z-50{z-index: 50}
  . . .
  /* TRANSLATE */
  .translate-x--25 {transform: translateX(-25%)}.translate-x-25 {transform: translateX(25%)}
  .translate-x--50 {transform: translateX(-50%)}.translate-x-50 {transform: translateX(50%)}
  . . .