The fabulous-looking element above is given a responsive class using the data-alt-class attribute. The initial markup is as follows.
<p class="foo foo- bar" data-alt-class="-small 300 -medium qux 500 -large" >
Hopefully, that’s simple but powerful, borrowing from Tab Atkins excellent RespImg Syntax. The resulting classes would be as follows.
| Element width | Alternative class |
|---|---|
| * - 300px: | bar foo foo- foo-small |
| 300px - 500px | bar foo foo- foo-medium qux |
| 500px - * | bar foo foo- foo-large |
When a class name contains a trailing dash and an alt class contains a leading -, the two are fused, as is the case with foo-small, foo-medium, and foo-large.
Let me know what you think!