Offset classes are coming to Office UI Fabric

A week ago I submitted a pull request to the Office UI Fabric repository to include a new set of offset classes. These offset classes could come in handy when you want to position your elements on the page.

Info: here you can see the details of the pull request - https://github.com/OfficeDev/Office-UI-Fabric/pull/280

Today the pull request got merged into the master branch. That means that in the upcoming release you will be able to make use of these new classes.

What does these offset classes do?

The offset classes allow you to move elements / columns to the right.

Here is a Codepen example for you to fiddle around with:

See the Pen VexrVx by Elio (@estruyf) on CodePen.

Which classes are available?

You have classes available for: small, medium, large, XL, XXL, and XXXL.

• .ms-u-*Offset0 - offset reset class
• .ms-u-*Offset1 - move one column
• .ms-u-*Offset2 - move two columns
• .ms-u-*Offset3
• .ms-u-*Offset4
• .ms-u-*Offset5
• .ms-u-*Offset6
• .ms-u-*Offset7
• .ms-u-*Offset8
• .ms-u-*Offset9
• .ms-u-*Offset10
• .ms-u-*Offset11

Important: change the asterisk ”*” by one of the device sizes: sm, md, lg, xl, xxl, or xxxl.

Update

Office UI Fabric announced yesterday the these classes are available in version 2.