CSS

selector {
  declaration;
  property: value;
}

(The whole thing is a rule/ruleset)

https://twitter.com/chriseppstein/status/1100115119437111296

Making sure a container with floated blocks in it expands to fit them

• Old style: “clear: both” or .clearfix
• New style: “overflow: hidden; zoom: 1”

Wrapping only long lines, but making others break by word:

white-space: pre-wrap; // whitespace and newline preserved, line breaks added to wrap lines white-space: pre-line; // newline characters are preserved, but other whitespace is collapsed, and line breaks are added to wrap lines overflow-wrap: break-word; // To prevent overflow, normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line. word-wrap: break-word; // alias for overflow-wrap, not sure which browsers support which hyphens: auto; // browser hyphenates where necessary

Background Image

Centered:

background-position: center;
background-repeat: no-repeat;

Cover:

background-position: center;
background-repeat: no-repeat;
background-size: cover;

Fit:

background-position: center;
background-repeat: no-repeat;
background-size: contain;

Media Query

@media only screen and (min-width: 600px) {
  
}

Mobile-first means the larger size (min-width) is the override

Unstyled Button

/* Drawn from points on https://css-tricks.com/overriding-default-button-styles/ */
.unstyled-button {
  background: none;
  border: none;
  padding: 0;
  text-align: left;

  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  overflow: visible;
  text-transform: none;
  -webkit-appearance: button;
}

Full Height

• height: 100% - percentage of containing block’s height
• height: 100vh - 100% of viewport’s height (does not exclude header or footer)
• height: calc(100vh - 65px) - subtract header