Intermediate to Advanced CSS for Practical Peoples

Talk

Intro Slide

Introduce myself

People I’m stealing a lot from

Lullabot slide

Goal

Summary of entire talk

ToC for next section

Foreword

  • You don’t have to memorize CSS to be great at it
  • Remember the concepts and tools at your disposal
  • Make excuses to use, practice, or teach CSS
  • Read MDN docs, google “css how to … “ before resorting to JS layout/animation

Units

  • px
  • 1px isn’t really 1 pixel anymore
  • With the advent of high density displays (e.g. retina screens) to avoid users needing a magnifying glass to read web sites, 1px is now based on how dense the screen is. Today, HDD displays tend to be 1.5x, 2x, or 4x.
  • I avoid pixels like the plague, rem’s 4 life
  • %
  • But % of what? (more on this later)
  • Text based units
  • em
  • NOT the width of an em dash
  • 1em === font-size of current element
  • I em’s, but they can be tricky
  • rem
  • Just like em, but it’s the font size of the html element
  • I do not recommend changing the font size of html, if you want, change the size of body to effect the whole document
  • I highly recommend using rem instead of pixels, it is more mental overhead, but is sturdier IMO
  • ex
  • width of a lower case x in the font that renders 😲 
  • ch
  • width of the number 0 in the font that renders 😲 
  • vw
  • vh
  • vmin
  • vmax
  • Technically: mm, cm, in, pt, pc (all physical units probably best used in physical medium, e.g. print stylesheet)

Media queries

  • Usage:
@media screen {
  /* Styles */
}