Professional Documents
Culture Documents
SharePoint2013 ResponsiveSolutions Documentation PDF
SharePoint2013 ResponsiveSolutions Documentation PDF
SharePoint WSP
Edition
Version 1.0
Bootstrap 3 and
Foundation 4
for SP 2013
Authors:
Ugo Brunet
Raphael Londner
Based on the work of :
Eric Overfield
Darce Hess
Gilda Spencer
Table of Contents
Responsive SharePoint WSP Edition
Table of Contents .......................................................................................................................................................................................... 2
Why Responsive SharePoint WSP Edition? ......................................................................................................................................... 3
What is in this Package? ............................................................................................................................................................................. 5
Installation Instructions............................................................................................................................................................................... 6
Initial configuration for mobile devices ........................................................................................................................................... 6
Responsive for SharePoint Foundation 2013 solution ............................................................................................................... 7
Publishing for SharePoint Foundation 2013 solution ...............................................................................................................12
Responsive for SharePoint Server 2013/Office365 sandboxed solution ...........................................................................17
Customization...............................................................................................................................................................................................23
SharePoint Server 2013/Office 365 ..................................................................................................................................................23
How to modify existing Master Pages and Page Layouts ..................................................................................................23
How to create new Master Pages and new Page Layouts .................................................................................................25
SharePoint Foundation (with Publishing Infrastructure) .........................................................................................................26
How to modify existing Master Pages .......................................................................................................................................26
How to modify existing Page Layouts .......................................................................................................................................26
How to create new Master Pages ................................................................................................................................................28
How to create new Page Layouts ................................................................................................................................................28
RioLinx 2013
Page 2
In SharePoint Foundation, we cannot use the $SPUrl expression builder to reference our style sheets and
scripts in our master pages, because its only available with SharePoint Server. We thus had no choice but
to use references to files stored in the SharePoint 15 Hive (inside the layouts folder), and that meant our
solution had to be a farm solution, not a sandboxed.
We also had to figure out how to use responsive page layouts in SharePoint Foundation, because none
of the default web part page layouts available with SharePoint Foundation are responsive. By looking at
the way SharePoint Foundation implemented its page templates, we managed to build a custom
Responsive Web Part Page content type that allow us to create pages based on a limited number of
responsive page templates, also stored in a sub-folder of the _layouts folder.
Because we were limited by the number of page templates and because it is impossible for a site administrator
to modify those page templates (as she typically doesnt have access to the SharePoint server), we decided to
provide a Publishing-like feature for SharePoint Foundation 2013 and to use it to provide page templates
that can be stored in a SharePoint library and therefore be easily modified by a site administrator:
-
We then added 3 additional features to our solution to provide Bootstrap 2, Bootstrap 3 and Foundation
4 page layouts in a specific library of a SharePoint Foundation site (those features have a dependency on
our SharePoint Foundation 2013 Publishing Infrastructure so you will need to deploy it before you can
activate those 3 features). That, any user who has access to SharePoint Designer is able to modify and
create new responsive page templates within a SharePoint Foundation site.
RioLinx 2013
Page 3
When we were done with this first farm solution, the PixelMill team motivated us to implement a solution that
would be compatible with Office 365, since Office 365 doesnt support the deployment of farm solutions.
Because we werent bound by the limitations of SharePoint Foundation, we were able to build a sandboxed
solution which is compatible with both SharePoint Server 2013 and Office 365. By activating the Publishing
Server features, we are able to provide both our responsive master pages and our responsive page templates in
the ~site/_catalogs/masterpage folder. In this solution, any user with the permissions to deploy a sandboxed
solution can easily and quickly build a SharePoint responsive site in minutes, as well as to add or modify these
files by using SharePoint Designer.
Here is a list of additional improvements we brought to these solutions:
Made all master page MDS-compliant (see Bill Baers blog for an introduction to MDS)
Added OpenGraph tags to the page layouts compatible with the SharePoint Foundation Publishing
Infrastructure
Remove the right suite bar controls (Share, Sync, Edit, etc) when viewed on mobile screens
Remove the Office 365 suite bar links when viewed on mobile screens
If you find any issues with these solutions, please provide feedback and comments at the CodePlex project
discussion area, http://responsivesharepoint.codeplex.com/discussions.
RioLinx 2013
Page 4
RioLinx 2013
Page 5
Installation Instructions
Initial configuration for mobile devices
In order for mobile devices to actually display the responsive pages (and not the default SharePoint mobile
view), there are 2 options:
1. If you have access to the SharePoint file system on your front-end servers, you can disable the mobile
view for all sites in a specific web applications zone by adding the following in the zones web.config
file, inside the <system.web> section:
<browserCaps>
<result type="System.Web.Mobile.MobileCapabilities, System.Web.Mobile, Version=4.0.0
.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />
<filter>isMobileDevice=false</filter>
</browserCaps>
The significant advantage of this solution is that all sites in that web application are instantly
responsive-capable, but that might not be an available option.
2. If you dont have access to the SharePoint file system (which is the case in Office 365), you have no
other option than to disable the Mobile Browser View site feature on each and every site and sub-site
that may be accessed by mobile users. This is obviously inconvenient if you have a lot of sites and subsites, but that might be your only choice.
RioLinx 2013
Page 6
2. This will deploy your solution globally to all your SharePoint web front-end servers.
3. Next, navigate to the Site Settings page of your site collection and select Site collection features.
Search for the Responsive SharePoint - Master Pages for SharePoint Foundation 2013 feature and
activate it.
4. Next, go back to your Site Settings and select Select Master Page (in the Look and Feel section).
5. Pick the responsive master page (Bootstrap 2, Bootstrap 3 or Zurb Foundation 4.3.2) you want to use
and click on the scope you want it to be used (either this site or all its sub-sites).
RioLinx 2013
Page 7
6. You should get a Responsive Master Page applied to your site (below Bootstrap 3):
Note: the Bootstrap 3 master page is the only master page capable to show sub-sites down to the 3rd
level. Because of still unresolved CSS issues, the Zurb Foundation 4 master page only shows 1st level sub-sites
and dont provide any fly-out menus:
RioLinx 2013
Page 8
7. In order to use the responsive page templates, navigate to Site Contents and select Site Pages:
8. We need to provide the page template library with some responsive layouts. Select Library (in the
SharePoint ribbon) and click on Library Settings. Then, under Content Types, click on Add from
existing site content types.
9. Select Responsive Content Types in the content types drop-down list and add the Responsive Web
Part Page content type. When youre done, press OK
RioLinx 2013
Page 9
10. Next, navigate back to your Site Pages library and select Files New document Responsive Web
Part Page:
11. Finally, complete all the required fields, choose the layout you want to use (make sure you select a a
layout template that matches your responsive master page), select the library you want the page to be
created in (e.g. Site Pages) and click Create:
RioLinx 2013
Page 10
12. You should get a responsive page (decrease your browser width to see the mobile view)
Below is a screenshot of a page created with the Orbit Page Template.
RioLinx 2013
Page 11
1. Navigate to the SharePoint Central Administration, and under System Settings, click Solution
Management. You should see that the sharepoint.foundation.publishing.2013.wsp is not deployed
to any web application yet. Select it and on the next page, click Deploy Solution
2. Select the Web application on which you wish to enable the solution and click ok
RioLinx 2013
Page 12
2. Navigate to your site collection, and in the Site Settings activate both the Site Collection and Site
features of Publishing for Foundation. In Site collection features, please activate SharePoint
Foundation Publishing Infrastructure. Then in Manage site features, activate SharePoint
Foundation Publishing.
RioLinx 2013
Page 13
3. Next, provide your site with some responsive page layouts. Go back to the Site collection features and
activate the features corresponding to the responsive framework you want to use (Bootstrap 2,
Bootstrap 3 or Zurb Foundation 4.3.2):
4. In order to create new pages using those page layouts, navigate to Site Contents and select Web
Pages (under Lists, Libraries, and other Apps). Then click Files (in the ribbon), New document and
select any of the four items.
5. Complete at least the Title and Page Url fields and select the Layout you want to use, then press the
Create button(
RioLinx 2013
Page 14
Note: the Open Graph fields are used to generate Facebook Open Graph meta tags that can be useful
for external-facing sites note that the Open Graph Image Url field is not used yet because of an
unresolved issue with how SharePoint generates urls as text).
6. Congratulations, your page should now be responsive! (see screenshot of a Bootstrap 3 Orbit page on
next page)
RioLinx 2013
Page 15
RioLinx 2013
Page 16
2. Second, make sure that both Site and Web features for SharePoint Server Publishing are activated.
Browse to the Site Settings page and in Site collection features, make sure SharePoint Server
Publishing Infrastructure is activated. Then browse to Manage site features and make sure
SharePoint Server Publishing is activated. If those 2 features are not activated yet, please activate
them.
RioLinx 2013
Page 17
3. Next, browse to Site Settings and select Solutions (under Web Designer Galleries). Select Upload
Solution in the SharePoint Ribbon. Browse to your local ResponsiveServer folder and upload the
RioLinx.SharePoint.Responsive.Server.wsp file.
4. After uploading the solution, activate it by selecting Activate in the following screen and wait a few
seconds (that screen is not very responsive) before the screen disappears and the solution appears as
activated :
RioLinx 2013
Page 18
5. Verify that the Responsive SharePoint - Master Pages for SharePoint Server 2013 site collection
feature has been activated.
6. Now you should be able to apply a responsive Master Page. Go to your Sites Settings and click on
Master Page (under Look and Feel)
7. Select the master page you want to apply to both Site Master Page and System Master Page, and press
OK.
RioLinx 2013
Page 19
8. You should now have a Responsive site, although the home site is not responsive yet.
\
The following screenshots show a SharePoint Zurb Foundation site as seen in a real LG Android device.
RioLinx 2013
Page 20
9. In order to use the responsive page layouts, browse to Site Content and select Pages
10. Select Files (in the ribbon), New Document and select Article Page.
RioLinx 2013
Page 21
11. Finally, complete the required fields and select a page layout that matches the master page you
previously applied. Then click Create.
RioLinx 2013
Page 22
Customization
SharePoint Server 2013/Office 365
How to modify existing Master Pages and Page Layouts
1. In order to modify either the master pages or the page layouts without access to the SharePoint server,
you must use SharePoint Designer. Connect to your site and browse to All files
_catalogs/masterpage and select the master page or page layout you want to modify.
RioLinx 2013
Page 23
You may also download the source code of the WSP solutions and modify or add master pages and page
layouts in the Visual Studio project (thats our preferred approach, but only works if you can re-deploy the
solution to your server).
RioLinx 2013
Page 24
2. Copy and paste the content of an existing, responsive master page or page layout and make the
necessary modifications.
RioLinx 2013
Page 25
RioLinx 2013
Page 26
2. Make your desired modifications and save. For instance, in the screenshot below, we add a footer row
with 2 Web Part Zones in the Bootstrap 3 Banner page layout:
3. Create a new page based on your modified page layout. The changes you made should now appear in
new pages (the screenshot below shows the additional Footer Left and Footer Right Web Part Zones
added to the BS3 Banner page layout):
RioLinx 2013
Page 27
3. In the page that opens, select the proper content type (usually SPF Page Layout), enter a Page Url, a
Title and an optional Description for your new page layout and click OK:
RioLinx 2013
Page 28
4. Open your site in SharePoint Designer, navigate to All Files PageLayouts, select an existing page
layout that will serve as the base for your new page layout and select Open.
5. Press Ctrl+A, Ctrl+C to select the whole page layout content and copy it to the clipboard. Close the file.
6. Open your site in SharePoint Designer, navigate to All Files PageLayouts, right-click on the page
layout you just created and select Edit File in Advanced Mode.
7. Select the default content of the page and press Ctrl+V to paste the content of the page layout you
opened in steps 4 and 5 above.
8. Add or modify any content you need in new page layout (in the screenshot below, we added a footer
row):
RioLinx 2013
Page 29
9. Save your file and close SharePoint Designer. You can also optionally press F12 in SharePoint Designer
to open your new page layout in Internet Explorer and verify that it contains the content you put in.
10. Create a new page in the Web Pages library of your site and choose the new page layout you created:
11. Edit your page and verify that the layout matches your new page layout:
RioLinx 2013
Page 30