Breakpoints Class

This module adds classes to Body tag of page based on configured Breakpoints via Javascript.

Why not Browserclass?

Do you like Browserclass module as I do? So you know that changing of browser window size not changes classes that applied to Body tag. It happens because Browserclass module logic is based on User-agent and works totally in backend.

Breakpoints class module can add and remove classes to body tag just on window resize and matching/unmatching of breakpoints.

Usecases:

• One place for @media queries. Because breakpoints module configuration stored in backend - it can be single place where you will add breakpoints to your site. All breakpoints easily can be exported to Features.
• Responsive theming based on body classes instead of hardcoding @media queries in styles and moving them to backend side.
• Responsive javascript development. All @media queries are avaliable in Drupal.settings.breakpoints_class.breakpoints javascript object.
• ???
• Profit

Requirements:

• Breakpoints module
• Enquire.js library.*
• (optional) Respond.js library* for better support of IE.

Installation

• Enable Breakpoints class module
• Download Enquire.js library to /sites/all/libraries/enquire.js/ folder.
• (optional) Download matchMedia.js library to /sites/all/libraries/matchMedia.js/ folder for better IE compatibility.
• Add some breakpoints with Breakpoints module
• Enjoy your classes!

Also libraries can be added using library_pack module.

Functionality

• Allows to add classes to body tag based on Breakpoints module configuration for specific themes.
• Allows to setup classes prefix in module settings. It might be helpful if you have some conflicts with breakpoints and already existing body classes.
• Debug mode for logging into Javascript console all breakpoint changes.