Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.What is responsive theming?
Responsive themes are able to detect and respond to the size of your browser window automatically - without user intervention. Responsive themes are designed to work seamlessly across the desktop, tablet, mobile device, or anything you might browse the internet with. Responsive themes 'know' how to serve up content by adding or removing regions, re-sizing images, and being ultimately flexible.
Responsive Fusion themes are now in testing. We've added a lot of new features while trying to keep our existing features as easy to use as possible.
Upgrade path/Requirements
Making your existing Fusion subtheme responsive is very simple. Here are the steps:
- Upgrade Fusion Core to 7.x-2.0-beta2 or later
- Update your subtheme's .info file - see Creating your own Fusion Subtheme
- Make sure Fusion Accelerator 7.x-2.0-beta1 release or later is installed
- Assuming your site will need to be responsive in Internet Explorer, install the css3-mediaqueries library
Responsive Fusion is backwards compatible. Every effort was made for the responsive theme changes to be additive, preserving existing Fusion logic when responsive layouts are not enabled.
New Features for Responsive Fusion
- Responsive grids are generated automatically. Instead of choosing between existing grids (eg: 12 units - 960px, 16 units - 960px), those parameters are entered as theme settings. Upon saving, a CSS file will be saved in your site's files folder.
- All grids are now loaded in a single file that can be aggregated by Drupal.
- Fusion ships with four layouts: desktop, tablet (landscape), tablet (portrait), and mobile.
- Each responsive layout has its own gutter, width and sidebar layout, managed through theme settings.
- Tablet media queries are optimized for the iPad.
- Additional responsive layouts can be added by editing the info file.
- The grid mask has been moved to Fusion Accelerator. The overlay is now color-coded and provides a text indicator for which device's grid is in use.
- The grid mask now includes a very light dotted pattern to show the gutters.
- Fusion Accelerator now includes a new Labels module. Once enabled, a LABELS button is positioned under the GRID button. Clicking it will place the a solid bar at the top of every region with its name inside.
- Various touch and mobile-optimized features for your content, such as image width restriction.
These features take care of the layout and structural changes that make your site responsive. If you're developing your own responsive Fusion subtheme, you'll likely want to add custom CSS to style elements individually for different devices.
What you can't do with Responsive Fusion
- Different sidebar widths per layout. However, this functionality is in the works, using the Delta & Context modules.
- A responsive AND fluid layout. This feature is also in progress.
- Convert two sidebars to a single sidebar (i.e. a three column layout to a two column layout) on resize. This feature is under consideration.
- Theme setting forms are not dynamically generated based on the .info file's manifest on layouts. Everything else is dynamic. This means that if an additional responsive layout is added to the info file, it won't come with an administrative interface, but it should otherwise work. We are exploring the best way to potentially add these items into the UI.
