2017 Feb 24th Reading Ref
Author note
Flexbox note was updated. :“)
SASS / CSS
- A Trick: Individual CSS Transform Functions
- The Unexpected Power of Viewport Units in CSS
- Box Alignment Cheatsheet
- Do we need a new heading element? We don’t know
- How to Use CSS Animations Like a Pro
- Responsive CSS Patterns without Media Queries
- Squeezy Stretchy Flexbox Nav
- Deep dive CSS: font metrics, line-height and vertical-align ★★
- CSS and progressive enhancement
- How to Build an Off-Canvas Navigation With CSS Grid
- Coding CSS for Context
- User Sortable Lists with Flexbox and jQuery
- CSS Pseudo-classes: Styling Elements Based on Their Index
- html & css is hard ★
- Exercises in Flexbox: Simple Web Components
- Code Smells in CSS Revisited
- Bringing Websites to Life with CSS Animations
- Bridging CSS and JS with Custom Properties
- CSS Grid Layout Terminology, Explained
- Utilizing the “C” in CSS
- CSS Pseudo-classes: Styling Form Fields Based on Their Input
- Pocket Guide to CSS only Drawings and Animations
- CSS Grid – Table layout is back. Be there and be square.
- A Step by Step Guide to the Auto-Placement Algorithm in CSS Grid
- More HTML5 Semantics: New Elements and Features
Front-End
- Frontend Design
- Writing a Great README — Written by Daniel Bader
- Optimising the front end for the browser
Web Design / UX
- How To Use Shadows And Blur Effects In Modern UI Design
- 10 Ways to Simplify Your Design
- Great Alternatives to Hamburger Menus
- Context is key for effective UX Design
- Do responsive sites have to be so tall on mobile?
- 4 simple steps for perfect web navigation
- Inspiration for Search UI Effects