Skip to content
This repository has been archived by the owner on Sep 10, 2019. It is now read-only.

Updates to the readme. #9

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Updates to the readme. #9

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
01ef75e
Edits.
Lauragra Jul 22, 2016
ee8ba8a
A few more edits.
Lauragra Jul 22, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 20 additions & 21 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,39 @@
# UX design patterns for Office Add-ins
# UX design pattern templates for Office Add-ins

This repository provides sample implementations in HTML, CSS, and JavaScript of common UX design patterns for Office Add-ins.
This repository provides sample HTML, CSS, and JavaScript implementations of common UX design patterns for Office Add-ins. Use the UX design pattern templates to:

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:
- Apply solutions to common customer scenarios.
- Apply design best practices.
- Incorporate Office UI Fabric components and styles.
- Build add-ins that visually integrate with the default Office UI.

* 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.
For an overview of the templates, see [UX design pattern templates](http://dev.office.com/docs/add-ins/design/ux-design-patterns).

> 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.
## Get started

## How do I get started using these resources?
You can get started with these design and code resources right away. To use these patterns in your Office Add-in:

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](http://dev.office.com/docs/add-ins/design/ux-design-patterns), and identify which ones are important to your add-in.
* Do one or more of the following:
* Copy the code files to your add-in project and customize them to meet your needs. You will need the [assets folder](https://github.com/OfficeDev/Office-Add-in-UX-Design-Pattern-Code/tree/master/assets), and the code folder for the design pattern you choose.
* Take a look at the [specs](https://github.com/OfficeDev/Office-Add-in-UX-Design-Patterns/tree/master/Patterns/PDF) and use them as a guide when you create your UX design.
* Download the [Adobe Illustrator](https://github.com/OfficeDev/Office-Add-in-Design-Patterns/blob/master/Patterns/Source%20Files) files and edit them to mock-up your own add-in designs.

* 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](https://github.com/OfficeDev/Office-Add-in-UX-Design-Pattern-Code/tree/master/assets), and the code folder for the design pattern you choose.
* Take a look at the [specs](https://github.com/OfficeDev/Office-Add-in-UX-Design-Patterns) 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](https://github.com/OfficeDev/Office-Add-in-Design-Patterns/blob/master/Patterns/Source%20Files).

For more information about the availabe UX design patterns, see [UX design pattern templates for Office Add-ins](https://dev.office.com/docs/add-ins/design/ux-design-patterns).
> **Important:** After you customize these templates to meet your needs, be sure to test your add-in on all platforms on which it will run. We tested these templates on Office 2016 running on Windows 10.

## 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.
* Resolution: Make sure that you add these files to an Office add-in project.
* When you convert these design patterns to a Single Page App (SPA), all sections of the HTML page become top-aligned and overlap each other.
* Resolution: When you convert from HTML, additional wrapper DIVs might be added. Make sure 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 lay out the sections properly.

## Additional resources

* [Best practices for developing Office Add-ins](https://dev.office.com/docs/add-ins/overview/add-in-development-best-practices)
* [Office UI Fabric](http://dev.office.com/fabric/). This project uses version 2.1.0.
* [Office UI Fabric](http://dev.office.com/fabric/) (this project uses version 2.1.0)

This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [[email protected]](mailto:[email protected]) with any additional questions or comments.
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information, see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [[email protected]](mailto:[email protected]) with any additional questions or comments.

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

Expand Down