- whitespace between ‘modules’/components
- maintaining horizontal spacing (eg typographic indents)
- image sizing (with varying w:h ratios) across varying breakpoints
- logo sizes, esp. at specific breakpoints
- checking nested content styles, esp. when expanding the
.gov-speaktypography classes - icon alignment
- table styling and behaviour at varying breakpoints, esp. with more complex tables
- visibility and placement of menu buttons, etc. for interactive components at varying breakpoints
- consistent styling for
:hover,:focus, and:activeacross links, buttons, and more - link/anchor styling edge cases, eg. images as anchors, etc.
- check background colours for certain components (eg white bg for logos in header)
- check for overflows/wrapping, esp. with lists of inline links
- (?) colour inversions (eg
.foo--inverted) - (?) test font stacks (inc. serifs)
- (?) test for correct usage of global and local vars
- text input styling, eg. monospace for certain things, readable line-heights in free form text boxes, etc.
- ensure menus and accordions can expand/collapse
- ensure nothing introduces a horizontal scroll for the viewport
.visuallyHiddenthings, eg. skip link styling (prolly also contrast exception?)- pa11y basics (eg colour contrast 4.5:1 min., etc.)
- ensure type does not go under a certain font size, eg reduction as a result of nesting
- links/button styling and depending on usage/roles, eg colour, disabled state (cursor disabled), etc.
- usage of flexbox and other grid-setting styles wrt. browser support
- ie overrides and other hacks
- (?) apply rigorous rules for when we create specific templates
- linting
- adhering to BEM conventions
- (?) observing selector semantics?