You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/sp-add-ins/sharepoint-add-ins-ux-design-guidelines.md
+60-67Lines changed: 60 additions & 67 deletions
Original file line number
Diff line number
Diff line change
@@ -1,10 +1,3 @@
1
-
---
2
-
title: SharePoint Add-ins UX design guidelines
3
-
ms.prod: SHAREPOINT
4
-
ms.assetid: a4a8f53c-27d7-43dc-b6db-aa7b1f1c7d45
5
-
---
6
-
7
-
8
1
# SharePoint Add-ins UX design guidelines
9
2
Learn about general user experience (UX) design guidelines for add-ins in SharePoint 2013, including choosing the chrome, using CSS, managing user licenses, and other design tasks.
10
3
@@ -46,7 +39,7 @@ The add-in template can be used only for SharePoint-hosted ASPX pages. The templ
46
39
47
40
48
41
49
-
42
+
50
43
51
44
The add-in template is the default in Visual Studio when you create an add-in web and pages within that web.
52
45
@@ -66,7 +59,7 @@ If you're not building SharePoint-hosted ASPX pages, but you still want your add
66
59
67
60
68
61
69
-
62
+
70
63
71
64
72
65
@@ -78,7 +71,7 @@ If you're not building SharePoint-hosted ASPX pages, but you still want your add
78
71
79
72
80
73
81
-
74
+
82
75
83
76
84
77
@@ -192,97 +185,97 @@ The first thing to do when you are styling your add-in is to use semantic HTML a
192
185
193
186
|**Example**|**Used for**|**Style**|
194
187
|:-----|:-----|:-----|
195
-
||Extra large body text|.ms-textXLarge|
196
-
||Large body text|.ms-textLarge|
197
-
||Normal body text|Inherited automatically|
198
-
||Small body text|.ms-textSmall|
||Main title on the page|.ms-core-pageTitle|
207
-
||Title for dialog boxes, forms, blogs, and discussion posts. It's an alternative "primary" title for special content types or add-ins that take up the entire pagethat you want to be different from a regular wiki or Web Parts page.|H1|
208
-
||Secondary heading in relation to H1. For example, Communities uses H1 Accent for the title of a post, and H2 Accent for the best "response" to the post.|H2|
209
-
||Generally a subheading under H2.|H3|
210
-
||Subheadings under H3.|H4|
211
-
||Title of the main/primary Web Part on a page, or for main section headers.|.ms-webpart-titleText|
212
-
||Title for headings within dialog boxes or callouts.|.ms-dlg-heading|
199
+
||Main title on the page|.ms-core-pageTitle|
200
+
||Title for dialog boxes, forms, blogs, and discussion posts. It's an alternative "primary" title for special content types or add-ins that take up the entire pagethat you want to be different from a regular wiki or Web Parts page.|H1|
201
+
||Secondary heading in relation to H1. For example, Communities uses H1 Accent for the title of a post, and H2 Accent for the best "response" to the post.|H2|
202
+
||Generally a subheading under H2.|H3|
203
+
||Subheadings under H3.|H4|
204
+
||Title of the main/primary Web Part on a page, or for main section headers.|.ms-webpart-titleText|
205
+
||Title for headings within dialog boxes or callouts.|.ms-dlg-heading|
213
206
214
207
**Table 3. Navigation styles**
215
208
216
209
217
210
|**Example**|**Used for**|**Style**|
218
211
|:-----|:-----|:-----|
219
-
||Heading of the left navigation bar.|.ms-core-listMenu-verticalBox > .ms-core-listMenu-root > li > .ms-core-listMenu-item|
220
-
||Link in the left navigation bar.|.ms-core-listMenu-verticalBox|
221
-
||Selected item in the left navigation bar.|.ms-core-listMenu-verticalBox + .ms-accentText|
222
-
||Item in the top navigation bar.||
223
-
||Selected item in the top navigation bar.||
212
+
||Heading of the left navigation bar.|.ms-core-listMenu-verticalBox > .ms-core-listMenu-root > li > .ms-core-listMenu-item|
213
+
||Link in the left navigation bar.|.ms-core-listMenu-verticalBox|
214
+
||Selected item in the left navigation bar.|.ms-core-listMenu-verticalBox + .ms-accentText|
215
+
||Item in the top navigation bar.||
216
+
||Selected item in the top navigation bar.||
224
217
225
218
**Table 4. Command styles**
226
219
227
220
228
221
|**Example**|**Used for**|**Style**|
229
222
|:-----|:-----|:-----|
230
-
||Primary action links you expect the user to take within a given container or page. For example, this would be used to style the commands underneath a callout. This will always be the same color for visited and non-visited commands.|.ms-commandLink|
231
-
||Also used to style action links, but for actions that are secondary to the content. This style is used for these secondary actions, so they don't compete with content for attention.|.ms-secondaryCommandLink|
232
-
||Links in the callout.|.ms-calloutLink|
223
+
||Primary action links you expect the user to take within a given container or page. For example, this would be used to style the commands underneath a callout. This will always be the same color for visited and non-visited commands.|.ms-commandLink|
224
+
||Also used to style action links, but for actions that are secondary to the content. This style is used for these secondary actions, so they don't compete with content for attention.|.ms-secondaryCommandLink|
225
+
||Links in the callout.|.ms-calloutLink|
233
226
234
227
**Table 5. Modifier styles**
235
228
236
229
237
230
|**Example**|**Used for**|**Style**|
238
231
|:-----|:-----|:-----|
239
-
||Helper class that will provide the accent color from the current theme for text.|.ms-accentText|
240
-
||Links in the content should inherit from default hyperlink styling and behavior. Hyperlink styling applies a color and a hover effect to indicate that it's a link instead of normal text.|Inherited from using <a>.|
241
-
||Error messages that occur in forms.|.ms-error|
242
-
||Helper class that provides a softened gray for text that should be less emphasized than normal body text.|.ms-soften|
243
-
||Helper class that applies the "disabled" color to text, which is used for denoting disabled states.|.ms-disabled|
244
-
||Helper class that transforms the text to all caps.|.ms-uppercase|
245
-
||Helper class to style text like forms.|.ms-helper|
246
-
||Dashed line divider that is used to divide sections in the Quick Launch and in menus.|HR|
232
+
||Helper class that will provide the accent color from the current theme for text.|.ms-accentText|
233
+
||Links in the content should inherit from default hyperlink styling and behavior. Hyperlink styling applies a color and a hover effect to indicate that it's a link instead of normal text.|Inherited from using <a>.|
234
+
||Error messages that occur in forms.|.ms-error|
235
+
||Helper class that provides a softened gray for text that should be less emphasized than normal body text.|.ms-soften|
236
+
||Helper class that applies the "disabled" color to text, which is used for denoting disabled states.|.ms-disabled|
237
+
||Helper class that transforms the text to all caps.|.ms-uppercase|
238
+
||Helper class to style text like forms.|.ms-helper|
239
+
||Dashed line divider that is used to divide sections in the Quick Launch and in menus.|HR|
247
240
248
241
**Table 6. Part user interface styles**
249
242
250
243
251
244
|**Example**|**Used for**|**Style**|
252
245
|:-----|:-----|:-----|
253
-
||Main inline text at the top of a part.|.ms-textXLarge + .ms-soften|
254
-
||Commands in the top line of a part; at most there should be only one or two of these per part.|.ms-heroCommandLink|
255
-
||Text shown to entice the user to interact with the part when it doesn't contain data.|.ms-attractMode|
256
-
||Text shown to the user when there is no data available.|.ms-emptyMode|
257
-
||View controls, such as a pivot.|.ms-pivot-link|
258
-
||List items that are also links.|.ms-listLink|
246
+
||Main inline text at the top of a part.|.ms-textXLarge + .ms-soften|
247
+
||Commands in the top line of a part; at most there should be only one or two of these per part.|.ms-heroCommandLink|
248
+
||Text shown to entice the user to interact with the part when it doesn't contain data.|.ms-attractMode|
249
+
||Text shown to the user when there is no data available.|.ms-emptyMode|
250
+
||View controls, such as a pivot.|.ms-pivot-link|
251
+
||List items that are also links.|.ms-listLink|
259
252
260
253
**Table 7. Background and border styles**
261
254
262
255
263
256
|**Example**|**Used for**|**Style**|
264
257
|:-----|:-----|:-----|
265
-
||To style a rectangle that should be heavily emphasized on the page.|.ms-emphasis|
266
-
||Border of an emphasized element.|.ms-emphasisBorder|
267
-
||A more subtle emphasis of an element.|.ms-subtleEmphasis|
268
-
||Commands in an element styled with ms-subtleEmphasis.|.ms-subtleEmphasisCommand|
269
-
||Disabled command in an element styled with ms-subtleEmphasis.|.ms-subtleEmphasisCommand-disabled|
||To apply an overlay on the background element.|.ms-bgOverlay|
279
-
||To make the background of an element appear disabled.|.ms-bgDisabled|
280
-
||To apply the header background color.|.ms-bgHeader|
281
-
||To apply the footer background color.|.ms-bgFooter|
282
-
||Elements that should have a highlighted color on hover. The example shows the element when the mouse is not hovering over it.|.ms-bgHoverable|
283
-
||Elements that should have a highlighted color on hover. The example shows the element when the mouse is hovering over it.|.ms-bgHoverable|
284
-
||To show selection on an element.|.ms-bgSelected|
285
-
||Elements in the top bar of the page.|.ms-topBar|
258
+
||To style a rectangle that should be heavily emphasized on the page.|.ms-emphasis|
259
+
||Border of an emphasized element.|.ms-emphasisBorder|
260
+
||A more subtle emphasis of an element.|.ms-subtleEmphasis|
261
+
||Commands in an element styled with ms-subtleEmphasis.|.ms-subtleEmphasisCommand|
262
+
||Disabled command in an element styled with ms-subtleEmphasis.|.ms-subtleEmphasisCommand-disabled|
||To apply an overlay on the background element.|.ms-bgOverlay|
272
+
||To make the background of an element appear disabled.|.ms-bgDisabled|
273
+
||To apply the header background color.|.ms-bgHeader|
274
+
||To apply the footer background color.|.ms-bgFooter|
275
+
||Elements that should have a highlighted color on hover. The example shows the element when the mouse is not hovering over it.|.ms-bgHoverable|
276
+
||Elements that should have a highlighted color on hover. The example shows the element when the mouse is hovering over it.|.ms-bgHoverable|
277
+
||To show selection on an element.|.ms-bgSelected|
278
+
||Elements in the top bar of the page.|.ms-topBar|
286
279
For more information, see [Use a SharePoint website's style sheet in SharePoint Add-ins](use-a-sharepoint-website-s-style-sheet-in-sharepoint-add-ins.md).
287
280
288
281
@@ -453,7 +446,7 @@ Parts are a way for your add-in to surface some information or a small interacti
In Figure 3, the **Tag Cloud from UX Design add-in** is the title of the part. The tag cloud itself is served from the add-in content, and it is hosted in an **iframe** element and fully isolated from the hosting page. Because the add-in content is using the host web's CSS file, it fits in seamlessly with the host page.
459
452
@@ -625,7 +618,7 @@ If you have functionality that would make sense to surface in the context of lis
625
618
626
619
627
620
628
-
621
+
629
622
630
623
The code for custom actions that are surfaced in the host web is the same as in previous versions of SharePoint, with the following restrictions:
0 commit comments