alexander-danilenko / breakpoints_class

Drupal module for adding classes to body tag based on breakpoints configuration

Breakpoints class module

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

Why not Browserclass?

Do you like Browserclass module as we 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.