SPTechCon Boston September 2014 Session Review

This blog entry is a post session review of resources mentioned and code used in our Bring (Event More) Sexy Back to SharePoint 2013 session from September 2014 SPTechCon in Boston.

If you want to jump straight to the code, please visit our GitHub repository.

If you have any questions about browser support, we highly recommend you check out and bookmark caniuse.com.

Bring (Even More) Sexy Back to SharePoint 2013

HTML5, Semantic code and your SharePoint Master Page

Heather started off the first session talking about HTML5 and semantic HTML.  Points to take away from the first part of this session:

  • Yes, you can use HTML5 now and yes, even with SharePoint 2013.
  • SharePoint 2013 does not use HTML5 in the out-of-the-box master pages, such as seattle.master.  HTML5 is used in the mobile views. But that doesn’t mean you can’t integrate in HTML5 into your custom master pages.
  • New tags provided in HTML5 can bring more semantic meaning to your content.  Useful tags include HEADER, FOOTER, SECTION, ASIDE and NAV.

Then she segued into talking about SharePoint master pages, the included HTML and CSS files. Here are the highlights:

  • Limit the HTML in your master page to only support content and don’t integrate any style into the code.  Leave all the style to the CSS file.
  • Order the content in your HTML based on importance, not based on the physical layout of the page.  This supports CSS based design and is best for mobile support and accessibility.
  • 92% of your branding work for SharePoint is CSS, not the master page!
  • Easily convert to a fixed-width design by adding a class of “s4-nosetwidth” to the s4-workspace container.
  • Avoid SharePoint Designer completely (if you want) by using a mapped network drive or FTP tool to connect directly to the SharePoint content database where master pages must be stored and CSS can optionally be stored.  If you add a master page file via a mapped network drive or FTP tool, be sure to do the following:
    • Go to the Master Page Gallery in the web browser and locate the new master page that you added.
    • Select to edit the file properties.
    • Change the content type from “Design File” to  “Master Page”.
    • Under “UI Version” check “15”.
    • Save the changes.

Check out the links list we have curated on urli.st for HTML 5:
HTML5 links and resources

CSS(3) and SharePoint

Next Heather dove into tricks and neat things you can do with your SharePoint site using CSS, including delving into the latest version, CSS3. Here is the highlight reel of CSS properties (declarations) she put to use in a SharePoint site.

Background

Images can be included in your web design using the background property.  Backgrounds can be images, gradients and can also be layered together.  Here are several examples:

Set a background color, image and set the image to fill up the web page:

body #s4-workspace {
	background: #27393E;
	background-image: url('http://classcdn.s3.amazonaws.com/sptechcon13/20-20-experience-1.png'); /* Location of background image file */
	background-size: cover; /* Scales image to fill background, regardless of browser size */
 }

Background color using RGBA. The “A” is an alpha channel and will create a transparency:

body #s4-bodyContainer {
	background: rgba(248, 232, 176,.85);  /* Background color - "A" in RBGA is the alpha channel that creates a transparency */
}

Backgrounds can also be layered. Here is a background image layered on top of a background gradient:

header {
	background: url('http://classcdn.s3.amazonaws.com/sptechcon13/jt-head.png') no-repeat top right, linear-gradient(50deg,  #564825 10%,#a7cfdf 70%);  /* Layered background image and gradient.  Degree is angle. First HEX is color on left. Second HEX is color on right. Percentages are color stops that indicate where the color gradient should stop. */
}

Resources to help with backgrounds:

Border radius (rounded corners)

Rounded corners can easily be added to page elements using the following CSS declaration:

.ms-srch-sb {
	border-radius: 10px;
}

Box and text shadow (drop shadows)

Shadows can be added to page elements using the following CSS declaration:

body #s4-bodyContainer {
	box-shadow: 0px 0px 25px #000; /* Shadow effect behind content containers */
}

Icon fonts

Something that is getting popular and a really nice element to implement into your branding is an icon font.  You can reduce the load on the web server and speed up your site if you can eliminate many of the little images loaded by your site using a CSS Sprite or what is now available, an icon font.  An icon font provides several benefits:

  • Provides images that are similar to SVG files (scalable vector graphics).  As you increase or decrease the size of the icon, the edges within the icon remain crisp and do not become pixelated.
  • The site loads all of the needed icons with a single font file instead of multiple image downloads.
  • Easily branded using CSS font color, text-shadow, backgrounds and more.
  • Can add a hover effect without creating a new image file – just use the same CSS properties again such as font color.
  • Can be completely customized – use fonts available on the internet or create your own icon font.

Swap out search magnifying glass for an icon font

First you need to hide the existing search icon.  This code is for SharePoint 2013 but this technique is totally supported in SharePoint 2010 – all you need to do is update the class names.

/* Hide default Search icon */
.ms-srch-sb-searchImg {
	display: none;
} 

Next you target the hyperlink that wraps the SharePoint magnifying glass and insert in content using the :before pseudo element. Prior to doing that you need to add one line of code in the top of your CSS file. This is grabbing the icon font, Font Awesome, which is a free font.

@import "//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"; 

This icon font is updated frequently, so be sure to check the Font Awesome site for the latest version.

Once the font has been added to your site, you can start using it like any other font.

/* Add new search icon with icon font */
.ms-srch-sb-searchLink:before {
	content: "\f002";  /* Icon font - magnifying glass*/
	font-family: FontAwesome;  /* Font face */
	color: #CF9223;  /* Font color */
	font-size: 19px;  /* Icon size */
	padding: 0 0 0 7px;  /* Space between text and container edges */
    	display: block;
} 

The icon font works like a regular font where you specify characters and a glyph is displayed. In this case we are specifying a unicode value (f002) and then the resulting icon is displayed. The unicode is specified in the content property and is escaped using a backslash. If you want to play with it some, swap out f002 out for the following unicodes:

  • f06e
  • f0eb
  • f135

You can also add a hover effect by adding the following style statement:

/* Search icon hover effect */
.ms-srch-sb-searchLink:hover:before,
.ms-srch-sb-searchLink:focus:before {
	color: #E4B846;  /* Font color */
} 

Convert text links for social networks to icons

For this effect you will need an unordered list (or similar) of social network links on your web page, for example added to your master page.

<ul class="spe-social">
<!-- Add/remove social networks as necessary and update paths for your profile(s) -->
     <li><a href="http://facebook.com">Facebook</a>
     <li><a href="http://twitter.com">Twitter</a>
     <li><a href="http://google.com">Google+</a>
     <li><a href="http://rss.com">RSS</a>
</ul> 

Next add a few style statements that hide the text and shows an icon instead. This code uses the same Font Awesome font that was referenced for the search icon so please be sure you have the @import in place to link in the font file.

/* Set social links on a single line */	
.spe-social li {
	display: inline; /* Removes default line breaks around element */
}

/* Shared formatting for social links */
.spe-social a {
	width: 45px; /* Width of icons - adjust based on set font size below*/
	height:55px; /* Height of icons - adjust based on set font size below */
	display: inline-block; /* Needed to support width and height */
	overflow: hidden; /* Hide anchor text */
	padding-top: 5px; /* Adjust spacing to show full shadow effect*/
	text-decoration: none; /* Remove default text underline */
}

/* Shared formatting for social icons */
.spe-social a:before {
	font-family:  "FontAwesome"; /* Social icon font */
	font-size: 40px; /* Icon size */
	color: #000; /* Icon color */
	padding: 0 30px 3px 3px ; /* Adjust spacing */
}

/* Hover effect for social icons */
.spe-social a:hover:before {
	color: white;
}

/* Twitter icon */
.spe-social a[href*="twitter"]:before {
	content: "\f081";
}

/* Facebook icon */
.spe-social a[href*="facebook"]:before {
	content: "\f082";
}

/* Google+ icon */
.spe-social a[href*="google"]:before {
	content: "\f0d4";
}

/* RSS icon */
.spe-social a[href*="rss"]:before {
	content: "\f143";
}  

To expand on this, add a new style statement for each social network, updating the HREF value in the CSS attribute selector to reflect the target site. Then update the unicode character based on the icons available in Font Awesome. For example, here is the style statement for Pinterest:

/* Pinterest icon */
.spe-social a[href*="pinterest"]:before {
	content: "\f0d3";
}  

And another for Tumblr:

/* Tumblr icon */
.spe-social a[href*="tumblr"]:before {
	content: "\f174";
}  

CSS Sprites

One way to reduce the server load on your site is to use CSS Sprites for some or all of your site images. A CSS Sprite is an image file that is a collection of several other images. Below is an example CSS Sprite. It looks like 5 separate images but it is just a single image, demonstrated by the border.

Using CSS, you will create a window on your page. The inside of the window will show a portion of your image file. You will shift the image around to show a different part of the image through the window. Here are three example DIVs showing different parts of the CSS Sprite image.

 

Here is the code running these three boxes. Please note that the inline styles in the DIVs are only used for this blog example and it is not recommended that inline styles should be used, ever! Also please note the key difference between the DIV styles is the background position pixel value (-4px, -71px, -138px).

<div style="width: 50px; height: 50px; background: url('http://classcdn.s3.amazonaws.com/sptechcon13/jt-icon-sprite.png') no-repeat 0 -4px; border: 1px solid red; float: left;"></div>

<div style="width: 50px; height: 50px; background: url('http://classcdn.s3.amazonaws.com/sptechcon13/jt-icon-sprite.png') no-repeat 0 -71px; border: 1px solid green; float: left; margin-left: 10px;"></div>

<div style="width: 50px; height: 50px; background: url('http://classcdn.s3.amazonaws.com/sptechcon13/jt-icon-sprite.png') no-repeat 0 -138px; border: 1px solid blue; float: left; margin-left: 10px;"></div> 

:nth-child Selectors

CSS3 introduces the ability to select elements based on the order or location within the parent, for example select all even (or odd) elements or select the 5th element within the parent. Here are a few examples of a :nth-child selectors:

/* Every 5th item starting with the 2nd item */
#nav-secondary ul.root > li.static:nth-child(5n+2) > .static.menu-item {
	background-position: -2px -71px;
}

/* Every 5th item starting with the 3rd item */
#nav-secondary ul.root > li.static:nth-child(5n+3) > .static.menu-item {
	background-position: -2px -138px; 
}

/* Every 5th item starting with the 4th item */
#nav-secondary ul.root > li.static:nth-child(5n+4) > .static.menu-item {
	background-position: -2px -206px; 
}

:nth-child selectors can be very handy and also very confusing. Here are some resources to help you out:

Combining a CSS Sprite and :nth-child selectors to create icons in the Quick Launch

Heather combined these two techniques to add alternating icons to the quick launch:

/* Icon inserted before first level nav items */
          #nav-secondary ul.root > li.static > .static.menu-item:before {
               content: '';
               display: block;
               background: url(http://classcdn.s3.amazonaws.com/sptechcon13/jt-icon-sprite.png) -2px -5px no-repeat;
               border-radius: 50%;
               width: 50px;
               height: 50px;
               position: absolute;
               left: -20px;
               top: 1px;
               border: 1px solid #59401F;
          }

 /* Change icon based on nav item hierarchy */
          /* Every 5th item starting with the 2nd item */
          #nav-secondary ul.root > li.static:nth-child(5n+2) > .static.menu-item:before {
               background-position: -2px -71px;
          }
           
          /* Every 5th item starting with the 3rd item */
          #nav-secondary ul.root > li.static:nth-child(5n+3) > .static.menu-item:before {
               background-position: -2px -138px;
          }
          /* Every 5th item starting with the 4th item */
          #nav-secondary ul.root > li.static:nth-child(5n+4) > .static.menu-item:before {
               background-position: -2px -206px;
          }
          /* Every 5th item starting with the 5th item */
          #nav-secondary ul.root > li.static:nth-child(5n+5) > .static.menu-item:before {
               background-position: -2px -274px;
          }

And that wraps up the first part of this session! For a copy of the master page and CSS files from the session, please visit our GitHub repository.