KargJonas / responsive.js

A library for making websites responsive.

responsive.js

A simple library for making websites responsive.

All this library does is hide or show HTML in this set of tags:

<horizontal>
    <!-- Content for horizontal screen orientation -->
</horizontal>

<vertical>
    <!-- Content for vertical screen orientation -->
</vertical>

<mobile>
    <!-- Content for mobile -->
</mobile>

<desktop>
    <!-- Content for desktop -->
</desktop>

Info

In addition to the tags, you can use the constant booleans isMobile and isDesktop. I think those are fairly self-explanatory.

The "horizontal" and "vertical" conditions are updated on window resize.

The "mobile" and "desktop" conditions are only checked upon load of the library.

Tags are hidden using css display: none and unhidden using display: block.

The library is tiny and can be easily modified to fit your needs.

Happy coding!