Problem/Motivation
In Proposal: A Style Guide for Seven, we set out to overhaul the visual style of Seven. This was met with a lot of great feedback, which we have largely incorporated. However much of the feedback was in line with implementation details, that we need to hash out in the core queue.
At large the goals of this style change is to:
- 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.
We took a holistic approach looking at all of the items and defining our basic style principles and then diving deep into the actual elements. This was a process of several dozens of hours across r5yn, Bojhan and yoroy. In the end this resulted in the presented guide, much of it is still in flux as we fill in the details. All source files can be found in the groups discussion.
Summary: Style principles
- A primarily light tone to appear bright and open
- A neutral, desaturated color palette, both friendly and calming.
- Legible, readable typography. Employs a typeface with some humanist characteristics in a few weights and styles.
- Crisp lines and sufficient contrast, but not jarring. No large areas of bold colour.
- Bold shapes reserved for headings and action elements.
- Some rounded forms to communicate friendliness and naturalness.
- Little or no ornamentation: no patterns, textures, gradients or shadow/emboss effects – except to communicate affordances.
- Borders and background tone as grouping devices only: to clarify relationships and emphasize important elements.
- Generous and consistent use of whitespace.
- Aesthetically appealing, though minimal graphic style; should appeal simple but not sterile; gracious rather than opinionated; confident without overspeaking.
Outstanding Issues — #styleguide
Issues that need to be created
- Image field
User interface changes
Most, if not all elements will be changed - from the styling of the overlay, to the roundness of buttons. Our aim is to bring one consistent style that upon implementation can be documented and maintained as strategy.
API changes
There will hopefully be no API changes required for any of these patches, however we will see conflicts with the currently ongoing Twig and CSS clean up work.
Testing process
Each issue should contain a select of test pages which provide sufficient coverage that a commit should not cause visual regressions. Before and after screenshots are useful for each test page.
Views testing process
Views is by far Drupal Core's most complex UI, it requires it's own testing coverage to ensure a commit does not cause regressions. Each issue can provide before/after screenshots of the following use cases.
Simple use cases
- Add a new view via the wizard (admin/structure/views/add
- Select the basics and hit save.
- On the view edit form, select a new filter for the node type
- Change the row format to show fields
- Add the body field to the output, and rewrite the output to use[body]
- save the view
Advanced use cases
- Enable a display
- Disable a display
- Choose the table style and enable click sort
- Add a filter by title
- Add a filter by author
- Rearrange the filters to have the author first
- Add a relationship
- Override the fields configuration // To test the override select
- Add a contextual filter for Node: ID and setup a validation for a specific node: type
- Expose a filter
- Click preview