Changes to Drupal 8 that affect admin theme maintainers

Happy Friday! I maintain the admin theme in Drupal 8 core: Seven. There have been many changes to Seven in Drupal 8 that affect the relationship between admin themes and modules, and how the admin UI is generated.

I've always thought that the strategy we've put in place are going to have a positive impact on maintainers of contrib admin themes, but I've never sought out feedback directly. I am now!

Object oriented CSS

We now have CSS standards in Drupal 8. All CSS in core is being rewritten and restructured inline with those standards. They are heavily influencds by the principles of OOCSS, SMACSS, BEM, and the writings of Nicolas Gallagher.

The Seven theme, with the introduction and evolution of the Seven Style Guide, embraced these principles from design down to implementation. As all modules with administrative UIs are tested against Seven, the architecture and design of Seven influences all contrib admin themes.

Reusable admin CSS components

Taking influence from frontend frameworks such as Bootstrap, Seven's design is now split into components, instead of per page overrides and designs.

This creates a 'visual api' of sorts that modules hook into and reuse to create the admin UI they need without having to write any CSS. It also ensures a greater consistency throughout Drupal's UX.

One common example are buttons, the classes .button, .button--primary, .button--danger, .button--small can be applied to any element.

Another is the heading classes. Classes like .heading-a, .heading-b, heading-c</code mimic the hierarchy of the <code>h1, h2, h3 elements. You can pick the font sizes that look right for your page without affecting accessibility or overriding it in CSS.

We also have reusable classes to control layout. Using classes like .layout-column.half, .layout-column.quarter, .layout-column.three-quarter will layout your page for you. Classes such as .leader, .leader-double, .leader-triple will add spacing above an element that matches the base leading of Seven, while .trailer, .trailer-double, .trailer-triple will add spacing below.

Another low level component are the color classes, .color-success, .color-warning, .color-error allow you to reuse colors defined in the Seven styleguide, without a tool like Sass or CSS variables.

Less admin CSS in modules

With a full library of reusable CSS components, contrib modules will need to write less CSS. From my point of view, this is a big win for contrib admin theme maintainers, who have to write a lot of custom CSS to override custom CSS in some complex modules, and it's harder to tell if modules are broken because of the changes in the admin theme.

I'm hoping that admin theme maintainers will be able to override just the reusable components and have better coverage of core and contrib modules.

Ongoing work

We are still working on converting a lot of custom CSS into reusable components, and will continue to build the library of components after Drupal 8's release.

We are also working on creating a living style guide to document Seven's CSS components, you can find that work here: https://www.drupal.org/node/2404111

Feedback please!

Admin theme maintainers, are there any problems or pitfalls you see with this approach? I would like to know.