are hefty. Normalize is ~7KB. ▸ They support a lot of browsers no one cares about. ▸ Lots of properties you’re likely to override. ▸ Handle a lot of things no one cares about, e.g. <kbd> ▸ Another layer of styles in your CSS inspector.
NEED IN A RESET? ▸ Something versioned. We discover new browser quirks all the time! ▸ Lightweight. ▸ Doesn’t get in the way of your base styles (nothing super speciﬁc). ▸ Doesn’t repeat itself. Is efﬁcient with selectors. ▸ Well documented. But nuke those comments for production!
HAVE… ▸ A base font size ▸ A base line-height ▸ Preset sizes for headings and other basic tags ▸ Consistent method for spacing between elements ▸ Possibly some helpers for setting sizes/doing conversions between sizing units.
GRID SYSTEM? ▸ Grid container. Typically class .container or via a mixin, @include container. ▸ Columns. Mixins, classes (.column, .column-6), or both! ▸ Gutters (space between columns), usually predeﬁned. ▸ Responsive helpers/utilities (e.g. @include breakpoint(large))
jonibologna.com/ﬂexbox-cheatsheet/ - Flexbox Cheatsheet ▸ scotch.io/tutorials/a-visual-guide-to-css3-ﬂexbox-properties - Good overview of all properties ▸ codepen.io/collection/AeJBbm/ - Lincoln Loop’s Flexbox Friday (real world examples) ▸ css-tricks.com/snippets/css/a-guide-to-ﬂexbox/ - Exhaustive resource for all things Flexbox
TO IMPRESS YOUR FRIENDS ▸ Avoid modifying colors via functions like darken() or lighten() functions. Make colors conﬁgurable. Exceptions: Something like zebra stripes. ▸ One color system. Using HEX? Use HEX everywhere. ▸ Use your color lingo when communicating with the team. If it’s proper name is orchid, use that name, not “bright rich purple”.
It’s better to KISS and build on a solid base. ▸ Modern CSS APIs make some custom built solutions unnecessary. ▸ Conﬁgurability is key. Over-conﬁgure! ▸ Use sensible constants. REMs, base colors, etc. ▸ Some general, human-friendly helpers go a long way to help others create new things.