A number of popular base themes provide many useful tools to help in front-end development. These range from simple things such as disabling the theme registry that alleviates the need to clear cache when adding new templates, functions etc, to giving you complete control over how and where your CSS and JavaScript are added to the page.

The Magic Module consolidates a number of these useful tools into one place.

Picture of the them settings page with Magic module installed

Instead of each of each theme re-implementing useful front-end functionality, Magic moves it all into the module space. Currently, it provides some really handy features for themers including:

  • Enhancements to CSS Aggregation
  • Explicitly exclude CSS and JS files
  • Move JavaScript to the footer
  • Rebuild Theme Registry on Page Reload
  • Display a Viewport Width indicator
  • Backport of Drupal 8 JavaScript handling (Watch Théodore Biadala's DrupalCon Prague presentation on Upgrading your JS to Drupal 8 for a sneak preview)

The module will also allow each of your themes to export a set of Magic settings. Visit the "Settings" page of your theme for an example (e.g. /admin/appearance/settings/bartik).

Now your custom themes can quickly and easily take advantage of a whole host of front-end development tools!

Sally Young

Sally Young
Senior Technical Architect working across the full-stack and specialising in decoupled architectures. Core JavaScript maintainer for Drupal, as well as leading the JavaScript Modernization Initiative.

Featured Work

Latest Resources

Latest Podcasts

Let's Connect

Want to learn more about working with us or just say hello?

Contact Us