Adaptative Panes

Panels has always had a bit of a problem when working with responsive designs. This module provides an interface to configure panes to be distributed in a grid for each available breakpoints in the site, much like Bootstrap grid works.

Pane configuration

This module relies on panels IPE to provide configuration for each pane on the interface. A new button will be added on the panes toolbar. When clicked, a modal will show the adaptative options for the pane, providing a fieldset of configurations for each breakpoint available in the system.

The configuration works based on Bootstrap 3. It defines a grid of 12 columns (configurable) for each viewport (based on the breakpoints). By default, each pane occupies all 12 columns on every viewport, so they stack as the panels' default behavior. If you configure two panes to occupy 6 columns in a given viewport, they will stay side by side. For another viewport, thought, you can configure them to occupy the default 12 columns, or even hide them choosing the option hidden on a viewport.

Configuration page

This module provides a configuration page that allows, among other things, to define which breakpoints should be used when configuring the panes. Also, it provides a button to create default breakpoints (based on bootstrap), so that you can use this module out of the box.

CSS

Adaptative styles are (or should) always be addressed using CSS and it's media queries. As it's not that easy to dynamically create CSS to match custom configuration (like amount of grid columns), there is at least a CSS that makes everything work for the default breakpoints created by this module.

P.s.: To create these breakpoint, however, you have to visit the module's configuration page. There will be a button labeled Create default breakpoints.

Custom CSS

If you intend to create custom CSS, you can simply disable the option Load default CSS and then make your own.

Sass grid builder

This module also provides a Sass file that helps you create grid systems. It works only on sass 3.3.x, and it's available in adaptative_panes/sass/adaptative-panes-default-grid.scss. To avoid altering this module's files, consider copying this file to your theme before modifying and compiling it.