Less than 10kb gziped and do the job

WOW this use of attr() function in CSS ♥

$gridGap: 2rem;
$minColWidth: 15rem;

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax($minColWidth, 1fr));
  grid-gap: 2rem;

  & + .grid {
    margin-top: $gridGap;
  }
}

• Icon + Text Button
• Icon Styling for Icon + Text
• Icon-Only Buttons

Can be useful at any time !

Flexbox

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}

// Optional
main {
  margin: 0 auto;
  // or: align-self: center
  max-width: 80ch;
}

Grid

body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

// Optional
main {
  margin: 0 auto;
  max-width: 80ch;
}

Reusable svg shapes

A list of known issues with flexbox and how to solve them if possible

Some css effects on images with code. It is great to have some examples !