User Interface Reference

Here are some helps related to user interface (UI). You will find helps that are general to the web at large, and specific to platforms like iOS (i.e. Apple’s smaller personal devices).

Practice Those who can, do.

General UI Frameworks

• Polymer Google’s mixed implementation of Material Design and Web Components.
• Bootstrap (CSS|Components|4α)
• MDL (Material Design Lite) - maintained by Google.
• Angular Material (v2)
• Materialize CSS

Fonts

A new thought in web development is to use system fonts rather than site-specific fonts. The value is that fonts are heavy in terms of the cost of a page’s rendering. Here are some font stacks that will help to better mitigate that cost. The problem with the present state of things is that this list will have to be maintained with greater care than previous font stacks as systems are updated and expanded:

/* A mixture of GitHub’s, WordPress’, Medium’s and other’s font stacks: */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Oxygen-Sans, Ubuntu, Cantarell, "Open Sans", "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", sans-serif;
} /* h/t to Chris Coyier and bitsofcode. */

But as bitsofcode points out, the best bet at this point may be to go with the most tested list (i.e. WordPress):

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

In that article Chris Coyier showed the font stacks used by a couple of popular sites. In the comments, someone named Kemie mentioned a sitepoint article that mentioned a CSS feature that harnessed and (re-)used operating system styles, but that feature is specific to CSS2.1, and is no longer supported.

Principle Those who can’t, teach. 😊

• Material Design

iOS Device

Apple has guidance for building for their iOS devices. Paricularly, I needed to know which app icon sizes I need to use. For fear of violating some terms, I'll just say that this can be tedious. FWIW, makeappicon.com makes creating icons for different screen resolutions (and platforms) much easier. Here is a little more on that subject.