Recently my team and I were tasked with creating a SharePoint 2010 solution utilizing windows workflow, WCF REST, web parts, and SharePoint out of the box functionality. The project in general is to create 2 different SharePoint web sites. Without going into all the specifics, one site is a public site and the other an internal portal. One of the requirements is to convert the SharePoint Default look and feel into customer branded site, no surprise there!
Well the surprise comes in the form of how the Branded site will look and behave. Our client requires us to use the 960 grid system to position sections and elements on the page… What Fun!!!
So, anyone who has done SharePoint Branding project before know that SharePoint is very picky about what we change, and how we change it, thus the challenges. Accomplishing this we were presented with quite a few obstacles, such as the infamous Office Ribbon, SharePoint Menus, the “Site Actions” button, and architecture of how SharePoint 2010 works just to name a few. In this series of Posts I will attempt to explain how we overcame these tasks and still designed a SharePoint Branded Solution using the 960 grid system.
One of the main topics I’d like to discuss here is exactly what the 960 grid is all about for those that don’t understand it or have never heard of it, and how it affects SharePoint 2010 branding solutions. So Shall I proceed????
Act I: The Preface
Initially, we were thinking this should be easy, until we realized that the client would have to maintain the site after we’re gone. Easy task you say…. Well the client doesn’t have any SharePoint developers on staff, nor are they looking to get some in the future.
We have to adjust the default SharePoint 2010 master pages in a sway so that it would be easy for graphical Designers to modify the the pages and page layouts. According to Microsoft, one of the reasons SharePoint 2010 is not “sexy” upon default deployment is to enforce the point that SharePoint should be branded for your company. So Microsoft makes it “ugly” so that you would want to change it, brand it, change the look and feel of it.
I say this is hogwash…. there are other ways you could accomplish this by just using placeholders saying things like “Your company logo goes here” or something obvious. Along with this Microsoft could make SharePoint 2010 just plain ol “sexy”.
One way in which to do this is to just allow graphical designers design the UI. I mean it only makes sense that’s what they went to school for, and it is what a designer does best. However, to do this, the tools, and capability to brand and design must be easy, useful and not full of developer jargon and fluff.
One of the common patterns graphical designers and web developers are using to build great web sites is a Cascading style system known as the 960 Grid system. The 960 Grid system is simply a set of CSS classes defined in such a way to turn the design of your pages into a 960 pixel grid of columns. This fake grid, allows you to position elements, blocks, and sections of the web page into nicely even sections on the page. You can read more about the 960 grid here and here.
Bringing the 960 Grid into the SharePoint 2010 system is easy, getting it to play nicely with SharePoint, well that’s another story.
The first thing you need to do is register the 2 major css files into your master page. The first css, is a “Reset.css” style sheet. This style sheet contains some classes that resets and clears out margins on the page so that if there are any inconsistencies between browsers it starts everyone off with a clean slate or “grid” I should say.
The next style sheet is the main style sheet that creates the fake grid. With the 960 Grid system you can choose many column formulas to design your page. the defaults are 12, 16, and 24. However there are tools that allow you to define you own grid system with differing columns widths, you choose. The Main style sheet contains classes like “grid_1”, “push_1”, “suffix_2”, “pull_1”, “prefix_1”, “alpha” and “omega”. These css classes tell the element in question where to position itself in a container horizontally speaking. These classes do not affect the vertical aspect of positioning. You’ll have to calculate that you self, however as far as horizontal, you can’t ask for a easier system to use.
The catch to using these classes with SharePoint requires knowing a few things:
1. Understanding the 960 Grid System. I suggest you step through the tutorials to get a good feel of how the 960 grid works.
2. Remove or Override any SharePoint CSS Classes that affect positioning from a horizontal perspective. This may mean overriding the default styles in some cases, and actually removing the absolute horizontal positioning values.
To get started I suggest using Randy Drisgill’s starter Master Page, or Microsoft’s starter Master Page to apply your first branding project with SharePoint 2010. Once you have a clean working starter master page, remove all the style sheets and default classes that control positioning. Download or generate the 960 css files and place them in a SharePoint style library
Next add in the the 960 CSS files inside your master page right before any <script> tags inside your <head> tag;
1: <SharePoint:CssRegistration ID="CssRegistrationReset" name="<% $SPUrl:~sitecollection/Style Library/css/reset.css %>" runat="server"/>
2: <SharePoint:CssRegistration ID="CssRegistrationText" name="<% $SPUrl:~sitecollection/Style Library/css/text.css %>" after="<% $SPUrl:~sitecollection/Style Library/css/reset.css %>" runat="server"/>
3: <SharePoint:CssRegistration ID="CssRegistration960" name="<% $SPUrl:~sitecollection/Style Library/css/960.css %>" after="<% $SPUrl:~sitecollection/Style Library/css/text.css %>" runat="server"/>
The above lines will include the CSS StyleSheets for resetting the margins, and creating the fake 960 pixel grid for styling the page. After this I usually comment out any styles that set the width to 100%, such as this one:
1: <style type="text/css">
2: /* fix scrolling on list pages */
3: #s4-bodyContainer {
4: position: relative;
5: }
6:
7: /* hide body scrolling (SharePoint will handle) */
8: body {
9: height:100%;
10: overflow: scroll;
11: /* comment out width because we're using 960px instead */
12: /*width:100%;*/
13: }
14: </style>
Next wrap your body content into a single “<div>” element which uses the 960 Grid container. You’ll have to choose which column grid format you want to use for my example I’ll use the 16 Column format.
1: <!-- this control is more navigation for mysites, otherwise it is empty -->
2: <SharePoint:DelegateControl runat="server" ControlId="GlobalNavigation"/>
3:
4: <!-- this is the main 16 grid container for the 960Grid system -->
5: <div id="container_16" class="container_16" >
Once I have the container, I can now start designing, and placing the necessary SharePoint tags specifically where I want them. Here’s an example of how I want the SharePoint RIbbon structured:
1: <!-- ===== Begin Ribbon ============================================================ -->
2: <div id="ribbonWelcomeArea_16" class="grid_16 welcomeMessageColor" >
3: <div id="ribbonrow" class="s4-ribbonrowColor">
4: <div id="ribboncont" class="s4-ribboncontColor ">
5:
6: <!-- ribbon starts here -->
7: <SharePoint:SPRibbon
8: runat="server"
9: PlaceholderElementId="RibbonContainer"
10: CssFile="">
11:
12: <!-- ribbon left side content starts here -->
13: <SharePoint:SPRibbonPeripheralContent
14: runat="server"
15: Location="TabRowLeft"
16: CssClass="ms-siteactionscontainer s4-notdlg">
17:
18: <!-- site actions -->
19: <span class="ms-siteactionsmenu " id="siteactiontd">
20: <SharePoint:SiteActions runat="server" accesskey="<%$Resources:wss,tb_SiteActions_AK%>" id="SiteActionsMenuMain"
21: PrefixHtml=""
22: SuffixHtml=""
23: MenuNotVisibleHtml="&nbsp;"
24: >
25: <CustomTemplate>
26: <SharePoint:FeatureMenuTemplate runat="server"
27: FeatureScope="Site"
28: Location="Microsoft.SharePoint.StandardMenu"
29: GroupId="SiteActions"
30: UseShortId="true"
31: >
32: <SharePoint:MenuItemTemplate runat="server" id="MenuItem_EditPage"
33: Text="<%$Resources:wss,siteactions_editpage%>"
34: Description="<%$Resources:wss,siteactions_editpagedescriptionv4%>"
35: ImageUrl="/_layouts/images/ActionsEditPage.png"
36: MenuGroupId="100"
37: Sequence="110"
38: ClientOnClickNavigateUrl="javascript:ChangeLayoutMode(false);"
39: />
40: <SharePoint:MenuItemTemplate runat="server" id="MenuItem_TakeOffline"
41: Text="<%$Resources:wss,siteactions_takeoffline%>"
42: Description="<%$Resources:wss,siteactions_takeofflinedescription%>"
43: ImageUrl="/_layouts/images/connecttospworkspace32.png"
44: MenuGroupId="100"
45: Sequence="120"
46: />
47: <SharePoint:MenuItemTemplate runat="server" id="MenuItem_CreatePage"
48: Text="<%$Resources:wss,siteactions_createpage%>"
49: Description="<%$Resources:wss,siteactions_createpagedesc%>"
50: ImageUrl="/_layouts/images/NewContentPageHH.png"
51: MenuGroupId="200"
52: Sequence="210"
53: UseShortId="true"
54: ClientOnClickScriptContainingPrefixedUrl="if (LaunchCreateHandler('Page')) { OpenCreateWebPageDialog('~site/_layouts/createwebpage.aspx') }"
55: PermissionsString="AddListItems, EditListItems"
56: PermissionMode="All" />
57: <SharePoint:MenuItemTemplate runat="server" id="MenuItem_CreateDocLib"
58: Text="<%$Resources:wss,siteactions_createdoclib%>"
59: Description="<%$Resources:wss,siteactions_createdoclibdesc%>"
60: ImageUrl="/_layouts/images/NewDocLibHH.png"
61: MenuGroupId="200"
62: Sequence="220"
63: UseShortId="true"
64: ClientOnClickScriptContainingPrefixedUrl="if (LaunchCreateHandler('DocLib')) { GoToPage('~site/_layouts/new.aspx?FeatureId={00bfea71-e717-4e80-aa17-d0c71b360101}&ListTemplate=101') }"
65: PermissionsString="ManageLists"
66: PermissionMode="Any"
67: VisibilityFeatureId="00BFEA71-E717-4E80-AA17-D0C71B360101" />
68: <SharePoint:MenuItemTemplate runat="server" id="MenuItem_CreateSite"
69: Text="<%$Resources:wss,siteactions_createsite%>"
70: Description="<%$Resources:wss,siteactions_createsitedesc%>"
71: ImageUrl="/_layouts/images/newweb32.png"
72: MenuGroupId="200"
73: Sequence="230"
74: UseShortId="true"
75: ClientOnClickScriptContainingPrefixedUrl="if (LaunchCreateHandler('Site')) { STSNavigate('~site/_layouts/newsbweb.aspx') }"
76: PermissionsString="ManageSubwebs,ViewFormPages"
77: PermissionMode="All" />
78: <SharePoint:MenuItemTemplate runat="server" id="MenuItem_Create"
79: Text="<%$Resources:wss,siteactions_create%>"
80: Description="<%$Resources:wss,siteactions_createdesc%>"
81: MenuGroupId="200"
82: Sequence="240"
83: UseShortId="true"
84: ClientOnClickScriptContainingPrefixedUrl="if (LaunchCreateHandler('All')) { STSNavigate('~site/_layouts/create.aspx') }"
85: PermissionsString="ManageLists, ManageSubwebs"
86: PermissionMode="Any" />
87: <SharePoint:MenuItemTemplate runat="server" id="MenuItem_ViewAllSiteContents"
88: Text="<%$Resources:wss,quiklnch_allcontent%>"
89: Description="<%$Resources:wss,siteactions_allcontentdescription%>"
90: ImageUrl="/_layouts/images/allcontent32.png"
91: MenuGroupId="300"
92: Sequence="302"
93: UseShortId="true"
94: ClientOnClickNavigateUrl="~site/_layouts/viewlsts.aspx"
95: PermissionsString="ViewFormPages"
96: PermissionMode="Any" />
97: <SharePoint:MenuItemTemplate runat="server" id="MenuItem_EditSite"
98: Text="<%$Resources:wss,siteactions_editsite%>"
99: Description="<%$Resources:wss,siteactions_editsitedescription%>"
100: ImageUrl="/_layouts/images/SharePointDesigner32.png"
101: MenuGroupId="300"
102: Sequence="304"
103: UseShortId="true"
104: ClientOnClickScriptContainingPrefixedUrl="EditInSPD('~site/',true);"
105: PermissionsString="AddAndCustomizePages"
106: PermissionMode="Any"
107: />
108: <SharePoint:MenuItemTemplate runat="server" id="MenuItem_SitePermissions"
109: Text="<%$Resources:wss,people_sitepermissions%>"
110: Description="<%$Resources:wss,siteactions_sitepermissiondescriptionv4%>"
111: ImageUrl="/_layouts/images/Permissions32.png"
112: MenuGroupId="300"
113: Sequence="310"
114: UseShortId="true"
115: ClientOnClickNavigateUrl="~site/_layouts/user.aspx"
116: PermissionsString="EnumeratePermissions"
117: PermissionMode="Any" />
118: <SharePoint:MenuItemTemplate runat="server" id="MenuItem_Settings"
119: Text="<%$Resources:wss,settings_pagetitle%>"
120: Description="<%$Resources:wss,siteactions_sitesettingsdescriptionv4%>"
121: ImageUrl="/_layouts/images/settingsIcon.png"
122: MenuGroupId="300"
123: Sequence="320"
124: UseShortId="true"
125: ClientOnClickNavigateUrl="~site/_layouts/settings.aspx"
126: PermissionsString="EnumeratePermissions,ManageWeb,ManageSubwebs,AddAndCustomizePages,ApplyThemeAndBorder,ManageAlerts,ManageLists,ViewUsageData"
127: PermissionMode="Any" />
128: <SharePoint:MenuItemTemplate runat="server" id="MenuItem_CommitNewUI"
129: Text="<%$Resources:wss,siteactions_commitnewui%>"
130: Description="<%$Resources:wss,siteactions_commitnewuidescription%>"
131: ImageUrl="/_layouts/images/visualupgradehh.png"
132: MenuGroupId="300"
133: Sequence="330"
134: UseShortId="true"
135: ClientOnClickScriptContainingPrefixedUrl="GoToPage('~site/_layouts/prjsetng.aspx')"
136: PermissionsString="ManageWeb"
137: PermissionMode="Any"
138: ShowOnlyIfUIVersionConfigurationEnabled="true" />
139: </SharePoint:FeatureMenuTemplate>
140: </CustomTemplate>
141: </SharePoint:SiteActions></span>
142:
143: <!-- global navigation dhtml popout menu -->
144: <asp:ContentPlaceHolder id="PlaceHolderGlobalNavigation" runat="server">
145: <SharePoint:PopoutMenu
146: runat="server"
147: ID="GlobalBreadCrumbNavPopout"
148: IconUrl="/_layouts/images/fgimg.png"
149: IconAlt="<%$Resources:wss,master_breadcrumbIconAlt%>"
150: IconOffsetX=0
151: IconOffsetY=112
152: IconWidth=16
153: IconHeight=16
154: AnchorCss="s4-breadcrumb-anchor"
155: AnchorOpenCss="s4-breadcrumb-anchor-open"
156: MenuCss="s4-breadcrumb-menu">
157: <div class="s4-breadcrumb-top">
158: <asp:Label runat="server" CssClass="s4-breadcrumb-header" Text="<%$Resources:wss,master_breadcrumbHeader%>" />
159: </div>
160: <asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">
161: <SharePoint:ListSiteMapPath
162: runat="server"
163: SiteMapProviders="SPSiteMapProvider,SPContentMapProvider"
164: RenderCurrentNodeAsLink="false"
165: PathSeparator=""
166: CssClass="s4-breadcrumb"
167: NodeStyle-CssClass="s4-breadcrumbNode"
168: CurrentNodeStyle-CssClass="s4-breadcrumbCurrentNode"
169: RootNodeStyle-CssClass="s4-breadcrumbRootNode"
170: NodeImageOffsetX=0
171: NodeImageOffsetY=353
172: NodeImageWidth=16
173: NodeImageHeight=16
174: NodeImageUrl="/_layouts/images/fgimg.png"
175: RTLNodeImageOffsetX=0
176: RTLNodeImageOffsetY=376
177: RTLNodeImageWidth=16
178: RTLNodeImageHeight=16
179: RTLNodeImageUrl="/_layouts/images/fgimg.png"
180: HideInteriorRootNodes="true"
181: SkipLinkText="" />
182: </asp:ContentPlaceHolder>
183: </SharePoint:PopoutMenu>
184: </asp:ContentPlaceHolder>
185:
186: <!-- save button at top of ribbon -->
187: <SharePoint:PageStateActionButton id="PageStateActionButton" runat="server" Visible="false" /></SharePoint:SPRibbonPeripheralContent>
188:
189: <!-- ribbon right side content starts here -->
190: <SharePoint:SPRibbonPeripheralContent
191: runat="server"
192: Location="TabRowRight"
193: ID="RibbonTabRowRight"
194: CssClass="s4-trc-container s4-notdlg">
195:
196: <!-- GlobalSiteLink0 delegate - the variation selector / shows nothing by default otherwise -->
197: <SharePoint:DelegateControl runat="server" ID="GlobalDelegate0" ControlId="GlobalSiteLink0" />
198:
199: <!-- GlobalSiteLink2 delegate default shows nothing -->
200: <SharePoint:DelegateControl ControlId="GlobalSiteLink2" ID="GlobalDelegate2" Scope="Farm" runat="server" />
201:
202: <!-- link to launch developer dashboard if its activated by admin -->
203: <span>
204: <span class="s4-devdashboard">
205: <Sharepoint:DeveloperDashboardLauncher
206: ID="DeveloperDashboardLauncher"
207: NavigateUrl="javascript:ToggleDeveloperDashboard()"
208: runat="server"
209: ImageUrl="/_layouts/images/fgimg.png"
210: Text="<%$Resources:wss,multipages_launchdevdashalt_text%>"
211: OffsetX=0
212: OffsetY=222
213: Height=16
214: Width=16 />
215: </span>
216: </span>
217: </SharePoint:SPRibbonPeripheralContent>
218: </SharePoint:SPRibbon>
219:
220: <!-- end main ribbon control -->
221: </div>
222: <!-- dynamic notification area -->
223: <div id="notificationArea" class="s4-noti"></div>
224:
225: <!-- old navigation delegate? -->
226: <asp:ContentPlaceHolder ID="SPNavigation" runat="server">
227: <SharePoint:DelegateControl runat="server" ControlId="PublishingConsole" Id="PublishingConsoleDelegate">
228: </SharePoint:DelegateControl>
229: </asp:ContentPlaceHolder>
230:
231: <!-- top web part panel -->
232: <div id="WebPartAdderUpdatePanelContainer" class="grid_16 webPartAdderUpdatePanelContainerColor hide " >
233: <asp:UpdatePanel
234: ID="WebPartAdderUpdatePanel"
235: UpdateMode="Conditional"
236: ChildrenAsTriggers="false"
237: runat="server">
238: <ContentTemplate>
239: <WebPartPages:WebPartAdder ID="WebPartAdder" runat="server" />
240: </ContentTemplate>
241: <Triggers>
242: <asp:PostBackTrigger ControlID="WebPartAdder" />
243: </Triggers>
244: </asp:UpdatePanel>
245: </div>
246: </div>
247: <!-- ===== End Ribbon and other Top Content ============================================================ -->
Here’s an example of what the page looks like with the ribbon and a background image.
Once you get comfortable with the 960 grid system, you can place SharePoint tags and elements almost anywhere.
There are some challenges with using the 960 grid system.
1. When working with page layouts, if you’re not cognizant of the fact that your master page is using the 960 grid your layout will yield nasty vertical and horizontal scroll bars.
2. When editing the page, if you place the web part adder and it’s corresponding controls in their normal positions, the runtime web part design experience becomes non-existent. Basically it becomes practically impossible to add, edit and remove web parts because their may not be any scroll bars and the design time controls flow off the page.
3. Attempting to do this for the System Master pages is also impossible for the same reasons mentioned above, and the mere fact that system pages were designed to use the whole width of the page {width: 100%}. Leaving anything off would severely hinder system admin functionality.
In my next post I’ll talk about ways around the first two issues. As far as the third challenge, if you find a elegant way to get around this let me know, but for right now I lean towards the philosophy that System administration pages are not “public” and should not be in a 960 Grid format anyway.
Until next time… Happy web surfing!
D Goins Insperience 
Great post. I’m really looking forward to your next post, we are trying to do the same ourselves: SharePoint 2010 + 960 Grid.
LikeLike
Hi,
Glad I found at least one person who has experienced the same challenge I have now !! My very first question is: how successfull was your team in implementing this? I found this and will try to apply: http://designinfluences.com/fluid960gs/16/fluid/jquery/, it uses a fluid grid system. Can you share more of your work? Would it be possible to share your template?
Thanks a lot in advance !
LikeLike
Did you ever write your follow up post to this article?
LikeLike
Not yet. I’ll add another post on this soon. Thanks.
LikeLike
Can’t wait for the follow-up
LikeLike
Use HTML5 and Twitter Bootstrap it works great right out of the box. Nothing to massage to make it work in SharePoint 2010
LikeLike
Is there any follow-up post to this article?
LikeLike