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

check it out in Plunker


Vertical Alignment

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

check it out in Plunker


Position

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

check it out in Plunker


Float

check it out in Plunker


Display

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.

check it out in Plunker


General

check it out in Plunker


Text

They don’t many sizes to work with here

check it out in Plunker


Text Wrapping

check it out in Plunker


Sizing

check it out in Plunker


Lists

check it out in Plunker


Padding/Margin

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

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

check it out in Plunker


There are no comments.

Leave a Reply