Any major changes planned? Also, consider add-in branding at top instead of bottom

[jimbarrett33]

It's been a while since many of the designs were updated and I was wondering if there are any major changes planned to the design guidelines. It's important to know if development was starting on a new add-in today or if existing add-ins were to be converted to be more in line with the guidelines.

Also, could you consider a variant of the add-in design where the add-in branding is at the top instead of the bottom? The primary reason is for vertical scrolling in the add-in which, as much as we try to eliminate it, still has to happen sometimes. With the branding header at the top the add-in can implement a feature which allows it to scroll off the top so the entire task pane can be used to view the important content. With branding at the bottom, scrolling off is not an option so devs would have to either not have branding or try to auto-hide the branding "on scroll" which is a much more difficult thing to do. As a side point, to me branding at the top seems more natural anyway.

Thanks.

[Reezaali]

Hi @jbarr33. I've assigned @jedunn to comment on updating the designs, and the branding repositioning question you asked.

Have you tried out the Brand Bar code at this link? That should be able to help with the vertical scrolling issue.

Thanks!
Reeza.

[jimbarrett33]

@Reezaali thanks for the response. I just looked at the brand bar. I haven't tried the code but I didn't see anything specific to scrolling. I actually did not know that had code outside of the Fabric JS, React etc. Not that I want even more Fabric components to keep up with it would be good to see these rolled in to Fabric JS if the intent is really for devs to follow them. For example, they have a tab-bar there that is not a component in Fab JS. It's a lot to keep up with as a dev.

Thanks for the response.

[Reezaali]

Hi @jbarr33. We're in the process of updating the design patterns code samples to use Fabric JS now. We don't have a ship date yet.

For the Brand Bar (and all the other samples) we made use of flexbox to control the vertical height of the web page. Check out the CSS file, and you'll see it in the .ms-brand-bar, .ms-brand-bar__footer, & .ms-brand-bar__footer--image classes.

Thanks!
Reeza.

[jimbarrett33]

Thanks @Reezaali . I'll take a look. Still please consider and alternate design with brand bar at the top.