Coding Map Wireframe Sketch
I needed a sketch to plan out the code required to layer components over a background image in a responsive mobile-first layout.
Silver Fox Renewables LLC, Pasadena CA
Silver Fox Renewables LLC designs, installs and maintains high quality solar-powered energy generation systems.
Silver Fox Renewables Header Code Map Sketch
Sketch for Silver Fox Header with background image
As the developer, in addition to being the designer, I usually don't need fancy comps. Sometimes I just need to visualize the code to wrap my head around it.
This image maps a flex-wrapper inside a table-wrapper inside a flex-wrapper.
Silver Fox Renewables Responsive Header
The header for Silver Fox Renewables, LLC.
The header for Silver Fox Renewables fits within a flexbox sticky footer. The header needed to be a flex item. I needed an element that could hold a background image set to cover.
Surface elements display responsively. I altered the Bootstrap navigation.