Odo Responsive Classes

Swap class names of elements using responsive attributes.

Support

IE9+

Dependencies

Odo Base Component, Odo Responsive Attributes

Markup

Add the odo-responsive-classes class to the element and breakpoint attributes matching Odo Responsive Attributes.

<div class="odo-responsive-classes" data-class.xs="green with-padding" data-class.sm="blue"></div>

Demo

This component will run automatically when the page loads.

This text will be green at the xs breakpoint and blue otherwise.

Add a class which centers text only at the sm breakpoint.

I'm a .text-center at sm.
<div class="odo-responsive-classes" data-class.sm="text-center">
  I'm a <code>.text-center</code> at <code>sm</code>.
</div>

API

initializeAll(context = document.body)

Add more responsive classes after page load from a parent element.

OdoResponsiveClasses.initializeAll(containingElement)

disposeAll(context = document.body)

Dispose of all instances from within a context.

OdoResponsiveClasses.disposeAll(containingElement)

addAll(elements)

Optimize creating multiple instances.

OdoResponsiveClasses.addAll([element1, element2])

removeAll(elements)

Dispose of an array of elements.

OdoResponsiveClasses.removeAll([element1, element2])

More Markup Examples

<div class="odo-responsive-classes" data-class.xs="container"></div>
<div class="odo-responsive-classes" data-class="row" data-class.xs="container"></div>