# Responsive Alt Class

Resize this page
“Edit this pen” to see the sauce

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!