Create dotcom shell template

[oliviaflory]

As a designer I need to know how to use the dotcom shell at different breakpoints so my designs reflect how the shell works in code.

Detailed description

Carbon provides a ui shell template to help designers see how the ui shell should work at different breakpoints, how the right and left panels look when expanded, and how the different pieces work with the grid. Link to ui shell template

We should provide a similar template to help designers with their responsive designs. Things to include:

L0 + default footer

• [x] max
• [x] xlg
• [x] lg - left panel closed
• [x] lg - left panel open
• [x] med- left panel closed
• [x] med- left panel open
• [x] sm- left panel closed
• [x] sm- left panel closed

L0 + L1 + default footer

• [x] max
• [x] xlg
• [x] lg - left panel closed
• [x] lg - left panel open
• [x] med- left panel closed
• [x] med- left panel open
• [x] sm- left panel closed
• [x] sm- left panel closed

Acceptance criteria

• [ ] template reviewed by design
• [ ] template approved by Wonil
• [ ] template added to Box folder

[oliviaflory]

@larahanlon2

I'm working on the L0 & L1 mock ups for the Dotcom shell template so designers can see how the masthead and footer should behave at the different breakpoints, and wanted to confirm that Option 2 is the desired behavior for the open state on medium and small breakpoint?

Option 1

• L1 is above the overlay
• the side menu is flush to the L0

Option 2

• L1 is below the overlay
• the side menu is flush to the L0

[oliviaflory]

@wonilsuhibm @larahanlon2

Please review the Dotcom shell template sketch file: https://ibm.ent.box.com/file/570389656421 The goal of this document is to show designers how the masthead and footer behave at different breakpoints.

A few things I'd like your take on:

1. Question from above, is the expected behavior of the side menu at small breakpoints is for the L1 to be below the overlay (Option 2)?

   

2. Is it clear in these examples that the side menu is corresponding to the L1 menu items and not the L0 menu items? Would it be more clear to label it something different like Sub link 1?

3. Should we include the Short footer in this template? I originally thought to exclude it because we don't want to encourage teams to use the short version.

---

For reference this is what Carbon's UI shell template looks like

[larahanlon2]

1. At small breakpoints (672 and below) the only L1 thing that shows is the title. All nav links roll up into the hamburger. L0 and L1 inclusive.

At small breakpoints (672 and below) the L1 is 48px height, not 80px. This is to keep all that good screen real estate free for small screens.

And to answer your question yes – the side menu at small breakpoints should be below the overlay:

—

2. I had the same question and I think it would be more clear to label it something different. I like Sub-link 1 or Sub link 1.

—

3. I would favor not including short footer if we don't want adopters to use it!

[larahanlon2]

@oliviaflory there's something weird happening with L1 title:

Which leads me to my other question/suggestion: could we label the L1 title L1 link title or Sub-link title?

[larahanlon2]

Do you think we could show an L0 and L1 title link active state when both Ls are visible? I know this is a template so the active state isn't really applicable because it's out of context but I think it looks weird without any blue underlines. The purpose of the L1 is to show child/subcontent of the parent/L0 nav links but I'm not sure if that's super obvious:

To maybe something like this:

Would that work?

[ghost]

This looks great.

2. agreed

3. Let's not include and distribute the footer symbol case by case, since it will be only a handful of pages (URX and Checkout for now).

A question: was there a reason why the footer was included in separate artboards?