Version Scoping Sample

For scenarios where multiple major versions may live in the same DOM, Fabric provides a "scoped" version of all Core styles that will only apply those styles when used under a versioned wrapper class.

To use scoped Fabric styles, simply add the versioned wrapper class to the parent DOM element you wish to scope, then use Fabric as usual.

For example, take this following title, which uses unscoped Fabric:


<div class="ms-font-xxl ms-fontColor-themePrimary">This title uses ms-fontColor-themePrimary from unscoped Fabric.</div>
This title uses ms-fontColor-themePrimary from unscoped Fabric.

To scope this title to v5.1.0, add an extra wrapper div around it and add both the ms-Fabric wrapper class and the scoping class for the current version of Fabric. Note that to illustrate this behavior for this demonstration, .ms-fontColor-themePrimary has been overridden with a different color when used under the ms-Fabric--v5-1-0 version-scoping class.


  <div class="ms-Fabric ms-Fabric--v5-1-0">
    <div class="ms-font-xxl ms-fontColor-themePrimary">This title uses ms-fontColor-themePrimary from Fabric 5.1.0.</div>
  </div>
This title uses ms-fontColor-themePrimary from Fabric 5.1.0.