Structure

Structural and text related classes

This section contains a variety of styles related to the structural stage of elements within a webpage. The code is divided into three main sections: "SPACING", "DISPLAY" and "TEXT".

Classes

• Structural Classes

  • Spacing

  • Display

  • Text

Under the "SPACING" module, there are several classes related to the space around an element's content. These classes include:

• /* 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}
  . . .
  /* 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}
  . . .

Additionally, there are several classes related to visibility and structure, which set the layout of the children of an element. These classes include:

• /* 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}
  . . .
  /* 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 GAP */
  .gap-1{gap: 5px }.gap-2{gap: 10px }.gap-3{gap: 15px }.gap-4{gap: 20px }.gap-5{gap: 25px }
  . . .

Finally, there are classes related the most common font style properties. These classes include:

• /* 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}
  . . .