From 01ef75eaeaf4a80223218e81892f50ded8da4177 Mon Sep 17 00:00:00 2001 From: Laura Graham Date: Fri, 22 Jul 2016 15:39:01 -0700 Subject: [PATCH 1/2] Edits. --- README.md | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index baf1dee..d43d186 100644 --- a/README.md +++ b/README.md @@ -1,40 +1,40 @@ -# 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. +> Important: After you customize these templates to meet your needs, 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? +## Get started -There are no prerequisites to use these design or code resources. To get started creating a great UX for your add-in: +You can get started with these design and code resources right away. To use these patterns in your Office 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](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). +* 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. -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). ## 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 [opencode@microsoft.com](mailto:opencode@microsoft.com) 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 [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments. Copyright (c) Microsoft Corporation 2016. All rights reserved. From ee8ba8adaf86b9eb7eb728c4d7c6041565915115 Mon Sep 17 00:00:00 2001 From: Laura Graham Date: Fri, 22 Jul 2016 15:43:56 -0700 Subject: [PATCH 2/2] A few more edits. --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index d43d186..b09b08f 100644 --- a/README.md +++ b/README.md @@ -9,8 +9,6 @@ This repository provides sample HTML, CSS, and JavaScript implementations of com For an overview of the templates, see [UX design pattern templates](http://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 where your add-in will be available. These UX design patterns were tested using Office 2016 and Windows 10. - ## Get started You can get started with these design and code resources right away. To use these patterns in your Office Add-in: @@ -21,6 +19,7 @@ You can get started with these design and code resources right away. To use thes * 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. +> **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