Prototyping

This is the phase where I go from design to prototype.

From Design to Prototype

I take the given design and I reimagine it as an exploded-view drawing that I then use to deconstruct it into its components. I build a dependency graph of all the components such that there is a directed edge from component A to component B whenever A depends on B. A topological sort of this dependency graph helps me figure out in what order to start working on the components. At this point, I have a choice to take either a bottom-up or top-down approach, and I usually choose the bottom-up approach. For each component, I determine:

1. How I'm going to give it meaning and structure with HTML.
2. How I'm going to refer to its elements using CSS classes.
3. How I'm going to present it, as specified in the design, with CSS rules.

Specifics

I use:

• BEM's naming convention for my CSS classes.
• Dart Sass to generate my CSS and I take full advantage of its support for modules via the @use rule.