Wizardry is a frontend dev technique that brings together the best of responsive, adaptive, and fluid design.

• Use the Wizardry Calculator to quickly set sizes that exactly match the UI design.

• Maintain full control over element scaling on every breakpoint.

• Speed up your mobile responsiveness process.

Implementing wizardry.

ON DESKTOP

1. Set the body (all pages) font size to 1 VW
   1. (Note: Any font size inheriting from the body can not be adjusted by the user.)
2. Set fluid font sizes using EM and set line heights to unitless
3. Add in a section (with no padding)
4. Add a container inside the section (set padding using EM)
5. Give the container a width of 100% and max width of 100em
6. Add a media query to change the body font size to a fixed size at your desired screen size

SPECIAL CASES

• Minimum paragraph font size on desktop

If the paragraph font size is getting too small on smaller desktop screens, set a media query for min size using the wizardry calculator.

• Various width containers

If some containers need to be wider than others, ensure they all have the same max width and add extra padding inside some to create smaller containers

• Adding a side nav

If a left or right navigation needs to be added to the page, add extra padding to the side of the container that the nav is on.