Templates

logo

menu ☰

Contents

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!

They should not suffer from your mistakes. Language is NOT fault tolerant. Javascript, C#, and other sources of code are the responsibility of the developer.

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.


These guides are a starting point. They do not use Javascript or Jquery. Just good ole html. Always start with the simplest approach.

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
is well documented. caniuse.com is an incredible resource. It shows which browser and which environment supports what. Evergreen browsers are a thing — all browsers are on a constant upgrade path. We even learn from browser makers what’s coming down the line. In general CSS has been going leaps and bounds since we had to use JavaScript to patch it. Especially disappointing browser support is a much smaller problem.


Calculated CSS values:
Calculations are very well supported . There shouldn’t be any qualms about using them.


Media Queries:
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.


::before and ::after
pseudo selectors in CSS allows you to generate content that is purely visual.


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.


Viewport Units
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.


flexbox
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.


CSS Grid
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


Custom Properties
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.


Feature Queries
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.


Summary
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.