Cascading Style Sheets

monica.css

From Monica

* {box-sizing: border-box}
[hidden] {display: none !important}
[disabled] {pointer-events:none; opacity: 0.3}
.horizontal {display: flex; flex-direction: row; justify-content: space-between}
.vertical {display: flex; flex-direction: column}
.center {justify-content: center; align-items: center}
.flex {flex: 1}
html {
  --spacing-xs: 8px;
  --spacing: 24px;
  --spacing-s: 12px;
  --spacing-m: 36px;
}

then

<div class="center">Middle</div>

From here

* {
    border: 2px dotted black;
}

This property simply outlines all elements on the current page in a dotted border. By placing a border on every HTML element you can instantly see how overly complex or ugly your structure might be under the hood.