SharePoint 2013 Functional CSS Selectors

One approach to writing CSS is to use functional CSS, which are selectors (classes) with a singular purpose.  For example, let’s say you need a given item on your web page to be absolute positioned, have a purple background and an enlarged font size. Instead of putting three declarations in a single CSS style statement, you would split up the declarations across three generic CSS style statements and specify three classes for the HTML element. It is a different yet effective way to do things. SharePoint 2013 actually has several functional CSS classes already baked in their CSS files and ready for your use. 

An Example of Functional CSS

Going back to our example before, here is one way we could work the HTML and CSS:

<div class="purple-people-eater">It was a one-eyed, one-horned Flyin' Purple People Eater</div>
.purple-people-eater {
   position: absolute;
   background: purple;
   font-size: 2rem;
}

There is nothing wrong with this approach but what if we want to apply similar but not the exact same declarations on a different HTML element?

<div class="yellow-sub">We all live in a yellow submarine.</div>

We either have to duplicate declarations like so:

.yellow-sub {
   position: absolute;
   background: yellow;
   font-size: 2rem;
}

Or break things out like this:

.purple-people-eater, 
.yellow-sub {
   position: absolute;
   font-size: 2rem;
}

.purple-people-eater {
   background: purple;
}

.yellow-sub {
   background: yellow;
}

A different approach would be to use functional CSS. Our entire approach would change. The HTML would be revised to look like this:

<div class="pos-abs bkg-pur fs-2">It was a one-eyed, one-horned Flyin' Purple People Eater</div>

<div class="pos-abs bkg-yel fs-2">We all live in a yellow submarine.</div>

And this would be the CSS:

.pos-abs {
   position: absolute;
}

.bkg-pur {
   background: purple;
}

.bkg-yel {
   background: yellow;
}

.fs-2 {
   font-size: 2rem;
}

On the surface it doesn’t look like much of a difference code length wise. However this is a small code sample. Where else in the site do we need absolute positioning, colored backgrounds and an enlarged font size? The answer may be “many places”. Over time and as the code base grows, functional CSS can actually save you a lot of lines of code and make your overall approach to styling your site simpler and faster to create.

The naming convention behind the classes is totally up to you. Continuing in the same vein that was started above, the CSS could include:

.pos-abs {
   position: absolute;
}

.pos-rel {
   position: relative;
}

.pos-sta {
   position: static;
}

.bkg-pur {
   background: purple;
}

.bkg-yel {
   background: yellow;
}

.bkg-grn {
   background: green;
}

.fs-1 {
   font-size: 1rem;
}

.fs-1-5 {
   font-size: 1.5rem;
}

.fs-2 {
   font-size: 2rem;
}

.fs-2-5 {
   font-size: 2.5rem;
}

If you want to learn more about Functional CSS, I suggest you check out Building and shipping functional CSS by Cole Peters.

What Can SharePoint Offer?

Most of my work is taking what SharePoint spits out and making it look different.  I live in the world of pre-determined HTML that I can’t modify.  If you are in the same place, this post won’t necessarily help you.

If you are creating HTML for your SharePoint site, be it through master pages, page layouts, site pages, XML, CEWP, CSWP, display templates, custom apps, custom controls, custom code… you get the idea… then here is a list of CSS selectors (in this case they are all classes) that you can reference in your code to start to build out functional CSS for your site.

SharePoint 2013 Functional CSS Classes

  • All of the following style statements are from corev15.css since that is the only CSS file that is used consistently across SharePoint.
  • All theme (composed look) comments are intact as well so you can see where declarations will be potentially manipulated.
  • You don’t have to leave the declarations as is; anything can be expanded or overwritten. For example, by default alternating table rows have a transparent background. That can be changed to a solid color while still keeping the class name intact.
  • There is a set of “iffy” selectors located at the very bottom of this post.
Selector Declaration
Background
.ms-alternating background-color:transparent;
.ms-alternatingstrong /* [ReplaceColor(themeColor:”SubtleEmphasisBackground”)] */ background-color:#f1f1f1;
.ms-featurealtrow /* [ReplaceColor(themeColor:”SubtleEmphasisBackground”)] */ background-color:#f1f1f1;
.ms-ContentAccent1-bgColor /* [ReplaceColor(themeColor:”ContentAccent1″)] */ background-color:#0072C6;
.ms-ContentAccent2-bgColor /* [ReplaceColor(themeColor:”ContentAccent2″)] */ background-color:#00485B;
.ms-ContentAccent3-bgColor /* [ReplaceColor(themeColor:”ContentAccent3″)] */ background-color:#288054;
.ms-ContentAccent4-bgColor /* [ReplaceColor(themeColor:”ContentAccent4″)] */ background-color:#767956;
.ms-ContentAccent5-bgColor /* [ReplaceColor(themeColor:”ContentAccent5″)] */ background-color:#ED0033;
.ms-ContentAccent6-bgColor /* [ReplaceColor(themeColor:”ContentAccent6″)] */ background-color:#682A7A;
.ms-HoverBackground-bgColor /* [ReplaceColor(themeColor:”HoverBackground”)] */ background-color:rgba( 205,230,247,0.5 );
.ms-EmphasisBackground-bgColor /* [ReplaceColor(themeColor:”EmphasisBackground”)] */ background-color:#0072c6;
.ms-EmphasisHoverBackground-bgColor /* [ReplaceColor(themeColor:”EmphasisHoverBackground”)] */ background-color:#0067b0;
Borders
.ms-highContrastBorder border:1px solid transparent;
.ms-lines /* [ReplaceColor(themeColor:”Lines”)] */ border:1px solid #ababab;
.ms-subtleLines /* [ReplaceColor(THEME_COLOR_MPCSS_SUBTLE_LINES)] */ border:1px solid #c6c6c6;
.ms-strongLines /* [ReplaceColor(themeColor:”StrongLines”)] */ border:1px solid #92c0e0;
.ms-disabledLines /* [ReplaceColor(themeColor:”DisabledLines”)] */ border:1px solid #e1e1e1;
.ms-accentLines /* [ReplaceColor(themeColor:”AccentLines”)] */ border:1px solid #2a8dd4;
.ms-popupBorder /* [ReplaceColor(themeColor:”DialogBorder”)] */ border:1px solid #d1d1d1;
.ms-ContentAccent1-borderColor /* [ReplaceColor(themeColor:”ContentAccent1″,opacity:”1″)] */ border-color:#0072C6;
.ms-ContentAccent2-borderColor /* [ReplaceColor(themeColor:”ContentAccent2″,opacity:”1″)] */ border-color:#00485B;
.ms-ContentAccent3-borderColor /* [ReplaceColor(themeColor:”ContentAccent3″,opacity:”1″)] */ border-color:#288054;
.ms-ContentAccent4-borderColor /* [ReplaceColor(themeColor:”ContentAccent4″,opacity:”1″)] */ border-color:#767956;
.ms-ContentAccent5-borderColor /* [ReplaceColor(themeColor:”ContentAccent5″,opacity:”1″)] */ border-color:#ED0033;
.ms-ContentAccent6-borderColor /* [ReplaceColor(themeColor:”ContentAccent6″,opacity:”1″)] */ border-color:#682A7A;
.ms-StrongLines-borderColor /* [ReplaceColor(themeColor:”StrongLines”,opacity:”1″)] */ border-color:#92b7d1;
.ms-Lines-borderColor /* [ReplaceColor(themeColor:”Lines”,opacity:”1″)] */ border-color:#ababab;
.ms-SubtleLines-borderColor /* [ReplaceColor(themeColor:”SubtleLines”,opacity:”1″)] */ border-color:#c6c6c6;
.ms-DisabledLines-borderColor /* [ReplaceColor(themeColor:”DisabledLines”,opacity:”1″)] */ border-color:#e1e1e1;
.ms-AccentLines-borderColor /* [ReplaceColor(themeColor:”AccentLines”,opacity:”1″)] */ border-color:#2a8dd4;
.ms-FocusedAccentLine-borderColor /* [ReplaceColor(themeColor:”FocusedAccentLine”,opacity:”1″)] */ border-color:#2a8dd4;
.ms-RowAccent-borderColor /* [ReplaceColor(themeColor:”RowAccent”,opacity:”1″)] */ border-color:#0072c6;
.ms-EmphasisBorder-borderColor /* [ReplaceColor(themeColor:”EmphasisBorder”,opacity:”1″)] */ border-color:#0067b0;
Box Shadows
.ms-shadow box-shadow:0px 0px 7px 0px rgba(0,0,0,0.47);
Box 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%;
Clipped Areas
.clip16x16 position:relative;
overflow:hidden;
width:16px;
height:16px;
.clip13x13 position:relative;
overflow:hidden;
width:13px;
height:13px;
Cursors
.ms-cursorDefault cursor:default;
.ms-cursorPointer cursor:pointer;
.ms-draggable cursor:pointer;
Disabled Elements
.ms-disabled /* [ReplaceColor(themeColor:”DisabledText”)] */ color:#b1b1b1;
.ms-bgDisabled /* [ReplaceColor(themeColor:”DisabledBackground”)] */ background-color:#fdfdfd;
Floats
.ms-floatRight float:right;
.ms-floatLeft float:left;
.ms-clear clear:both;
Font Manipulation (also see Text Manipulation)
.ms-core-defaultFont font-weight:normal;
text-decoration:none;
white-space:normal;
word-break:normal;
line-height:normal;
.ms-textXLarge /* [ReplaceFont(themeFont:”large-body”)] */ font-family:”Segoe UI Semilight”,”Segoe UI”,”Segoe”,Tahoma,Helvetica,Arial,sans-serif;
font-size:1.46em;
.ms-textLarge /* [ReplaceFont(themeFont:”large-body”)] */ font-family:”Segoe UI Semilight”,”Segoe UI”,”Segoe”,Tahoma,Helvetica,Arial,sans-serif;
font-size:1.15em;
.ms-bold font-weight:bold;
.ms-italic font-style:italic;
Display & Visibility
.ms-displayBlock display:block;
.ms-displayInline display:inline;
.ms-displayInlineBlock display:inline-block;
.ms-table display:table;
.ms-tableRow display:table-row;
.ms-tableCell display:table-cell;
.ms-hide display:none;
.ms-visibilityHidden visibility:hidden;
Lists
.ms-noList ul list-style-type:none;
padding-left:0px;
.ms-noList ol
.ms-noList
Margin
.ms-margin0 margin:0px;
.ms-smallIndent margin-left:20px;
.ms-indent margin-left:25px;
Padding
.ms-padding0 padding:0px;
Position
.ms-positionRelative position:relative;
.ms-positionAbsolute position:absolute;
Text Manipulation (also see Font Manipulation)
.ms-core-defaultFont font-weight:normal;
text-decoration:none;
white-space:normal;
word-break:normal;
line-height:normal;
.ms-uppercase text-transform:uppercase;
.ms-errorcolor /* [ReplaceColor(themeColor:”ErrorText”)] */ color:#bf0000;
.ms-successcolor /* [ReplaceColor(themeColor:”SearchURL”)] */ color:#338200;
.ms-warning /* [ReplaceColor(themeColor:”ErrorText”)] */ color:#bf0000;
font-weight:bold;
.ms-toolbar /* [ReplaceColor(themeColor:”CommandLinks”)] */ color:#666;
.ms-ContentAccent1-fontColor /* [ReplaceColor(themeColor:”ContentAccent1″,opacity:”1″)] */ color:#0072C6;
.ms-ContentAccent2-fontColor /* [ReplaceColor(themeColor:”ContentAccent2″,opacity:”1″)] */ color:#00485B;
.ms-ContentAccent3-fontColor /* [ReplaceColor(themeColor:”ContentAccent3″,opacity:”1″)] */ color:#288054;
.ms-ContentAccent4-fontColor /* [ReplaceColor(themeColor:”ContentAccent4″,opacity:”1″)] */ color:#767956;
.ms-ContentAccent5-fontColor /* [ReplaceColor(themeColor:”ContentAccent5″,opacity:”1″)] */ color:#ED0033;
.ms-ContentAccent6-fontColor /* [ReplaceColor(themeColor:”ContentAccent6″,opacity:”1″)] */ color:#682A7A;
Text Manipulation – Alignment
.ms-alignRight text-align:right;
.ms-alignLeft text-align:left;
.ms-alignCenter text-align:center;
Text Manipulation – Vertical Alignment
.ms-verticalAlignTop vertical-align:top;
.ms-verticalAlignMiddle vertical-align:middle;
.ms-verticalAlignBaseline vertical-align:baseline;
Word 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;

More Functional Styles

The following is my “iffy” pile of functional CSS. These style statements are generic, but not nearly as generic as some of the above statements.

Selector Declaration
Emphasis
.ms-emphasis /* [ReplaceColor(themeColor:”EmphasisText”)] */ color:#fff;
/* [ReplaceColor(themeColor:”EmphasisBackground”)] */ background-color:#0072c6;
.ms-emphasis:hover /* [ReplaceColor(themeColor:”EmphasisHoverBackground”)] */ background-color:#0067b0;
.ms-emphasisBorder /* [ReplaceColor(themeColor:”EmphasisBorder”)] */ border:1px solid #0067b0;
.ms-emphasisBorder:hover /* [ReplaceColor(themeColor:”EmphasisHoverBorder”)] */ border-color:#004d85;
.ms-subtleEmphasis /* [ReplaceColor(themeColor:”SubtleEmphasisText”)] */ color:#666;
/* [ReplaceColor(themeColor:”SubtleEmphasisBackground”)] */ background-color:#f1f1f1;
.ms-subtleEmphasisCommand /* [ReplaceColor(themeColor:”SubtleEmphasisCommandLinks”)] */ color:#262626;
/* [ReplaceColor(themeColor:”SubtleEmphasisBackground”)] */ background-color:#f1f1f1;
.ms-subtleEmphasisCommand:hover /* [ReplaceColor(themeColor:”CommandLinksHover”)] */ color:#0072c6;
.ms-subtleEmphasisCommand:active /* [ReplaceColor(themeColor:”CommandLinksPressed”)] */ color:#004d85;
.ms-subtleEmphasisCommand-disabled /* [ReplaceColor(themeColor:”CommandLinksDisabled”)] */ color:#b1b1b1;
Forms
.ms-formlabel white-space:nowrap;
font-weight:normal;
padding:6px 5px 6px 0px;
.ms-formbody background:transparent;
padding:6px 0px;
.ms-formdescriptioncolumn-wide width:200px;
.ms-formdescriptioncolumn-slim width:113px;
.ms-inputuserfield height:25px;
padding:0px 5px;
.ms-inputuserfield:disabled /* [ReplaceColor(themeColor:”DisabledText”)] */ color:#b1b1b1;
/* [ReplaceColor(themeColor:”DisabledLines”)] */ border-color:#e1e1e1;
/* [ReplaceColor(themeColor:”DisabledBackground”,opacity:”1″)] */ background-color:#fdfdfd;
/* [ReplaceColor(themeColor:”DisabledBackground”)] */ background-color:#fdfdfd;
Headers
.ms-standardheader font-size:1em;
margin:0px;
text-align:left;
font-weight:normal;