*Definition
This page describes all Structural Classes
Structural Classes Diagram
CSS Classes
/* ----------------------------------------------- STRUCTURE ----------------------------------------------- */
/* ----------------------- PADDING & MARGIN ----------------------- */
/* PADDING */
.pa-0{padding: 0}.pa-1{padding: 5px}.pa-2{padding: 10px}.pa-3{padding: 15px}
.pa-4{padding: 20px}.pa-5{padding: 25px}.pa-6{padding: 30px}.pa-7{padding: 35px}
.pa-8{padding: 40px}.pa-100{padding: 100px}.pa-150{padding: 150px}.pa-200{padding: 200px}
/* HORIZONTAL */
.px-0{padding-left: 0; padding-right: 0}.px-1{padding-left: 5px; padding-right: 5px}
.px-2{padding-left: 10px; padding-right: 10px}.px-3{padding-left: 15px; padding-right: 15px}
.px-4{padding-left: 20px; padding-right: 20px}.px-5{padding-left: 25px; padding-right: 25px}
.px-6{padding-left: 30px; padding-right: 30px}.px-7{padding-left: 35px; padding-right: 35px}
.px-8{padding-left: 40px; padding-right: 40px}.px-100{padding-left: 100px; padding-right: 100px}
.px-150{padding-left: 150px; padding-right: 150px}.px-200{padding-left: 200px; padding-right: 200px}
.pl-0{padding-left: 0}.pl-1{padding-left: 5px}.pl-2{padding-left: 10px}.pl-3{padding-left: 15px}
.pl-4{padding-left: 20px}.pl-5{padding-left: 25px}.pl-6{padding-left: 30px}.pl-7{padding-left: 35px}
.pl-8{padding-left: 40px}.pl-100{padding-left: 100px}.pl-150{padding-left: 150px}.pl-200{padding-left: 200px}
.pr-0{padding-right: 0}.pr-1{padding-right: 5px}.pr-2{padding-right: 10px}.pr-3{padding-right: 15px}
.pr-4{padding-right: 20px}.pr-5{padding-right: 25px}.pr-6{padding-right: 30px}.pr-7{padding-right: 35px}
.pr-8{padding-right: 40px}.pr-100{padding-right: 100px}.pr-200{padding-right: 150px}.pr-150{padding-right: 200px}
/* VERTICAL */
.py-0{padding-top: 0; padding-bottom: 0}.py-1{padding-top: 5px; padding-bottom: 5px}
.py-2{padding-top: 10px; padding-bottom: 10px}.py-3{padding-top: 15px; padding-bottom: 15px}
.py-4{padding-top: 20px; padding-bottom: 20px}.py-5{padding-top: 25px; padding-bottom: 25px}
.py-6{padding-top: 30px; padding-bottom: 30px}.py-7{padding-top: 35px; padding-bottom: 35px}
.py-8{padding-top: 40px; padding-bottom: 40px}.py-100{padding-top: 100px; padding-bottom: 100px}
.py-200{padding-top: 200px; padding-bottom: 200px}.py-150{padding-top: 150px; padding-bottom: 150px}
.pt-0{padding-top: 0}.pt-1{padding-top: 5px}.pt-2{padding-top: 10px}.pt-3{padding-top: 15px}
.pt-4{padding-top: 20px}.pt-5{padding-top: 25px}.pt-6{padding-top: 30px}.pt-7{padding-top: 35px}
.pt-8{padding-top: 40px}.pt-100{padding-top: 100px}.pt-200{padding-top: 200px}.pt-150{padding-top: 150px}
.pb-0{padding-bottom: 0}.pb-1{padding-bottom: 5px}.pb-2{padding-bottom: 10px}.pb-3{padding-bottom: 15px}
.pb-4{padding-bottom: 20px}.pb-5{padding-bottom: 25px}.pb-6{padding-bottom: 30px}.pb-7{padding-bottom: 35px}
.pb-8{padding-bottom: 40px}.pb-100{padding-bottom: 100px}.pb-200{padding-bottom: 200px}.pb-150{padding-bottom: 150px}
/* MARGIN */
.ma-0{margin: 0}.ma-1{margin: 5px}.ma-2{margin: 10px}.ma-3{margin: 15px}
.ma-4{margin: 20px}.ma-5{margin: 25px}.ma-6{margin: 30px}.ma-7{margin: 35px}
.ma-8{margin: 40px}.ma-100{margin: 100px}.ma-150{margin: 150px}.ma-200{margin: 200px}
.ma-0{margin: 0}.ma-1{margin: 5px}.ma-2{margin: 10px}.ma-3{margin: 15px}
.ma-4{margin: 20px}.ma-5{margin: 25px}.ma-6{margin: 30px}.ma-7{margin: 35px}
.ma-8{margin: 40px}.ma-100{margin: 100px}.ma-150{margin: 150px}.ma-200{margin: 200px}
/* HORIZONTAL */
.mx-0{margin-left: 0; margin-right: 0}.mx-1{margin-left: 5px; margin-right: 5px}
.mx-2{margin-left: 10px; margin-right: 10px}.mx-3{margin-left: 15px; margin-right: 15px}
.mx-4{margin-left: 20px; margin-right: 20px}.mx-5{margin-left: 25px; margin-right: 25px}
.mx-6{margin-left: 30px; margin-right: 30px}.mx-7{margin-left: 35px; margin-right: 35px}
.mx-8{margin-left: 40px; margin-right: 40px}.mx-100{margin-left: 100px; margin-right: 100px}
.mx-150{margin-left: 150px; margin-right: 150px}.mx-200{margin-left: 200px; margin-right: 200px}
.ml-0{margin-left: 0}.ml-1{margin-left: 5px}.ml-2{margin-left: 10px}.ml-3{margin-left: 15px}
.ml-4{margin-left: 20px}.ml-5{margin-left: 25px}.ml-6{margin-left: 30px}.ml-7{margin-left: 35px}
.ml-8{margin-left: 40px}.ml-100{margin-left: 100px}.ml-150{margin-left: 150px}.ml-200{margin-left: 200px}
.mr-0{margin-right: 0}.mr-1{margin-right: 5px}.mr-2{margin-right: 10px}.mr-3{margin-right: 15px}
.mr-4{margin-right: 20px}.mr-5{margin-right: 25px}.mr-6{margin-right: 30px}.mr-7{margin-right: 35px}
.mr-8{margin-right: 40px}.mr-100{margin-right: 100px}.mr-200{margin-right: 150px}.mr-150{margin-right: 200px}
/* VERTICAL */
.my-0{margin-top: 0; margin-bottom: 0}.my-1{margin-top: 5px; margin-bottom: 5px}
.my-2{margin-top: 10px; margin-bottom: 10px}.my-3{margin-top: 15px; margin-bottom: 15px}
.my-4{margin-top: 20px; margin-bottom: 20px}.my-5{margin-top: 25px; margin-bottom: 25px}
.my-6{margin-top: 30px; margin-bottom: 30px}.my-7{margin-top: 35px; margin-bottom: 35px}
.my-8{margin-top: 40px; margin-bottom: 40px}.my-100{margin-top: 100px; margin-bottom: 100px}
.my-200{margin-top: 200px; margin-bottom: 200px}.my-150{margin-top: 150px; margin-bottom: 150px}
.mt-0{margin-top: 0}.mt-1{margin-top: 5px}.mt-2{margin-top: 10px}.mt-3{margin-top: 15px}
.mt-4{margin-top: 20px}.mt-5{margin-top: 25px}.mt-6{margin-top: 30px}.mt-7{margin-top: 35px}
.mt-8{margin-top: 40px}.mt-100{margin-top: 100px}.mt-200{margin-top: 200px}.mt-150{margin-top: 150px}
.mb-0{margin-bottom: 0}.mb-1{margin-bottom: 5px}.mb-2{margin-bottom: 10px}.mb-3{margin-bottom: 15px}
.mb-4{margin-bottom: 20px}.mb-5{margin-bottom: 25px}.mb-6{margin-bottom: 30px}.mb-7{margin-bottom: 35px}
.mb-8{margin-bottom: 40px}.mb-100{margin-bottom: 100px}.mb-200{margin-bottom: 200px}.mb-150{margin-bottom: 150px}
/* DISPLAY */
.invisible{visibility: hidden}.hidden{visibility: hidden}.block{display: block}.none{display: none}
.noverflow{overflow: hidden}.noverflow-x{overflow-x: hidden}.noverflow-y{overflow-y: hidden}
.autoverflow{overflow: auto}.autoverflow-x{overflow-x: auto}.autoverflow-y{overflow-y: auto}
/* FLEX */
.flex{display: flex }
.flex-1{flex: 1 }.flex-2{flex: 2 }.flex-3{flex: 3 }
.flex-center{display: flex; justify-content: center; align-items: center }
.flex-row{display: flex; flex-direction: row; justify-content: center; align-items: center }
.flex-center{display: flex; justify-content: center; align-items: center }
.flex-col{display: flex; flex-direction: column; justify-content: center; align-items: center }
.flex-row-r{display: flex; flex-direction: row-reverse; justify-content: center; align-items: center }
.flex-col-r{display: flex; flex-direction: column-reverse; justify-content: center; align-items: center }
/* FLEX ALIGN */
.flex-wrap{display: flex; flex-wrap: wrap; justify-content: center; align-items: center }
.flex-between{display: flex; justify-content: space-between; align-items: center }
.flex-around{display: flex; justify-content: space-around; align-items: center }
.flex-align-start{display: flex; align-items: flex-start !important} /* SPECIAL SPECIFIC */
.flex-align-end{display: flex; align-items: flex-end !important}
.flex-align-stretch{display: flex; align-items: stretch !important}
.flex-justify-start{display: flex; justify-content: flex-start !important}
.flex-justify-end{display: flex; justify-content: flex-end !important}
.flex-justify-center{display: flex; justify-content: center !important}
.flex-justify-stretch{display: flex; justify-content: stretch !important}
.flex-justify-between{display: flex; justify-content: space-between !important}
.flex-justify-around{display: flex; justify-content: space-around !important}
.flex-align-self-start{align-self: flex-start !important}
.flex-align-self-center{align-self: center !important}
.flex-align-self-end{align-self: flex-end !important}
/* FLEX GAP */
.gap-1{gap: 5px }.gap-2{gap: 10px }.gap-3{gap: 15px }.gap-4{gap: 20px }.gap-5{gap: 25px }
.gap-6{gap: 30px }.gap-7{gap: 35px }.gap-8{gap: 40px }.gap-50{gap: 50px }.gap-100{gap: 100px }
/* ------------------------------------------ TEXT ------------------------------------------ */
/* FAMILY */
.tx-sans {font-family: 'Open Sans', sans-serif}.tx-roman {font-family: 'Times New Roman', Times, serif}
/* SIZE */
.tx-xxs {font-size: 0.35rem}.tx-xs {font-size: 0.55rem}.tx-xsm {font-size: 0.725rem}.tx-sm {font-size: 0.845rem}
.tx-smd {font-size: 0.92rem}.tx-md {font-size: 1.07rem}.tx-mdl {font-size: 1.13rem}.tx-lg {font-size: 1.4rem}
.tx-lgx {font-size: 1.68rem}.tx-lx {font-size: 2.4rem}.tx-xl {font-size: 3rem}
.tx-xxl {font-size: 3.4rem}.tx-xxxl {font-size: 4.5rem}
/* WEIGHT */
.tx-bold-2 {font-weight: 200}.tx-bold-3 {font-weight: 300}.tx-bold-4 {font-weight: 400}.tx-bold-5 {font-weight: 500}
.tx-bold-6 {font-weight: 600}.tx-bold-7 {font-weight: 700}.tx-bold-8 {font-weight: 800}
.tx-bold-9 {font-weight: 900}.tx-bold {font-weight: bold}
/* COLOR */
.tx-white {color: white}.tx-black {color: black}.tx-gray{color: gray}
.tx-red {color: red}.tx-green {color: green}.tx-blue {color: blue}
.tx-red-50 {color: #ff000077}.tx-green-50 {color: #00ff0077}.tx-blue-50 {color: #0000ff77}
.tx-red-25 {color: #ff000044}.tx-green-25 {color: #00ff0044}.tx-blue-25 {color: #0000ff44}
.tx-red-75 {color: #ff0000aa}.tx-green-75 {color: #00ff00aa}.tx-blue-75 {color: #0000ffaa}
/* ALIGN */
.tx-center {text-align: center}.tx-end, .tx-right {text-align: right}.tx-start, .tx-left {text-align: left}
/* LETTERSPACING */
.tx-lh-100 {line-height: 1}.tx-lh-150 {line-height: 1.5}.tx-lh-200 {line-height: 2}
.tx-ls-1 {letter-spacing: 1px}.tx-ls-2 {letter-spacing: 2px}.tx-ls-3 {letter-spacing: 3px}
.tx-ls-5 {letter-spacing: 5px}.tx-ls-6 {letter-spacing: 6px}.tx-ls-8 {letter-spacing: 8px}
.tx-ls-10 {letter-spacing: 10px}.tx-ls-15 {letter-spacing: 15px}.tx-ls-25 {letter-spacing: 25px}
/* WORD SPACING */
.word-s-1 {word-spacing: 1px}.word-s-2 {word-spacing: 2px}.word-s-3 {word-spacing: 3px}
.word-s-5 {word-spacing: 5px}.word-s-10 {word-spacing: 10px}.word-s-20 {word-spacing: 20px}
/* STYLE */
.tx-italic {font-style: italic}.tx-i {font-style: italic}
.tx-deco, .tx-deco *, .underline, .underline *{text-decoration: underline #777}
.tx.size-unset{font-size: unset}
.linethrough{text-decoration: line-through }.linethru{text-decoration: line-through }
.nodeco{text-decoration: none }.nowrap {white-space: nowrap}
.nodeco-children, .nodeco-children *{text-decoration: none !important }
.ellipsis{text-overflow: ellipsis}
/* SHADOW */
.custom-shadow { --tx-shadow-x: 3px; --tx-shadow-y: 3px; }
.tx-shadow-custom { --tx-shadow-x: 1px; --tx-shadow-y: 1px;
text-shadow: var(--tx-shadow-x) var(--tx-shadow-y) #00000077;
}
.tx-shadow-1{text-shadow: 1px 1px 1px #00000077}.tx-shadow-2{text-shadow: 1px 1px 1px #000000aa}
.tx-shadow-3{text-shadow: 1px 1px 1px #000000ff}.tx-shadow-4{text-shadow: 1px 1px 1px #000000ff}
.tx-shadow-5{text-shadow: 1px 1px 1px #000000ff}
.tx-shadow-1-1-sm{text-shadow: 1px 1px 1px #00000077}.tx-shadow-1-2-sm{text-shadow: 1px 2px 1px #00000077}
.tx-shadow-1-3-sm{text-shadow: 1px 3px 1px #00000077}.tx-shadow-2-1-sm{text-shadow: 2px 1px 1px #000000aa}
.tx-shadow-2-2-sm{text-shadow: 2px 2px 1px #000000aa}.tx-shadow-2-3-sm{text-shadow: 2px 3px 1px #000000aa}
Diagram Script
graph LR;
subgraph Structure
subgraph Spacing
padding --> padding_init
padding_init(".p?")
padding_init --> padding_types("`
a-? | x-? | y-? | t-? | b-? | l-? | r-?
`")
padding_types --> padding_variations("0 | 1 | ... | 8 | 100 | 1500 | 200")
margin --> margin_init
margin_init(".m?")
margin_init --> margin_types("`
a-? | x-? | y-? | t-? | b-? | l-? | r-?
`")
margin_types --> margin_variations("`
0 | 1 | ... | 8 | 100 | 1500 | 200
`")
style padding fill:#ffffff
style margin fill:#ffffff
style padding_variations fill:#ffccaa
style margin_variations fill:#ffccaa
end
subgraph Display
display --> display_types
display_types(".block | .flex | .none")
display_types -->|flex| display_types_flex("flex-?")
display_types_flex -->|direction| display_flex_direction("`row | col | row-r | col-r`")
display_types_flex -->|scheme| display_flex_scheme("`center | wrap | between | around`")
display_types_flex -->|alignment| display_flex_alignment("`align | justify`")
display_flex_alignment -->|align| display_flex_alignment_variations_a("start | end | stretch")
display_flex_alignment -->|justify| display_flex_alignment_variations_b("start | end | between | around")
display_types_flex -->|gap| display_gap("`1 | 2 | ... | 8 | 50`")
display_types_flex -->|basis| display_basis("`1 | 2 | 3`")
style display fill:#ffffff
style display_gap fill:#ffccaa
style display_basis fill:#ffccaa
end
subgraph Text
text --> text_init
text_init -->|font family| text_types_fontfamily("sans | roman")
text_init(".tx-?") -->|font size| text_types_size("`
xxs | xs | xsm |
sm | smd |
md | mdl | lg | lgx | lx |
xl | xxl | xxxl
`")
text_init -->|"weight"| text_types_bold("bold") --> text_types_bold_variations("2 | 3 | ... | 9")
text_init -->|"align"| text_types_align("center | end | start")
text_init -->|"spacing"| text_types_spacing("ls-? | ws-?")
text_types_spacing --> text_types_spacing_variations("1 | 2 | ... | 8 | 10 | 15 | 25")
text_init -->|"lineheight"| text_types_lineheight("lineheight") --> text_types_lineheight_variations("100 | 150 | 200")
text_init -->|"color"| text_types_color("red | white | black") --> text_types_color_variations("25 | 50 | 75")
text_init -->|"shadow"| text_types_shadow("shadow") --> text_types_shadow_variations("1 | 2 | ... | 5")
style text fill:#ffffff
style text_types_bold_variations fill:#ffccaa
style text_types_color_variations fill:#ffccaa
style text_types_lineheight_variations fill:#ffccaa
style text_types_spacing_variations fill:#ffccaa
style text_types_shadow_variations fill:#ffccaa
end
style Structure fill:#f9f9f9
endLast updated
