nimobeeren/2IO80

Redesigned Study Guide for Eindhoven University of Technology

Resources

• developer.mozilla.org (documentation about html, css and js)
• susydocs.oddbird.net (susy documentation)
• sass-lang.com/documentation (sass documentation)
• getbem.com (BEM)
• html5doctor.com (expl. when you should use which html element)
• css-tricks.com
• caniuse.com (database of browser support for specific feature)
• the-echoplex.net/flexyboxes (Flexbox generator)

Specific articles

• Full width bars
• SVG symbols
• susy
• box-sizing
• using rem

Learning resources

• learn every day css, scss or js within 5 minutes

Remarks

• define colors in the style.scss with the naming convention $color-colorName-modifier (example: $color-grey-light)
• try to avoid z-index: -1

Last but not least

• Don't use id's within stylesheets, use them to link elements within html
• Don't style elements without using a class (on it self or parent) (excluding base styles)
• Don't set a font-size in pixels, use rem (example: font-size: rem(14px);)
• Don't set offsets with margin or padding, try one of beneath
  • float
  • vertical-align
  • display: table
  • display: flexbox