Breakpoints Class
Component ID
2932900
Component name
Breakpoints Class
Component type
module
Maintenance status
Development status
Component security advisory coverage
not-covered
Downloads
9
Component created
Component changed
Component body
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 inDrupal.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.