Mon Feb 25 08:12:30 EST 2019


Time to go for it.  Let's use this post as the place to come back to.

- everything must be styled.  you cannot rely on defaults

- render based on width of the screen, and a global notion of resolution.

- width can be handled this way:


<meta name="viewport" content="width=device-width, initial-scale=1"/>

@media only screen and (min-width : 600px) and (max-width : 689px) {
  .comment { max-width: 540px; overflow: auto }
  pre { max-width: 400px; }

- and relative scaling is done using 'em' units, which are relative
  to font-size.

- people advice against writing raw CSS, and to use a generator.  so
  let's start with raw CSS, and construct a way to generate it.

- when using grids, use a couple of cases based on width.

- keep it simple and use only two name spaces: the main style of the
  site + specific classes for each widgets.  then for anything that
  doesn't fit .<class>.<el> use a specific class, e.g. instead of
  .camera.img use .camera_img, but group it in the same section of the
  style file.