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

• layout model for 1D layout - rows/columns
  • flex items can wrap, but each line behaves as its own flex container, affecting alignment
  • item sizing happens on items themselves
• note, don’t use margin … ? use gap instead? https://theodorusclarence.com/blog/btb-flex-mental-model

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

basic concepts

• main axis - defined by flex-direction
  • row
  • row-reverse (rows make main axis run along inline direction)
  • column
  • column-reverse (columns make main axis run in block direction)
• cross axis - perpendicular to main
• interestingly, flexbox isn’t dependent on any writing mode
• think in terms of start and end edges

flex container

• container - set area display to flex - children become flex items
  • control container itself via ‘inline-flex’ or ‘block flex’

grid

• 2D layout for complex designs (page, cards, dashboards)
• usually for skeleton structure
• item sizing happens on container
• https://tailwindcss.com/docs/grid-template-columns
• https://css-tricks.com/snippets/css/complete-guide-grid/#fr-unit

rule

• if you are setting widths on flex items to make diff rows line up together, use grid

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;
}