Dave aint no designer nor developer... no teacher nor role model. just a tired old dog looking for a slow rabbit.
A dog hunts best in a pack. Work off another dog's point... the easiest route when trying to solve a problem.
As far as web design, a white piece of paper with a #2 pencil looks best! It just does! ...like back in first grade.
The first order of business as a developer is: DO NO HARM to your user!
Get it wrong, and you break the users experience. You're fired!
CSS is different, in that it is an enhancement. NOT a language. It always works, and will still show up when the developer makes a mistake. It might not look perfect, but it will work. When a CSS parser encounters something it doesn’t understand — it skips it. That way we stay backwards compatible.
Validate your code. build with fallbacks in mind.
Embrace the “squishiness” of the web
The web isn’t a fixed canvas you can set pixels on. A lot of things on it are beyond your control. You need to be adaptive.
CSS support across browsers
Calculated CSS values:
Calculations are very well supported . There shouldn’t be any qualms about using them.
allow you to react to changes of the viewport of the document. In essence they mean that you apply part of your style sheet when the viewport meets a certain criteria.
Animations and Transitions
were a big breakthrough when the iPhone came out. Transitions allow you to create a smooth change from one state to another. You don’t need to know what changes should happen. All you tell the browser is how long to transition and what easing function to use.
Media Queries make sense when you want to define experiences in detail. Instead, you can also use viewport units to size elements according to the available space.
is a way to create layout of elements in CSS. In essence is it everything people who claimed layout tables were easier missed in CSS — and much more. Play flexbox froggy. Build with React visual editor.
is taking it to the next level. Using it you can lay out elements in a defined grid in two dimensions, both rows and columns. Grid has been cooking for a while and now is finally supported across the board. The simplest way to get started is Rachel Andrew’s Grid by Example resource. Or play CSS Grid Garden. Also, check out Jenn Simmons Real Art Direction on the Web
enables you to define re-usable settings once in your document and apply them throughout. The most common use case for that is custom colors and sizes. But you can go further and define fonts and other typography.
Another very welcome addition to CSS. These work much like Media Queries. By using @supports you check if the current user agent supports a certain feature.
Our users deserve interfaces that are smooth, reliable and don’t kill their batteries. So, consider CSS a bit more. You can be lazy and build on the work of the community.