| Drupal

Spark DrupalOver the last few months some of the most talented people in Drupal have been working on usability improvements.

Their project is called Spark. Initially their improvements are being released for Drupal 7 and the hope is that they will later be moved to Drupal 8. We mentioned Spark in our summary of Drupal 8. You can also find more background in Dries's launch post for Spark.

The first Alpha release of Spark has just been released, so we decided to take it for a test drive. Come with us and see where Drupal usability is headed.

Installing Spark

You can download Spark from http://drupal.org/project/spark.

Spark is a Drupal 7 distribution so you install as normal, but just make sure to choose Spark on the first installation screen:


After installation, your site will look normal:


Using Spark

The key difference you'll notice immediately is with the black admin bar. There are now View and Edit buttons in the top-left corner.

  • View is the default setting.
  • Edit is where the Magic happens.

Click Edit and a grey overlay comes over the page. Anything that you can edit will now be outlined in blue.


Click on the title of the article and you'll get a small pop-up. You can edit the title directly inside the pop-up.


Click the Save button in the top-right corner of the pop-up to complete the change.


That's about it on the homepage, although you can also change the author and date.

The real magic happens when you click through to the full article. Here you can edit almost anything in the content:


Click on the Tags area to edit the Taxonomy:


Click on any field to edit it:


Click on the body and you'll get a floating editor bar with a WordPress-style list of around 10 buttons.


You can click on any images in the content and drag them and around to place them elsewhere in the content;


Admin Area Improvements: New Theme

There's a new admin theme in Spark which is called Ember. You can see a typical screenshot in the image below.

With the alpha version of Spark, the Drupal 7 overlay is gone. This is a good thing. Although it looked more professional than the Drupal 6 admin area, the overlay was frequently buggy, and slow. If the admin overlay isn't included in Drupal 8, that will be a good thing.

[UPDATE] The overlay may return in future versions of Spark. See comments below.


Admin Area Improvements: Navigation

The navigation in Drupal 7 is messy. The black admin bar across the top is not a problem, but the sub menus are. The sub menus are in the top-right corner and easy to miss.

Spark puts the sub menus in the top-left corner, directly under the admin bar:


Admin Area Improvements: Improved Module Area

Module filter is now a core feature in Spark. It allows you to navigate the modules page much more efficiently.



A simplified version of Panels is now also part of the Spark core. Go to Structure > Panels and this is what you'll see:


By default, you can't do anything yet so you'll need to go the Modules page to enable the remaining Panels modules, plus the Page Manager module. When you go back to the Panels page, this is what you'll see:


At the moment, the usability for Panels is the same in Spark as for a normal Drupal 7 installation. The key difference is that Panels can now create responsive layouts. You can create a Smartphone layout and then a different layout for tablets and your desktop:


These breakpoints can be edited to meet your needs:


You can also create your own fluid grids:


And define regions for your layouts:


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.