SPTechCon San Francisco April 2014 Session Review

“Go ahead, be gone with it. And get your sexy on.”

Welcome session attendees and anyone else who happens to wander on this page.  This blog entry is a post session review of resources mentioned and code used in our Bring Sexy Back to SharePoint and Gaining Total Control of Your Sites with Data View Web Parts sessions from April 2014 SPTechCon in San Francisco.

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 Sexy Back to SharePoint, Part 1

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.
  • Use a SharePoint Feature to deploy your custom master page to all of the site collections, but have the master page point to a central CSS file (stored on the web server) so when there are updates to your design, you only have to update the CSS file.  This allows you to minimize how often you have to retract your master page deployment Feature and redeploy it.  92% of your branding work for SharePoint is CSS, not the master page!

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/jt-cover.jpg"); /* Location of background image file */
	background-size: cover; /* Scales image to fill background, regardless of browser size */
 }

Background color as a backup for older browsers and a background gradient:

#s4-workspace header nav ul.root li.static > a:hover {
	background: #9C5D29; /* For browsers that don't support advanced background properties */
	background: linear-gradient(to bottom, #9C5D29 0%,#5D3718 100%);  /* First HEX is color on left. Second HEX is color on right. Percentages are color stops that indicate where the color gradient should stop. */
}

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

body #s4-bodyContainer {
	background: rgba(255, 238, 212, .6);  /* Background color - "A" in RBGA is the alpha channel that creates a transparency */
}

Background color as a backup for older browsers, background image layered on top of a background gradient:


header {
	background: #23538a; /* For browsers that don't support advanced background properties */
	background: url("http://classcdn.s3.amazonaws.com/sptechcon13/jt-head.png") no-repeat top right, linear-gradient(50deg,  #23538a 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. */
}

SVG file set as a background image. The background-size is required for the SVG file to show properly and can be scaled based on need:

footer {
	background: rgba(42, 61, 68, .7) url(http://classcdn.s3.amazonaws.com/sptechcon13/profile-small.svg) no-repeat 4px top;
	background-size: 292px 219px;
}

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 */
}

.spe-social a:before {
	text-shadow: 0px 0px 8px #999388; /* Add shadow to icons */
}

: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:

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> 

Implement new techniques into SharePoint

In the session Heather also reviewed several tricks you can do in your SharePoint site that makes use of widely supported resources and tools.

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.

An icon font was used twice during the session (well once as Heather ran out of time to fully show the second example, but here is the code 😛 ).

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 "//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"; 

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: #224F86;  /* 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: #CF9223;  /* 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";
}  

Add text in footer using a web font

To wrap up this session, there is one more technique to cover that will put together the :before pseudo element we have already used once, and a web font, which is like an icon font, but uses actual letters :).

First we will pick something to target, in this case it is the footer. Then use the :before pseudo element to add in text and use CSS to style it. Part of that style will be changing the font face used, but this time to a web font so we aren’t limited to the fonts installed on the end user’s device. Just like with the icon font, we need to reference the font first at the top of our CSS file:

@import url(http://fonts.googleapis.com/css?family=Covered+By+Your+Grace); 

This particular font is from Google Fonts, all of which are free to use.

Now we can include our style statement:

/* Add title in footer */
footer:before {
	content: "Justin Timberlake is the bomb dot com";
	font-family: 'Covered By Your Grace', 'cursive';
	font-size: 45px;
	color: rgba(255,255,255,.4); /* Font color and opacity */
	position: absolute; /* Remove from content flow and create exact positioning */
	top: 115px; /* Spacing from top of parent container */
	right: 10px;
} 

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

 

Stay tuned for session reviews for the follow up “Bring Sexy Back to SharePoint 2013, Part II” and Dustin Miller’s session, “Gaining Total Control of Your Sites with Data View Web Parts”.