A few months ago in February we proposed a style guide for the Seven theme, we are now well underway. This is a recap and look ahead.
The objectives of the Style Guide are:
- Identify Drupal core values that we can use to determine the look & feel for the Seven theme.
- Unify the visual language in Seven and ensure the overall look-and-feel supports the core values.
- Identify the visual and UI patterns used by Drupal core so that they form a conscious, shared language for us to built upon.
- Provide guidelines and rationale for others (e.g., contrib) to build upon as new interactions, styles and platforms emerge.
Prototyping
After the style guide was delivered in Photoshop format, we decided that prototyping in static HTML would be a fast way of find some of the technical and deeper design challenges without having to wrangle the Drupal theme system.
Ry5n hosted this in a sandbox called Seventy Eight, this was built on a style guide framework Lewis had been working on called Tensile. We intentionally postponed working on components that relied on some tricky technical work like the file upload design. We then produced a few mockups of existing pages using these new components. You can still view the mock ups for the Views Listing page and the Add Field form page.
Drupal 8 implementation
Around the end of May, we were starting to get anxious about actually getting the style guide into Drupal 8 before freeze. We created a meta issue and a sub-issue for each component. As of today, we've achieved the following components:
- New installer branding — #1337554
- Pager — #2016867
- Progress bar — #1989480
- Vertical tabs — #1989488
- Messages — #1986408
- Admin navigation listing — #2016875
- A gorgeous GPL friendly, vector based, icon library that’s being implemented through the whole of Drupal core — #2032773
Components that still need work
There are still some major components that need work and reviews, some components are surprisingly heavy to implement and require a some PHP and Javascript work. Some might not make it in before code and that would be sad.
- Text fields — #1986418
- Buttons — #1986074
- Dropbuttons — #1989470
- Generic layout — #2017257
- Content header — #2022695
- Tabs — #1490402
- Overlay — #1953374
- Fieldset — #2113903
- File field — #2113931
- Image field — #2115469
- Modal — #2113911
Some of the components rely on each other and have to be committed together to avoid visual regressions. A good example is the content header, the tabs, and the overlay.
The style guide going forward
As I mentioned at the top of this article, the objectives of the style guide are three-fold. A visual refresh is just part of the goal. We also need to provide consistency and quality to interfaces that are produced in contrib, where it's currently a bit hit-and-miss.
This is a big problem because the experience of using Drupal does not end with core and we don't have enough designers to advise developers on how to keep the UI consistent and what to do if they need to create a brand new UI. Our aim is turn the style guide in to an easily digestible set of guidelines and examples to impart that knowledge to developers and give them the ability to make user interface design decisions with confidence.
We need to take our current style guide and expand it. We need good documentation on when to use each components, how to use them, and why. I've opened an issue to explore this. We also need to figure out the process of identifying and adding a new component to the Style Guide, I've opened up an issue for this to.
Drupal 7 was the first time we've had a dedicated admin theme in Core. We're still laying the foundations of great design in Drupal. With some work we can make some huge strides towards better usability across the whole Drupal experience.
View all issues tagged ‘styleguide’
Big thanks to all the contributors who have helped get the new Style Guide into Drupal 8 so far:
Bojhan, yoroy, Ry5n, frankbaele, ckrina, mcjim, rteijeiro, oresh, swentel, Gaelan, echoz, tim.plunkett, joelpittet, nod_, YesCT, Cottser, jenlampton, Xano, David_Rothstein, larowlan, nilnullvoid, jessebeach, dcrocks, Wim Leers, AdamGerthel, Outi, emma.maria.