Office 365 & SharePoint Search / Development / Branding

Office UI Fabric responsive grid: breakpoints, push/pull and other available classes

on Jan 18, 2016 by Elio Struyf with no comments

At the moment the documentation for Office UI Fabric is focussed on Office Add-ins. For example: if you check the grid styles, there is mentioned that there are utility classes for small, medium and large devices, but there is more functionality hidden inside the SASS/CSS files. In this article I will describe a couple of very useful CSS classes which you can use when building your own applications with the Office UI Fabric framework.

Note: styles documentation - http://dev.office.com/fabric/styles

UI Fabric Media Queries / screen breakpoints

First are the media queries or screen breakpoints. In the documentation you find that there are three main targets: small, medium, and large. These sizes can also be used in your Office add-ins. Here is an example of the add-in sizes when you resize the canvas:

Small – ms-u-sm1 … 12

Small sized add-in

Small sized add-in

Medium – ms-u-md1 … 12

Medium sized add-in

Medium sized add-in

Large – ms-u-lg1 … 12

Large sized add-in

Large sized add-in

When you dive into the SASS or CSS from Office UI Fabric, you can notice that there are defined more media queries and utility classes. These other screen breakpoints and utility classes could come in handy when you are creating web applications. Here you can see which media query breakpoints are available:

Small

Small device

Small device

Medium

Small device

Medium device

Large

Large device

Large device

X-Large

X-Large device

X-Large device

XX-Large

XX-Large device

XX-Large device

XXX-Large

XXX-Large device

XXX-Large device

Hiding elements via visibility classes

Like in Bootstrap and other frameworks, UI Fabric has also classes to toggle when content needs to be visible and when it needs to be hidden. There are a couple of useful utility classes for this.

Small Medium Large X-Large XX-Large XXX-Large
.ms-u-hiddenSm hidden visible visible visible visible visible
.ms-u-hiddenMd visible hidden visible visible visible visible
.ms-u-hiddenLg visible visible hidden visible visible visible
.ms-u-hiddenXl visible visible visible hidden visible visible
.ms-u-hiddenXxl visible visible visible visible hidden visible
.ms-u-hiddenXxxl visible visible visible visible visible hidden
. ms-u-hiddenMdDown hidden hidden visible visible visible visible
.ms-u-hiddenLgDown hidden hidden hidden visible visible visible
.ms-u-hiddenXlDown hidden hidden hidden hidden visible visible
.ms-u-hiddenXxlDown hidden hidden hidden hidden hidden visible
.ms-u-hiddenMdUp visible hidden hidden hidden hidden hidden
.ms-u-hiddenLgUp visible visible hidden hidden hidden hidden
.ms-u-hiddenXlUp visible visible visible hidden hidden hidden
.ms-u-hiddenXxlUp visible visible visible visible hidden hidden

Column ordering via pull, push and reset

Pulling or pushing elements is something that is also described in the Office UI Fabric documentation. With the pull and push utility classes, you are able to reorder elements on your screen based on the screen sizes. This is useful when you have an element which is important and has to be pulled upwards when you are working on a small screen device. In a more complex grid scenario it could be that you want to push an element upwards on a small screen device, and push it downwards on a bigger version. This could require to make use of multiple push or pull utility classes. When this is the case, you will have to reset your push or pulls on the element.

Push classes and reset

Pushing: .ms-u-*Push1 … 12

Reset: .ms-u-*Push0

Important: you will have to replace the "*" star in the pushing and reset classes. You can replace them with: sm, md, lg, xl, xxl, or xxxl. Example: .ms-u-smPush1 … 12

Pull classes

Pulling .ms-u-*Pull1 … 12

Reset: .ms-u-*Pull0

Important: you will have to replace the "*" star in the pulling and reset classes. You can replace them with: sm, md, lg, xl, xxl, or xxxl. Example: .ms-u-smPush1 … 12

As you can see, a lot more is possible if you just check the contents of the CSS files.

Article comments