*Definition

This page describes all Creational Classes

Creational Classes Diagram

CSS Classes

/* ----------------------------------------------- CREATE ----------------------------------------------- */
/* ----------------------- POSITION ----------------------- */
/* POS */
.pos-rel{position: relative}
.pos-abs{position: absolute}.pos-fixed{position: fixed}.pos-fix{position: fixed}
/* EDGE ALIGN */
.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%}
.top-25p{top: 25%}.left-25p{left: 25%}.right-25p{right: 25%}.bottom-25p{bottom: 25%}
.top-50p{top: 50%}.left-50p{left: 50%}.right-50p{right: 50%}.bottom-50p{bottom: 50%}
.top-75p{top: 75%}.left-75p{left: 75%}.right-75p{right: 75%}.bottom-75p{bottom: 75%}
.top-80p{top: 80%}.left-80p{left: 80%}.right-80p{right: 80%}.bottom-80p{bottom: 80%}
/* 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}
.z-100{z-index: 100}.z-200{z-index: 200}.z-300{z-index: 300}.z-400{z-index: 400}
.z-500{z-index: 500}.z-600{z-index: 600}.z-700{z-index: 700}.z-800{z-index: 800}
.z-999{z-index: 999}.z-1000{z-index: 1000}.z-1001{z-index: 1001}
.z--1{z-index: -1}.z--2{z-index: -2}.z--3{z-index: -3}.z--5{z-index: -5} 
.z--10{z-index: -10}.z--50{z-index: -50}
.z--100{z-index: -100}.z--200{z-index: -200}.z--300{z-index: -300}.z--400{z-index: -400}
.z--500{z-index: -500}.z--600{z-index: -600}.z--700{z-index: -700}.z--800{z-index: -800}
.z--999{z-index: -999}.z--1000{z-index: -1000}.z--1001{z-index: -1001}
/* 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%)}
.translate-x--75 {transform: translateX(-75%)}.translate-x-75 {transform: translateX(75%)}
.translate-x--100 {transform: translateX(-100%)}.translate-x-100 {transform: translateX(100%)}
.translate-y--25 {transform: translateY(-25%)}.translate-y-25 {transform: translateY(25%)}
.translate-y--50 {transform: translateY(-50%)}.translate-y-50 {transform: translateY(50%)}
.translate-y--75 {transform: translateY(-75%)}.translate-y-75 {transform: translateY(75%)}
.translate-y--100 {transform: translateY(-100%)}.translate-y-100 {transform: translateY(100%)}
.translate-xy--25 {transform: translateY(-25%) translateX(-25%)}
.translate-xy-25 {transform: translateY(25%) translateX(25%)}
.translate-xy--50 {transform: translateY(-50%) translateX(-50%)}
.translate-xy-50 {transform: translateY(50%) translateX(50%)}
.translate-xy--75 {transform: translateY(-75%) translateX(-75%)}
.translate-xy-75 {transform: translateY(75%) translateX(75%)}
.translate-xy--100 {transform: translateY(-100%) translateX(-100%)}
.translate-xy-100 {transform: translateY(100%) translateX(100%)}



/* ------------------------------------------ WIDTH & HEIGHT ------------------------------------------ */
/* PERCENT */
.w-5{width: 5%}.w-10{width: 10%}.w-20{width: 20%}.w-25{width: 25%}.w-30{width: 30%}.w-33{width: 33%}
.w-40{width: 40%}.w-50{width: 50%}.w-60{width: 60%}.w-70{width: 70%}.w-80{width: 80%}
.w-90{width: 90%}.w-95{width: 95%}.w-100{width: 100%}.w-100vw{width: 100vw}
/* PIXEL */
.w-50px{width: 50px}.w-80px{width: 80px}.w-100px{width: 100px}.w-120px{width: 120px}
.w-150px{width: 150px}.w-200px{width: 200px}.w-250px{width: 250px}.w-220px{width: 220px}
.w-300px{width: 300px}.w-400px{width: 400px}.w-450px{width: 450px}.w-500px{width: 500px}
.w-600px{width: 600px}.w-650px{width: 650px}.w-700px{width: 700px}.w-1080px{width: 1080px}
/* MAX PERCENT/PIXEL */
.w-max-90{max-width: 90%}.w-max-95{max-width: 95%}.w-max-100{max-width: 100%}
.w-max-80vw{max-width: 80vw}.w-max-100vw{max-width: 100vw}.w-max-100vh{max-width: 100vh}
.w-max-50px{max-width: 50px}.w-max-80px{max-width: 80px}.w-max-100px{max-width: 100px}
.w-max-120px{max-width: 120px}.w-max-150px{max-width: 150px}.w-max-200px{max-width: 200px}
.w-max-250px{max-width: 250px}.w-max-220px{max-width: 220px}.w-max-300px{max-width: 300px}
.w-max-400px{max-width: 400px}.w-max-450px{max-width: 450px}.w-max-500px{max-width: 500px}
.w-max-600px{max-width: 600px}.w-max-650px{max-width: 650px}.w-max-700px{max-width: 700px}
.w-max-1080px{max-width: 1080px}
/* MIN PERCENT/PIXEL */
.w-min-90{min-width: 90%}.w-min-95{min-width: 95%}.w-min-100{min-width: 100%}
.w-min-100vw{min-width: 100vw}.w-min-100vh{min-width: 100vh}
.w-min-50px{min-width: 50px}.w-min-80px{min-width: 80px}.w-min-100px{min-width: 100px}
.w-min-120px{min-width: 120px}.w-min-150px{min-width: 150px}.w-min-200px{min-width: 200px}
.w-min-250px{min-width: 250px}.w-min-220px{min-width: 220px}.w-min-300px{min-width: 300px}
.w-min-400px{min-width: 400px}.w-min-450px{min-width: 450px}.w-min-500px{min-width: 500px}
.w-min-600px{min-width: 600px}.w-min-650px{min-width: 650px}.w-min-700px{min-width: 700px}
.w-min-1080px{min-width: 1080px}
/* PERCENT */
.h-5{height: 5%}.h-10{height: 10%}.h-20{height: 20%}.h-25{height: 25%}.h-30{height: 30%}.h-33{height: 33%}
.h-40{height: 40%}.h-50{height: 50%}.h-60{height: 60%}.h-70{height: 70%}.h-80{height: 80%}
.h-90{height: 90%}.h-95{height: 95%}.h-100{height: 100%}.h-100vh{height: 100vh}
/* PIXEL */
.h-50px{height: 50px}.h-80px{height: 80px}.h-100px{height: 100px}.h-120px{height: 120px}
.h-150px{height: 150px}.h-200px{height: 200px}.h-250px{height: 250px}.h-220px{height: 220px}
.h-300px{height: 300px}.h-400px{height: 400px}.h-450px{height: 450px}.h-500px{height: 500px}
.h-600px{height: 600px}.h-650px{height: 650px}.h-700px{height: 700px}.h-1080px{height: 1080px}
/* MAX PERCENT/PIXEL */
.h-max-90{max-height: 90%}.h-max-95{max-height: 95%}.h-max-100{max-height: 100%}
.h-max-80vh{max-height: 80vh}.h-max-100vh{max-height: 100vh}.h-max-100vw{max-height: 100vw}
.h-max-50px{max-height: 50px}.h-max-80px{max-height: 80px}.h-max-100px{max-height: 100px}
.h-max-120px{max-height: 120px}.h-max-150px{max-height: 150px}.h-max-200px{max-height: 200px}
.h-max-250px{max-height: 250px}.h-max-220px{max-height: 220px}.h-max-300px{max-height: 300px}
.h-max-400px{max-height: 400px}.h-max-450px{max-height: 450px}.h-max-500px{max-height: 500px}
.h-max-600px{max-height: 600px}.h-max-650px{max-height: 650px}.h-max-700px{max-height: 700px}
.h-max-1080px{max-height: 1080px}
/* MIN PERCENT/PIXEL */
.h-min-90{min-height: 90%}.h-min-95{min-height: 95%}.h-min-100{min-height: 100%}
.h-min-100vh{min-height: 100vh}.h-min-100vw{min-height: 100vw}
.h-min-95vh{min-height: 95vh}.h-min-95vw{min-height: 95vw}
.h-min-90vh{min-height: 90vh}.h-min-90vw{min-height: 90vw}
.h-min-50vh{min-height: 50vh}.h-min-50vw{min-height: 50vw}
.h-min-30vh{min-height: 30vh}.h-min-30vw{min-height: 30vw}
.h-min-50px{min-height: 50px}.h-min-80px{min-height: 80px}.h-min-100px{min-height: 100px}
.h-min-120px{min-height: 120px}.h-min-150px{min-height: 150px}.h-min-200px{min-height: 200px}
.h-min-250px{min-height: 250px}.h-min-220px{min-height: 220px}.h-min-300px{min-height: 300px}
.h-min-400px{min-height: 400px}.h-min-450px{min-height: 450px}.h-min-500px{min-height: 500px}
.h-min-600px{min-height: 600px}.h-min-650px{min-height: 650px}.h-min-700px{min-height: 700px}
.h-min-1080px{min-height: 1080px}

Diagram Script

graph LR;
    subgraph Create
        subgraph Position
            position --> position_init
            position_init(.pos-?) --> position_types("rel | abs | fix | fixed")
            edge(edge) --> edge_types(".top-? | .bottom-? | .left-? | .right-?")
            edge_types --> edge_variations("0 | 25p | 50p | 75p")
            translate --> translate_init
            translate_init(.translate-?) --> translate_types("x-? | x--? | y-? | y--?")
            translate_types --> translate_variations("`25 | 50 | 75 | 100 | 150 | 200 | 250`")

            style position fill:#ffffff
            style edge fill:#ffffff
            style zindex fill:#ffffff
            style translate fill:#ffffff
            style edge_variations fill:#ffccaa
            style translate_variations fill:#ffccaa            
        end

        subgraph Size
            size --> size_init
            size_init(".w-? | .h-?") --> size_types("? | min-? | max-?")
            size_types -->|percent| size_types_percent("`
                5 | 10 | 20 | 25 | 30 | 40 | ... | 90 | 95 | 100
            `")
            size_types -->|pixel| size_types_pixel            
            size_types_pixel("`
                50 | 80 | 100 | 120 | 150 | 200 | 250 | 220 | 300 | 400 | 450| 500 | 600 | 650 | 700 | 1080
            `")
            size_types_pixel --> size_types_pixel_types("px")
            size_types -->|viewport| size_types_viewport("80 | 95 | 90 | 100")
            size_types_viewport --> size_types_viewport_types("vw | vh")

            style size fill:#ffffff
            style size_types_percent fill:#ffccaa            
            style size_types_pixel fill:#ffccaa            
            style size_types_viewport fill:#ffccaa            
        end

        subgraph Depth
            zindex --> zindex_init
            zindex_init(.z-?) --> zindex_types("? | -?")
            zindex_types --> zindex_variations("`
                1 | 2 | 3 | 5 | 10 | 50 | 100 | 200 | ... | 900 | 999 | 1000 | 1001
            `")
            style zindex_variations fill:#ffccaa            
        end
        style Create fill:#f9f9f9
    end