To speed up the work and have a result in #2904243: Implement the Out of the Box designs as a theme for demo_umami as soon as possible (and because of missing things in core, see eg. #2875935: Add Components Module to Drupal Core) we decided to abandon the style guide and work on implementing the theme.

Problem/Motivation

As part of creating a new theme we want to create a living style guide for maintaining the design components.

Proposed resolution

Use similar approach to what Styleguide module takes to render theme items on a page. The approach taken for this theme could be more simple since the components don't have to be pluggable, but could be just hard coded into one controller. This should be included in a separated module which is included in the installation profile. Current decision is to create the Living Styleguide as kss-node implementation.

Styleguide proposed structure

Guidelines

  • Umami brand
  • Design Principles
  • Accessibility

General styles

  • Typography
    • Headings
    • Text
    • Links
  • Colors
  • Lines and backgrounds

Components

  • Article (Full, Teaser, Highlighted Top, Highlighted Small)

  • Banner (Left, Right)
  • Form
    • Button
    • Checkbox
    • Radio
    • Input
    • Label
    • Select
    • Text area
  • Search box
  • Search result
  • Content list (1col, 2col, 3col, 4 col, list)
  • Collection list
  • Magazine promo
  • Messages
  • Navigation
    • Breadcrumbs
    • Main menu
    • More link
    • Tabs
  • Recipie (Full, Teaser, Highlighted Top, Highlighted Bottom, Highlighted Small)
  • Page

Regions

  • Top
  • Header
  • Footer
  • Bottom

Layouts

  • 2 columns
  • 1 column

Remaining tasks

  1. Create the styleguide with styles to be applied to the theme. Work currently done on Github: https://github.com/lauriii/umami See below the "How to contribute?" section
  2. Accessibility review

User interface changes

-

How to contribute?

  • Most communication happens on Slack in the #out-of-the-box channel. It worth to join.
  • There is a Google Drive folder with shared files (documents, assets etc.)
  • Designs are attached to the summary of #2900720: Designs for the Out of the Box experience intiative and are also available in InVision.
  • A styleguide pdf was created based on the designs which contains all the info needed to implement the design as an html / css styleguide. The latest version is attached to this issue in #16
  • The tasks of creating the living styleguide elements based on the items in this issue summary were defined as issues on GitHub. (It needs to be considered that there are issues which depend on other issues so there is some kind of an implementation order.)
  • Code contributions should be created as Pull Requests on GitHub.
CommentFileSizeAuthor
#27 Design Styleguide v2.pdf6.22 MBkjay
#16 Design Styleguide v1.pdf6.02 MBckrina
#15 Design Styleguide v0.png553.97 KBmarkconroy
#9 umami-components.png537.43 KBckrina
#6 05-magazine.png440.15 KBckrina
#6 04-recipie.png444.42 KBckrina
#6 03-recipies.png598.93 KBckrina
#6 02-article.png515.49 KBckrina
#6 01-featured.png432.94 KBckrina
#6 00-home.png433.7 KBckrina
#2 create_living-2881910-2.patch2.05 KBkostask
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

lauriii created an issue. See original summary.

kostask’s picture

kostask CreditAttribution: kostask at Point Blank commented
FileSize
create_living-2881910-2.patch2.05 KB

Created the umami_styleguide module based on the styleguide module at the Frontend United Athens sprint.

kostask’s picture

kostask CreditAttribution: kostask at Point Blank commented
Assigned: Unassigned » kostask
cilefen’s picture

cilefen CreditAttribution: cilefen commented
Component: other » theme system
Status: Active » Needs review
ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
CreditAttribution: ckrina at Ymbra commented

I'll work on an index for the Styleguide. Here is a first proposal to be discussed:

Guidelines

  • Accessibility
  • Principles
  • Umami brand

General styles

  • Colors
  • Grids
  • conograpgy
  • Motion
  • Typography
    • Headings
    • Text
    • Links

Components

  • Article (Full, Teaser, Highlighted Top, Highlighted Small)

  • Banner (Left, Right)
  • Form
    • Button
    • Checkbox
    • Radio
    • Input
    • Label
    • Select
    • Text area
  • Search box
  • Search result
  • Content list (1col, 2col, 3col, 4 col, list)
  • Collection list
  • Login
  • Magazine list
  • Magazine promo, Magazine promo small
  • Messages
  • Navigation
    • Main menu
    • More link
  • Recipie (Full, Teaser, Highlighted Top, Highlighted Bottom, Highlighted Small)

Regions

  • Top
  • Header
  • Footer
  • Bottom

Layouts

  • 2 columns
  • 1 column
ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
CreditAttribution: ckrina at Ymbra commented
FileSize
00-home.png433.7 KB
01-featured.png432.94 KB
02-article.png515.49 KB
03-recipies.png598.93 KB
04-recipie.png444.42 KB
05-magazine.png440.15 KB

I've just updated a bit the previous proposed index, and I attach the wireframes with the components I've found. I'll be more than happy if anyone can review and make changes there.

Also, @kjay @lauriii I have a dilemma in the magazine section: the contents listed there are articles?

martin107’s picture

martin107 CreditAttribution: martin107 as a volunteer commented
Issue summary: View changes

While reading the issue over I found I want to embed the images into the issue summary.

martin107’s picture

martin107 CreditAttribution: martin107 as a volunteer commented
Issue summary: View changes

Oh that is too much

moving the images to this comment

POST EDIT

That is still too much ...ckrina has solved the issue see below

so I am going the delete the images here.

ckrina++

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
CreditAttribution: ckrina at Ymbra commented
Issue summary: View changes
FileSize
umami-components.png537.43 KB

After yesterday's Out of the box meeting with @kjay and @markconroy we reviewed and updated the components list.

Some decisions taken is to keep the Magazine as a page content type for now, showing WYSIWYG capabilities. But we agreed that in the future it would have much sense to have a content type by itself.

I attach the components found in the wireframes and update the summary with the styleguide structure proposed.

Also @martin107 thank you for inserting the images! I've prepared a version with the components marked on the wireframes that maybe works better than each the previous separated images in a d.org issue :)

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
CreditAttribution: ckrina at Ymbra commented
Issue summary: View changes

Corrected the proposed components.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.0-alpha1 will be released the week of July 31, 2017, which means new developments and disruptive changes should now be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

andrewmacpherson’s picture

andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech for Limerick City & County Council commented
Issue tags: +Accessibility

Tagging. I'll be back for another look later.

webchick’s picture

webchick
she/they
Primary language English
Location Vancouver 🇨🇦
CreditAttribution: webchick at Acquia commented
Issue tags: +Needs accessibility review

Over at #2900720-26: Designs for the Out of the Box experience intiative, we decided to move accessibility review to this issue vs. the design issue.

markconroy’s picture

markconroy CreditAttribution: markconroy as a volunteer and at Annertech commented

@andrewmacpherson and @webchick,

While we are working out something more formal for the styleguide, I have set up a temporary site for testing here: http://umami-styleguide.mark.ie/

I'll be adding each element first on the parent page (the page you land on), then creating each component that we have registered in the issue summary (at http://umami-styleguide.mark.ie/components/*), then creating sample pages with each of those components (at http://umami-styleguide.mark.ie/pages.*).

markconroy’s picture

markconroy CreditAttribution: markconroy as a volunteer and at Annertech commented
FileSize
Design Styleguide v0.png553.97 KB

Adding design styleguide, v0.

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
CreditAttribution: ckrina at Ymbra commented
FileSize
Design Styleguide v1.pdf6.02 MB

Adding Design styleguide v1

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
CreditAttribution: ckrina at Ymbra commented
Issue summary: View changes
ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
CreditAttribution: ckrina at Ymbra commented
Assigned: kostask » Unassigned
Status: Needs review » Active
ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
CreditAttribution: ckrina at Ymbra commented
Issue summary: View changes
thamas’s picture

thamas
Primary language Hungarian
Location Hungary
CreditAttribution: thamas as a volunteer commented
Related issues: +#2759849: Create a new user-facing core theme as part of a Drupal demo
thamas’s picture

thamas
Primary language Hungarian
Location Hungary
CreditAttribution: thamas as a volunteer commented
Related issues: -#2759849: Create a new user-facing core theme as part of a Drupal demo +#2900720: Designs for the Out of the Box experience intiative
markconroy’s picture

markconroy CreditAttribution: markconroy as a volunteer and at Annertech commented

I have created issues for each of the items in the issue summary here: https://github.com/lauriii/umami/issues

thamas’s picture

thamas
Primary language Hungarian
Location Hungary
CreditAttribution: thamas as a volunteer commented
Issue summary: View changes
thamas’s picture

thamas
Primary language Hungarian
Location Hungary
CreditAttribution: thamas as a volunteer commented
Issue summary: View changes
thamas’s picture

thamas
Primary language Hungarian
Location Hungary
CreditAttribution: thamas as a volunteer commented
Issue summary: View changes
Status: Active » Postponed
ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
CreditAttribution: ckrina at Ymbra commented

As @thamas updated on the issue, to speed up the work and have a result in #2904243: Implement the Out of the Box designs as a theme for demo_umami as soon as possible we decided to abandon the style guide and work on implementing the theme

kjay’s picture

kjay CreditAttribution: kjay commented
FileSize
Design Styleguide v2.pdf6.22 MB

Design styleguide PDF v2

andrewmacpherson’s picture

andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech for Limerick City & County Council commented

Just noticed this has been postponed. Fair enough.

Over at #2900720-24: Designs for the Out of the Box experience intiative webchick and I agreed that accessibility sign-off would be move to this styleguide issue. Since this one is now postponed, I'll treat #2904243: Implement the Out of the Box designs as a theme for demo_umami as the main target for accessibility review.

Leaving the "needs accesibility review" issue on this issue, for whenever we come back to it.

andrewmacpherson’s picture

andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech for Limerick City & County Council commented
Issue tags: -Needs accessibility review

Much more a11y work has been done in the theme code itself, in the lauriii/Umami github repo.

Removing the needs a11y review tag. If we come back to a living styleguide, we'll review it again.

markconroy’s picture

markconroy CreditAttribution: markconroy as a volunteer and at Annertech commented
Status: Postponed » Closed (outdated)

Closing this issue. The work is being done in other issues.