There are a number of already built in helper (or utility) classes in Office 365 and SharePoint 2013. These classes can be very useful when you are building new components. You can skip writing CSS for some of the most basic things by simply using their classes on your objects. Below is the CSS that is already in your Office 365 or SharePoint 2013 site. Below are the snippets copied from the “CORE” CSS file of the items I found useful.

Horizontal Alignment

.ms-alignRight
{
    text-align:right;
}
.ms-alignLeft
{
    text-align:left;
}
.ms-alignCenter
{
    text-align:center;
}

check it out in Plunker


Vertical Alignment

I found it odd that they don’t have a vertical-align: bottom;

.ms-verticalAlignTop
{
    vertical-align:top;
}
.ms-verticalAlignMiddle
{
    vertical-align:middle;
}
.ms-verticalAlignBaseline
{
    vertical-align:baseline;
}

check it out in Plunker


Position

I noticed that they have absolute listed twice in the “CORE” css files

.ms-positionRelative
{
    position:relative;
}
.ms-positionAbsolute
{
    position:absolute;
}

check it out in Plunker


Float

.ms-floatRight
{
    float:right;
}
.ms-floatLeft
{
    float:left;
}

check it out in Plunker


Display

.ms-displayBlock
{
    display:block;
}
.ms-displayInline
{
    display:inline;
}
.ms-displayInlineBlock
{
    display:inline-block;
}

check it out in Plunker


Table

I use this one the most and I absolutely love it. Only caveat is that you cannot specify columns, it’s a very strict table. If you need to split a cell then you would have to put in an entire new table. This is used to turn ‘div’s into table like objects for positioning and to control the display. I also typically pair this with the vertical positioning. You can see Microsoft use this in #s4-titlerow.

.ms-table
{
    display:table;
}
.ms-tableRow
{
    display:table-row;
}
.ms-tableCell
{
    display:table-cell;
}

check it out in Plunker


General

.ms-hide
{
    display:none;
}
.ms-visibilityHidden
{
    visibility:hidden;
}
.ms-clear
{
    clear:both;
}

check it out in Plunker


Text

They don’t many sizes to work with here

.ms-textXLarge
{
    font-family:"Segoe UI Semilight","Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
    font-size:1.46em;
}
.ms-textLarge
{
    font-family:"Segoe UI Semilight","Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
    font-size:1.15em;
}
.ms-textSmall,
.ms-textXSmall
{
    font-size:.9em;
}
.ms-bold
{
    font-weight:bold;
}
.ms-italic
{
    font-style:italic;
}
.ms-smallIndent
{
    margin-left:20px;
}
.ms-indent
{
    margin-left:25px;
}

check it out in Plunker


Text Wrapping

.ms-noWrap
{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.ms-forceWrap
{
    word-wrap:break-word;
}
.ms-normalWrap
{
    white-space:normal;
    word-wrap:normal;
}

check it out in Plunker


Sizing

.ms-fullWidth
{
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    width:100%;
}
.ms-fullHeight
{
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    height:100%;
}
.ms-fillBoxFull
{
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    height:100%;
    width:100%;
}
.ms-fillBox
{
    height:100%;
    width:100%;
}

check it out in Plunker


Lists

.ms-noList ul,.ms-noList ol,.ms-noList
{
    list-style-type:none;
    padding-left:0px;
}

check it out in Plunker


Padding/Margin

put this on your items that you want to eliminate padding or margin

.ms-padding0
{
    padding:0px;
}
.ms-margin0
{
    margin:0px;
}

Cursor

If you have an actionable ‘div’ tag or element other than an ‘a’ tag and you want to set the cursor to look like a link

.ms-cursorDefault
{
    cursor:default;
}
.ms-cursorPointer
{
    cursor:pointer;
}

check it out in Plunker


About the Author

Developer, Designer, Thinker, Problem Solver, Office Servers and Services MVP, & Collaboration Director @ SoHo Dragon.

View Articles