Bringing Magic Back

Keep Frontend DRY; sprinkle it with Magic

Who am I?

Ian Carrico

What do I do?

Backend of Frontend Developer

What is Magic?

Magic pulls functionality from several top themes to put shared functionality into a reusable module.

  • Aurora
  • Omega 4
  • Zen
  • Mothership

Magic began as a desire for all front end developers to be given the tools to make their site performant, mobile first, and DRY.

What does it DO?

Exclude CSS / JS files from being included

With Magic, you can specify to remove CSS and JavaScript files from your output. With a single line, you can remove all core CSS.

Move all JavaScript to the footer

There is also the option to leave all libraries within the header, which may be needed for some modules.

You can also force some JavaScript in the header with the 'force header' option, and several modules (Modernizr) already employ it.

Enhanced JavaScript handling

There is a backport of several D8 features, such as using async and defer for you JavaScript.

Export theme settings

Put all of your theme settings in code, to allow them to be stored wihin your version control.

Rebuild Theme Registry on Page Reload

For development only, allows the theme registry to be rebuilt on every page load. Useful for active theme development.

Display a Viewport Width indicator

Create responsive designs quickly and efficently. Displays your width in pixels or ems.

Display an indicator with classes applied to the HTML

Useful when used in conjunction with Modernizr, allows you to quickly see classes on the html element.

Caching system to ensure performance

All of the CSS and JavaScript excludes are cached within Drupal's caching system, to ensure it does not affect performance at all.

Integration with Livereload

If you have Livereload within your theme, quickly ensure the JavaScript is added to the page during development.

Magic 7.x-2.x

Rewrite of CSS / JS Removal

fubhy has done some major work to ensure the CSS / JS removal works quickly and efficently. This will eventually allow for better controls over the removal of JavaScript.

Even better JavaScript handling

We are reevaluating new themeing techniques, and ensuring out JavaScript handling works as best as we can.

In the most recent dev branch, along with patches to other modules, we have ensured WYWIWYG editors can still work when JavaScript is in the footer.

Drush Integration*

Currently working on allow sub-theme creation through Drush. This will be a port of Omega's system, and be able to be used by any base theme.

Better CSS / JS Removal*

There has been a feature request to allow CSS and JS removal to be customizable by page. We are working to see if this can be possible, and still retain Magic's performance.

Ability to replace JavaScript on site with minified versions

A curent project of mine, to find better ways of minifing the JavaScript on your site.

Drupal 8

Now that Drupal 8 is becoming a reality, we are starting to begin development on a Drupal 8 version.

Other Ideas

  • Automatic .tpl filename output
  • Set "every_page" to TRUE in settings

Why should we use it?

In short: Performance

But also, to help development-- to make your theming process easier. To give YOU the tools you need to make your site how YOU want it. Remove the parts of core that are frustrating, ensure your theme is how YOU want it to be.

And to enhance the open-source-ness of Drupal. We want to take the best part of these themes and make them available for everybody.

What about MY theme?

Magic is compatible with ANY theme.

It's purpose is to be reusable, and easily implemented.

Magic came from development of many base themes. We are always looking for what other themers are doing, to see if it can be reusable. If there is something you are looking for, submit a ticket.

To the Module!

Helpful Links!