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.
