Style Guide: For designers

For an overall style guide refer to the design-patterns-style-guide.md

Styling

The portal includes a built in list of CSS classes that may be used inside of your templates.

Browse the following topics to learn about portal styling:

Style Guide: For designers

For an overall style guide refer to the design-patterns-style-guide.md

Style: Custom CSS Files

Extension developers may choose to combine commonly used classes into a CSS file. CSS styles defined in stylesheets are sanitized using the same rules as the style attribute (see below). All custom class names must start with the .ext- prefix, identifying classes which are owned by the extension. First, add a new CSS file to your extension:

\Client\Parts\Custom\Styles\ExampleStyles.css

.ext-too-many-clicks-box {
    color: red;
    border: 2px dotted red;
    padding: 8px;
    text-align: center;
}

CSS files can then be referenced from any PDL file, inside of the Definition element:

\Client\Parts\Custom\CustomParts.pdl

<?xml version="1.0" encoding="utf-8" ?>
<Definition xmlns="http://schemas.microsoft.com/aux/2013/pdl" Area="Parts">
  <!--
    The following sample demonstrates the use of custom parts. Custom parts
    supply HTML templates and can be styled with custom style sheets.
  -->
  <StyleSheet Source="{Css Source='Styles\\ExampleStyles.css'}" />
  ...
</Definition>

The styles included in the CSS file may now be used inside HTML templates:

\Client\Parts\Custom\Templates\ExampleCustomPart.html

<div class="ext-too-many-clicks-box" data-bind="visible: !allowMoreClicks()">
    That's too many clicks!
    <button data-bind="click: resetClickCount">Reset</button>
</div>

Style Guide: For designers

For an overall style guide refer to the design-patterns-style-guide.md

Style: Style Sanitization

To ensure a consistent and sandboxed experience in the portal, CSS is analyzed at runtime to filter out disallowed properties or values. A typical example of a disallowed style is "position: fixed;", which would allow developers to move content outside of their parts.

All CSS properties should be allowed with a few exceptions documented at the end of this article. As the analysis is allowlist based, you may encounter CSS properties being erroneously filtered out. Shall this occur, report the issue on Stack Overflow.

The following properties only allow the specified values:

position: [ static | relative | absolute ]
text-transform: [ none | uppercase | lowercase ]

The following properties are sanitized out:

font
font-family
list-style

Certain properties have inconsistent behavior across browsers, or full support requires vendor prefixes. To enable them in a supported way, use the Framework style class instead.

user-select: use class 'msportalfx-unselectable'

Style Guide: For designers

For an overall style guide refer to the design-patterns-style-guide.md

Style: Themed Color Classes

Base colors within the portal have been outfitted to change based on user-chosen themes. Since the actual hex values of these colors are determined by the theme definitions themselves, acceptable contrast between elements must be maintained by framework. In order to react to theme changes and maintain readability, the following classes have been made available to extension authors:

Text color classes

// Suited for main text, will render with the highest contrast
msportalfx-text-default

// Suited for labels, subheaders, or any secondary text
msportalfx-text-muted-50

// Suited for links, or call to action text
msportalfx-link-primary

// Suited for highlighting searched text
msportalfx-highlight

Style Guide: For designers

For an overall style guide refer to the design-patterns-style-guide.md

Style: Utility Classes

There are several built-in classes that make working with the portal just a little bit easier.

Code Formatting

<pre class="msportalfx-code"><code>// this is code</code></pre>

In addition to using the msportalfx-code class, text blocks may be set to use a monospace style font:

<div class="msportalfx-font-monospace">msportalfx-font-monospace</div>

Utility Classes

msportalfx-removeTableBorders - Removes all borders from a TABLE element.

msportalfx-boxsizing-borderbox - Changes layout to include padding and borders in its width and height.

msportalfx-removeDefaultListStyle - Remove bullets from a ul or ol element.

msportalfx-lineheight-reset - Reset the line height back to the default of the current font size.

msportalfx-removepartpadding - Remove default padding on a part template.

msportalfx-removepartpaddingside - Remove padding on the side only of a part template.

msportalfx-partdivider - Sets up a horizontal side to side divider within the part.

msportalfx-clearfix - Applied to a container that contains floated elements, ensures the container gets a size and that DOM element following the container flows the document normally with no overlap.

msportalfx-gridcolumn-asseticon - Applied as the css class name for a grid column which is showing an asset SVG icon.

msportalfx-gridcolumn-statusicon - Applied as the css class name for a grid column which is showing a status SVG icon.

Style Guide: For designers

For an overall style guide refer to the design-patterns-style-guide.md

Style: Color Palette

The portal offers a built-in set of coloring classes based on a core palette. Using these classes ensures a consistent experience for all users. This is especially important when the color conveys meaning, or differentiating data.

Coloring to convey status
Coloring to differentiate data
Coloring SVG

Coloring to convey status

When conveying status, use these classes to relevant UI in your design. These classes ensure any future changes to the status colors will automatically apply to your content.

"msportalfx-bg-*" changes the background color.
"msportalfx-text-*" changes the foreground color. The foreground color applies to text and based on the text color as basis, like border.
"msportalfx-br-*" changes the border color.
"msportalfx-fill-*" changes the SVG fill color.

Use them in combination to update multiple aspects simulteanously.

Info

msportalfx-bg-info

msportalfx-text-info

msportalfx-br-info

msportalfx-fill-info

Dirty

msportalfx-bg-dirty

msportalfx-text-dirty

msportalfx-br-dirty

msportalfx-fill-dirty

Success

msportalfx-bg-success

msportalfx-text-success

msportalfx-br-success

msportalfx-fill-success

Warning

msportalfx-bg-warning

msportalfx-text-warning

msportalfx-br-warning

msportalfx-fill-warning

Error

msportalfx-bg-error

msportalfx-text-error

msportalfx-br-error

msportalfx-fill-error

Coloring to differentiate data

When representing data, differentiating with color is a common technique. For example, drawing lines in a chart, or coloring pie chart sections. The following sets of classes are provided to specify a background color on your elements. They also define a contrasted color for the text. They don't change appearance between themes.

Base set

msportalfx-bgcolor-a0

msportalfx-bgcolor-b0

msportalfx-bgcolor-c0

msportalfx-bgcolor-d0

msportalfx-bgcolor-e0

msportalfx-bgcolor-f0

msportalfx-bgcolor-g0

msportalfx-bgcolor-h0

msportalfx-bgcolor-i0

msportalfx-bgcolor-j0

msportalfx-bgcolor-k0

Shade 1

msportalfx-bgcolor-a1

msportalfx-bgcolor-b1

msportalfx-bgcolor-c1

msportalfx-bgcolor-d1

msportalfx-bgcolor-e1

msportalfx-bgcolor-f1

msportalfx-bgcolor-g1

msportalfx-bgcolor-h1

msportalfx-bgcolor-i1

msportalfx-bgcolor-j1

msportalfx-bgcolor-k1

Shade 2

msportalfx-bgcolor-a0s1

msportalfx-bgcolor-b0s1

msportalfx-bgcolor-c0s1

msportalfx-bgcolor-d0s1

msportalfx-bgcolor-e0s1

msportalfx-bgcolor-f0s1

msportalfx-bgcolor-g0s1

msportalfx-bgcolor-h0s1

msportalfx-bgcolor-i0s1

msportalfx-bgcolor-j0s1

msportalfx-bgcolor-k0s1

Shade 3

msportalfx-bgcolor-a0s2

msportalfx-bgcolor-b0s2

msportalfx-bgcolor-c0s2

msportalfx-bgcolor-d0s2

msportalfx-bgcolor-e0s2

msportalfx-bgcolor-f0s2

msportalfx-bgcolor-g0s2

msportalfx-bgcolor-h0s2

msportalfx-bgcolor-i0s2

msportalfx-bgcolor-j0s2

msportalfx-bgcolor-k0s2

Tint 1

msportalfx-bgcolor-a2

msportalfx-bgcolor-b2

msportalfx-bgcolor-c2

msportalfx-bgcolor-d2

msportalfx-bgcolor-e2

msportalfx-bgcolor-f2

msportalfx-bgcolor-g2

msportalfx-bgcolor-h2

msportalfx-bgcolor-i2

msportalfx-bgcolor-j2

msportalfx-bgcolor-k2

Tint 2

msportalfx-bgcolor-a0t1

msportalfx-bgcolor-b0t1

msportalfx-bgcolor-c0t1

msportalfx-bgcolor-d0t1

msportalfx-bgcolor-e0t1

msportalfx-bgcolor-f0t1

msportalfx-bgcolor-g0t1

msportalfx-bgcolor-h0t1

msportalfx-bgcolor-i0t1

msportalfx-bgcolor-j0t1

msportalfx-bgcolor-k0t1

Tint 3

msportalfx-bgcolor-a0t2

msportalfx-bgcolor-b0t2

msportalfx-bgcolor-c0t2

msportalfx-bgcolor-d0t2

msportalfx-bgcolor-e0t2

msportalfx-bgcolor-f0t2

msportalfx-bgcolor-g0t2

msportalfx-bgcolor-h0t2

msportalfx-bgcolor-i0t2

msportalfx-bgcolor-j0t2

msportalfx-bgcolor-k0t2

Coloring SVG

Certain types of custom SVG content should adhere to the color palette. This is mostly for custom controls that use color to differentiate data, like charts. Iconography does not have this requirement, and instead you should refer to the Icons documentation to color those.

To use the palette within SVG content, use the same class names as the one for data differentiation. The classes affect both the "stroke" and "fill" properties. The CSS rules assume the target element is within an "g" element contained in an "svg" element. The following sample shows proper usage:

<svg>
    <g>
        <rect class="msportafx-bgcolor-i0t2"/>
    </g>
</svg>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

portalfx-extensions-style.md

portalfx-extensions-style.md

Style Guide: For designers

Styling

Style Guide: For designers

Style: Custom CSS Files

Style Guide: For designers

Style: Style Sanitization

Style Guide: For designers

Style: Themed Color Classes

Text color classes

Style Guide: For designers

Style: Utility Classes

Code Formatting

Utility Classes

Style Guide: For designers

Style: Color Palette

Coloring to convey status

Coloring to differentiate data

Coloring SVG

Files

portalfx-extensions-style.md

Latest commit

History

portalfx-extensions-style.md

File metadata and controls

Style Guide: For designers

Styling

Style Guide: For designers

Style: Custom CSS Files

Style Guide: For designers

Style: Style Sanitization

Style Guide: For designers

Style: Themed Color Classes

Text color classes

Style Guide: For designers

Style: Utility Classes

Code Formatting

Utility Classes

Style Guide: For designers

Style: Color Palette

Coloring to convey status

Coloring to differentiate data

Coloring SVG