css

resources

• learn css flexbox in 20 min vid

see Tailwind CSS

core properties

box model

• margin
  • border
    • padding
      • content

position

• absolute
  • places an element relative to its nearest positioned ancestor
  • scrolls with page content
• relative
• fixed
  • places an element relative to the viewport (the browser window)
  • stationary during scrolling
• sticky

flexbox

• note, don’t use margin … ? use gap instead? https://theodorusclarence.com/blog/btb-flex-mental-model
• layout model for 1D layout - rows/columns

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

grid

• 2D layout for complex designs (page, cards, dashboards)
• usually for skeleton structure

responsive

• @media
• mobile-first

animation

button {
  transition: background-color 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal {
  animation: fadeIn 0.5s ease-out;
}

display

• block
• inline
• inline-block
• flex
• grid layout control, responsive wrapping

Units

absolute

• px, cm, in relative
• %, em, rem, vw, vh

scroll

.container {
  overflow: auto; /* scrolls if needed */
  max-height: 300px;
}