Brekpoints class

Categories

JavaScript Utilities

Component ID

2570519

Component name

Brekpoints class

Component type

module

Maintenance status

Minimally maintained

Development status

Maintenance fixes only

Component security advisory coverage

not-covered

Component created

Component changed

Component body

Project moved to github

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.

Brekpoints 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:

Installation

  • Enable Brekpoints class module
  • Add some breakpoints with Breakpoints module
  • Add Enquire.js library.*
  • Enjoy

* Library can be added custom way in your module/theme OR in most prefered way: 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.

Component url

https://www.drupal.org/sandbox/fat763/2570519