Hi, I’m Brian Dys — a photographer from the inside looking out · a composer entangled in electronic music · a UX designer · a spouse, a parent, & everything in between.
After building the Content Structure (HTML) of your website, the next step in the process is building its Visuals (CSS).
To be able to ease the process of writing the style sheets, we must segment it into levels:
- Level 1: Default (browser level)
- Level 2: Normalize (boilerplate level)
- Level 3: Modify (visibility and sizes level)
- Level 4: Template (functionality level)
- Level 5: Theme (custom level)
Ideally, each level must be buildt on top of the previous one yet still independent. For example, leaving the style sheet at browser level must present usable information. The same principle applies as one builds the style sheet level per level.
Level 3: Modify
- hide accessible names
- hide components
- set default state of components thru class names
- active element padding
- spacings (margins between components and paddings around components)
- dimensions are set at 100% for Mobile-First
Level 4: Template
- set the functionality of utilities such as Search and Navigation
Level 4: Theme
- background colors/images
- visual elements (badges, logos, lines/borders, shadows, corner radius)