My CSS boilerplate (2020)

CSS-boilerplate-2020

:root {
  --variableName: value;
}

header {}

main {}

section {
  margin: 0 auto; /* center the content */
  max-width: 1200px;
  padding: 2rem;
}

a          {color: ;}
a:visited  {color: ;}
a:hover    {color: ;}
a:active   {color: ;}

.list-style-none {
  list-style: none;
}

/****************************************
FLEXBOX styles
****************************************/

.flex-container {
  display: flex;
  flex-direction: column;
}

.flex-align-center {
  align-items: center;
}

.flex-item-1x {flex: 1;}
.flex-item-2x {flex: 2;}
.flex-item-3x {flex: 3;}
.flex-item-4x {flex: 4;}

/****************************************
Media Queries
****************************************/

@media all and (min-width: 1024px) {
  .flex-container {
    flex-direction: row;
  }
}