CSS: Snippets

snippets.css

/**** definitions ****/
/* font-size units: em, ex, %, px, cm, mm, in, pt, pc, ch, rem, vh, vw, vmin, vmax */
/* em: relative unit based on computed value of font size of parent element. Child elements are always dependent 
  on their parent to set their font-size*/
/* rem: font size is dependent on the value of the root element */

/* box-sizing best practice - easier to change the box-sizing in plugins or other components that leverage other behavior  */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }


/**** 62.5% ****/
/* Modifies base font-size on body using a percentage, adjusting things so that 1em equals 10px, 
  instead of the default 16px; http://snook.ca/archives/html_and_css/font-size-with-rem */
html { font-size: 62.5%; }
body { font-size: 1.4rem; }   /* 14px */
h1 { font-size: 2.4rem; }     /* 24px */