Skip to content

v0.8.2

Choose a tag to compare

@barisgit barisgit released this 24 Oct 10:01
· 367 commits to main since this release

Lessons from a blind comparison round, and wide blocks centred beside the contents rail.

New public class names: num (inside .compare). Changed: .wide beside the rail now grows equally to both sides, and on windows wider than about 1360 px the rail moves further into the left margin to make room.

Kit

  • .wide beside the contents rail is centred on the prose column and grows by the same amount on both sides, up to 88rem, never past the rail's gap or the window gutter. The view's breadcrumb row stays with the column (#48 follow-up).
  • .compare .num aligns a numeric column to the end with tabular digits; on phones, in the stacked layout, the value starts beside its label (#54).
  • A page's <textarea> gets the kit's input border, radius, padding and background, spans its column and resizes only vertically.
  • kit theme.css states the .compare markup contract (row headers, data-label, num, data-state) with a one-row example.

Guide

  • Study pages: a question with a bounded answer offers a few plausible choices as radios, an explanation gets a <textarea>, each with an id so kit:reply.js keeps it, and a <details> after them holds the explanation. Headings there ask the question rather than giving the answer away (#7).
  • What no control changes (table rows, item lists, a view's body) goes in the HTML as you write the page, so it shows before scripts run, prints, and keeps the layout still.

Examples

  • The café example writes its comparison rows in the HTML and gives its reply radios ids. All examples are repacked.