I'm not sure yet. This might be tricky. What's the actual problem we're trying to solve?

It seems like you want to tag the HTML with classnames from each the media queries in their grid? I think what we might want to do is have an idea of the overall layout we want for the preview page and then try to find the best fit fraction from their set of grid unit classnames to apply.

For example, say they choose a 5ths-based grid, but we want the preview layout to have a 25% + 75% section at `48em`+. The best fit would then be `pure-u-med-4-5` and `pure-u-med-1-5`.