Responsive Design

Here's the list of classnames that can be used to toggle display based on breakpoint; they work on all elements.

show in breakpoint only: .ts-show-mobile-only; .ts-show-tablet-only; .ts-show-desktop-only

hide in breakpoint only: .ts-hide-mobile-only; .ts-hide-tablet-only; .ts-hide-desktop-only

show in breakpoint and up: .ts-show-mobile; .ts-show-tablet; .ts-show-desktop

hide in breakpoint and up: .ts-hide-mobile; .ts-hide-tablet; .ts-hide-desktop

Try resizing the page and see which of the boxes below are shown.

Find the current breakpoint

The current breakpoint is determined via CSS classnames on the html element. You can use a function such as this to lookup the current breakpoint; it returns a class.

function breakpoint() {
	var cname = document.documentElement.className;
	return([
		'ts-mobile-only',
		'ts-tablet-only',
		'ts-desktop-only'
	].find(function(c) {
		return cname.includes(c);
	}));
}

Observing the breakpoint

You can setup an event listener for ts-breakpoint to get notified whenever the breakpoint changes. Again, the current breakpoint is determined via CSS classes.

document.addEventListener('ts-breakpoint', function() {
	console.log(breakpoint()); // see above
});