Responsive Bartik

Bartik is the default theme for Drupal version 7 and also for the upcoming Drupal version 8. When Bartik was designed mobile devices hadn’t yet exploded on the scene and techniques for designing web sites for them were just beginning to be devised.

Early on in the planning process, Dries Buytaert, Drupal creator and project lead, stated that Drupal 8 needed to be a “great platform for building… mobile web experiences.” This led to the creation of the Drupal 8 Mobile Initiative.

Part of that initiative required converting the Drupal 8 core themes, Bartik, Stark, and Seven, to ones that would function properly on mobile devices as well as on laptop and desktop systems. Various concepts were proposed and debated for converting Bartik. Finally, it was determined that this could best be accomplished by using the principles (mobile-first, responsive layout) of Responsive Design.

Many people were involved in this process but I will take at least some credit for the eventual layout and styling used. I intend to detail the specifics of this in a future post.

When the Drupal 8 changes for Bartik were well under way, the question arose as to whether or not this could be backported to Drupal 7. It was determined that because of the complexity of the CSS and markup changes, it would not be possible to add this to Drupal 7 core.

As a Drupal 7 version of Bartik was also needed for the Spark project, those involved in that (principally webchick) initially created their own version. Soon after I created a contributed theme, Responsive Bartik D7, which is now used in Spark.

The responsive version of Bartik has been committed to Drupal 8 core and is functioning quite well, although a few minor styling bugs remain. Responsive Bartik D7 has been available in dev and beta versions for some time. A beta2 version has just been released that contains Right-to-Left (RTL) functionality.

An additional feature of Responsive Bartik D7 is a Main Menu that collapses to a single, stacked column at small screen sizes and may be toggled open or closed.

According to Drupal’s usage statistics for Responsive Bartik D7, it’s being used on over 5,300 sites.