mimisasouvanh/office-add-in-ux-design-patterns-code

Implementations in HTML and CSS of the design patterns in the repo Office-Add-in-UX-Design-Patterns

UX design patterns for Office Add-ins

This repository provides sample implementations in HTML, CSS, and JavaScript of common UX design patterns for Office Add-ins.

When designing Office Add-ins, the UX design of your add-in should provide compelling experiences that extend Office. For example, your add-in should provide a first-run experience, a first-class UX experience, and smooth transitions between pages, among other things. Providing a clean, modern UX experience increases user retention and adoption of your add-in. This repo has UX resources for developers that implement:

• Common UX design patterns based on best practices.
• Office Fabric components and styles.
• Add-ins that look like a natural extension of the default Office UI.

Important: After customizing these design patterns to meet your requirements, be sure to test your add-in on all platforms where your add-in will be available. These UX design patterns were tested using Office 2016 and Windows 10.

How do I get started using these resources?

There are no prerequisites to use these design or code resources. To get started creating a great UX for your add-in:

• Review the UX design patterns, and identify which ones are important to your add-in.
• Then do one or more of the following:
  • Copy the code files to your add-in project and start customizing them to meet your requirements. You will need the assets folder, and the code folder for the design pattern you choose.
  • Take a look at the specs and use them as a guide when creating your own UX design.
  • Download the Adobe Illustrator files and edit them to mock-up your own add-in designs. Get them here.

For more information about the availabe UX design patterns, see UX design pattern templates for Office Add-ins.

Known issues

• Running some code files outside of an add-in project throws a JavaScript error.
  • Resolution: Ensure you add these files to an Office add-in project.
• After converting these design patterns to a Single Page App (SPA), all sections of the HTML page become top-aligned and overlaps each other.
  • Resolution: When converting from HTML additional wrapper DIVs may be added. Ensure that the height of these additional DIVs are reset properly. For example, if a parent DIV is set to a height of 100%, a child DIV has no height, and a grandchild DIV is set to 100%, you need to set the child DIV to 100% to layout the sections properly.

Additional resources

• Best practices for developing Office Add-ins
• Office UI Fabric. This project uses version 2.1.0.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Copyright (c) Microsoft Corporation 2016. All rights reserved.