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>