8/10/2019 SharePoint 2013 Responsive Solutions
1/30
Responsive
SharePoint WSP
Edition
Version 1.0
Bootstrap 3 and
Foundation 4
for SP 2013
The Bootstrap 3 and Foundation 4 frameworks integrated with
Microsoft SharePoint 2013, including several master pages for
both SharePoint Foundation and SharePoint Server. It also
includes a Publishing feature for SharePoint Foundation. Basedon Bootstrap version 3.0.0 and Foundation version 4.3.2.
Includes all source files, installation and usage instructions.
Authors:Ugo Brunet
Raphael Londner
Based on the work of :
Eric Overfield
Darce Hess
Gilda Spencer
http://www.riolinx.com/8/10/2019 SharePoint 2013 Responsive Solutions
2/30
RioLinx 2013 Page 2
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
http://www.riolinx.com/8/10/2019 SharePoint 2013 Responsive Solutions
3/30
RioLinx 2013 Page 3
Why Responsive SharePoint WSP Edition?This project is based on some of Responsive SharePoint projects on CodePlex originally built by the PixelMill
team (http://responsivesharepoint.codeplex.com/). Although it is a great step forward towards a responsive site
on SharePoint, there are some limitations that can prevent a wide use of responsive frameworks on SharePoint.
First of all, the master pages in this original project are not compatible with SharePoint Foundation 2013,
because they use references to the Microsoft Publishing assembly, which is not present in SharePoint
Foundation environments. This original project also relied on the new 2013 Design Manager, which is only
available in SharePoint Server 2013. Moreover, this dependency on Design Manager also required inconvenient
style sheet adjustments of the responsive master pages in SharePoint Designer for path based site collection
(such ashttp://ourwebapp/sites/contoso).
Overall, we felt it was a good idea to build standard SharePoint WSP solutions in order to streamline the
deployment process and avoid lengthy customizations and manipulations in SharePoint Designer.
We first decided to build a SharePoint 2013 Foundation compatible versionof the PixelMill project.
Unfortunately we had to face some difficulties:
- In SharePoint Foundation, we cannot use the $SPUrlexpression 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 layoutsfolder), and that meant ou
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 a
the way SharePoint Foundation implemented its page templates, we managed to build a custom
Responsive Web Part Pagecontent 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 administrato
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 2013and 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 found the Mund Publishing Infrastructure (http://mundpublishingfeatur.codeplex.com/) but that
solution is only compatible with SharePoint Foundation 2010. We thus first migrated it to be SharePoint
2013 compatible and modified it slightly to fit our requirements. This 2013-compatible version is available
athttp://spf2013publishing.codeplex.com/and is optional.
- 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
ourSharePoint Foundation 2013 Publishing Infrastructureso 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.
http://responsivesharepoint.codeplex.com/http://responsivesharepoint.codeplex.com/http://responsivesharepoint.codeplex.com/http://ourwebapp/sites/contosohttp://ourwebapp/sites/contosohttp://ourwebapp/sites/contosohttp://mundpublishingfeatur.codeplex.com/http://mundpublishingfeatur.codeplex.com/http://mundpublishingfeatur.codeplex.com/http://spf2013publishing.codeplex.com/http://spf2013publishing.codeplex.com/http://spf2013publishing.codeplex.com/http://spf2013publishing.codeplex.com/http://spf2013publishing.codeplex.com/http://spf2013publishing.codeplex.com/http://spf2013publishing.codeplex.com/http://spf2013publishing.codeplex.com/http://mundpublishingfeatur.codeplex.com/http://ourwebapp/sites/contosohttp://responsivesharepoint.codeplex.com/http://www.riolinx.com/8/10/2019 SharePoint 2013 Responsive Solutions
4/30
8/10/2019 SharePoint 2013 Responsive Solutions
5/30
RioLinx 2013 Page 5
What is in this Package?Within the RioLinx.SharePoint.Responsive.zipfile you will find 2 directories:
ResponsiveFoundationThis folder contains the WSP farm solution file to be deployed in a SharePointFoundation 2013 farm, as well as scripts you can use to easily deploy the WSP solution file as a SharePoint
Administrator. You may also deploy this solution is a SharePoint Server 2013 environment, but you will have to
create your own responsive Page Layouts if you plan to use the SharePoint Server Publishing Infrastructure.
ResponsiveServerThis folder contains a sandboxed WSP solution to be used with the SharePoint Server
Publishing (site collection and site) features activated. This solution is compatible with both SharePoint Server
2013 and Office 365.
http://www.riolinx.com/8/10/2019 SharePoint 2013 Responsive Solutions
6/30
RioLinx 2013 Page 6
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 section:
isMobileDevice=false
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 Viewsite 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 sub-sites, but that might be your only choice.
http://www.riolinx.com/8/10/2019 SharePoint 2013 Responsive Solutions
7/30
RioLinx 2013 Page 7
Responsive for SharePoint Foundation 2013 solution
1. Extract the RioLinx.SharePoint.Responsive.zip file on one of your SharePoint web front end server
Navigate to the ResponsiveFoundationfolder and run DeployResponsiveFoundation.bat
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 2013feature andactivate it.
4. Next, go back to your Site Settings and select Select Master Page(in the Look and Feelsection).
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).
http://www.riolinx.com/8/10/2019 SharePoint 2013 Responsive Solutions
8/30
RioLinx 2013 Page 8
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 1stlevel sub-sites
and dont provide any fly-out menus:
http://www.riolinx.com/8/10/2019 SharePoint 2013 Responsive Solutions
9/30
RioLinx 2013 Page 9
7. In order to use the responsive page templates, navigate to Site Contentsand 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 Typesin the content types drop-down list and add the Responsive Web
Part Pagecontent type. When youre done, pressOK
http://www.riolinx.com/8/10/2019 SharePoint 2013 Responsive Solutions
10/30
RioLinx 2013 Page 10
10.Next, navigate back to your Site Pages library and select FilesNew documentResponsive Web
Part Page:
11.Finally, complete all the required fields, choose the layoutyou want to use (make sure you select a a
layout template that matches your responsive master page), select the libraryyou want the page to be
created in (e.g. Site Pages) and click Create:
http://www.riolinx.com/8/10/2019 SharePoint 2013 Responsive Solutions
11/30
RioLinx 2013 Page 11
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.
http://www.riolinx.com/8/10/2019 SharePoint 2013 Responsive Solutions
12/30
RioLinx 2013 Page 12
Publishing for SharePoint Foundation 2013 solution
The installation of this solution is optional and is only recommended if you want to take advantage of a
lightweight publishing feature in SharePoint Foundation, similar to (but not iso-functional)the Publishing
Infrastructure available in SharePoint Server.1. Download the SharePoint.Foundation.Publishing.2013.zip file from the SharePoint Foundation 2013
Publishing Infrastructureproject on CodePlex (https://spf2013publishing.codeplex.com)and extract it
somewhere on your SharePoint server. Extract it and run the InstallFoundationPublishing.bat
1. Navigate to the SharePointCentral Administration, and under System Settings, click Solution
Management. You should see that the sharepoint.foundation.publishing.2013.wspis not deployed
to any web application yet. Select itand on the next page, clickDeploy Solution
2. Select the Web applicationon which you wish to enable the solution and click ok
https://spf2013publishing.codeplex.com/https://spf2013publishing.codeplex.com/https://spf2013publishing.codeplex.com/https://spf2013publishing.codeplex.com/http://www.riolinx.com/8/10/2019 SharePoint 2013 Responsive Solutions
13/30
RioLinx 2013 Page 13
2. Navigate to your site collection, and in the Site Settings activate both the Site Collection and Site
featuresof Publishing for Foundation. In Site collection features, please activate SharePoint
Foundation Publishing Infrastructure. Then in Manage site features, activate SharePoint
Foundation Publishing.
http://www.riolinx.com/8/10/2019 SharePoint 2013 Responsive Solutions
14/30
RioLinx 2013 Page 14
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 fieldsand select the Layoutyou want to use, then press the
Createbutton(
http://www.riolinx.com/8/10/2019 SharePoint 2013 Responsive Solutions
15/30
RioLinx 2013 Page 15
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)
http://www.riolinx.com/8/10/2019 SharePoint 2013 Responsive Solutions
16/30
RioLinx 2013 Page 16
http://www.riolinx.com/8/10/2019 SharePoint 2013 Responsive Solutions
17/30
RioLinx 2013 Page 17
Responsive for SharePoint Server 2013/Office365 sandboxed
solution
1. First, deactivate the Mobile Browser Viewsite feature, otherwise users accessing the site from real,
mobile devices will be defaulted to the SharePoint standard mobile view of the site.
2. Second, make sure that both Site and Web featuresfor SharePointServer Publishingare activated.
Browse to the Site Settings page and in Site collection features, make sure SharePoint Server
Publishing Infrastructureis activated. Then browse to Manage site featuresand make sure
SharePoint Server Publishingis activated. If those 2 features are not activated yet, please activate
them.
http://www.riolinx.com/8/10/2019 SharePoint 2013 Responsive Solutions
18/30
RioLinx 2013 Page 18
3. Next, browse to Site Settingsand select Solutions(under Web Designer Galleries). Select Upload
Solutionin the SharePoint Ribbon. Browse to your local ResponsiveServerfolderand upload the
RioLinx.SharePoint.Responsive.Server.wspfile.
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 :
http://www.riolinx.com/8/10/2019 SharePoint 2013 Responsive Solutions
19/30
RioLinx 2013 Page 19
5. Verify that the Responsive SharePoint - Master Pages for SharePoint Server 2013site 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.
http://www.riolinx.com/8/10/2019 SharePoint 2013 Responsive Solutions
20/30
RioLinx 2013 Page 20
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.
http://www.riolinx.com/8/10/2019 SharePoint 2013 Responsive Solutions
21/30
RioLinx 2013 Page 21
9. In order to use the responsive page layouts, browse to Site Content and select Pages
10.Select Files(in the ribbon), New Documentandselect Article Page.
http://www.riolinx.com/8/10/2019 SharePoint 2013 Responsive Solutions
22/30
RioLinx 2013 Page 22
11.Finally, complete the required fieldsand select a page layoutthat matches the master page you
previously applied. Then click Create.
12.The result should be a Responsive Web Page :
http://www.riolinx.com/8/10/2019 SharePoint 2013 Responsive Solutions
23/30
8/10/2019 SharePoint 2013 Responsive Solutions
24/30
RioLinx 2013 Page 24
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).
http://www.riolinx.com/8/10/2019 SharePoint 2013 Responsive Solutions
25/30
RioLinx 2013 Page 25
How to create new Master Pages and new Page Layouts
1. In order to create either a new master page or a new page layout, you need to use SharePoint
Designer. Connect to your site and go to either Page Layoutsor Master Pages, then click on New
Page Layoutor Blank Master Page. Then complete the required fields and click OK.
2. Copy and paste the content of an existing, responsive master page or page layout and make the
necessary modifications.
http://www.riolinx.com/8/10/2019 SharePoint 2013 Responsive Solutions
26/30
RioLinx 2013 Page 26
SharePoint Foundation (with Publishing Infrastructure)
This section only covers customizations when the SharePoint Foundation Publishing Infrastructure is present in
the SharePoint Foundation farm, mostly because the only other option is to download the source code of
RioLinx.SharePoint.Responsive.Foundation and add additional page layouts in the Layouts/PageTemplatesfolder. Since developer-oriented tasks are out-of-scope in this user guide, we only focus on customizations that
can be performed by end users, without requiring access to Visual Studio and the SharePoint file system.
How to modify existing Master Pages
Please refer to theprocess described abovefor SharePoint Server 2013/Office 365
How to modify existing Page Layouts
Important Note: modifications to existing page layouts currently only affect newpages, not existing ones (the
SharePoint Foundation Publishing Infrastructure does not yet include the ability to refresh existing pages
when the underlying page template has changed).1. Open your site in SharePoint Designer, navigate to All FilesPageLayouts, right-click on the page
layout you want to modify and select Edit File in Advanced Mode.
http://www.riolinx.com/8/10/2019 SharePoint 2013 Responsive Solutions
27/30
RioLinx 2013 Page 27
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):
http://www.riolinx.com/8/10/2019 SharePoint 2013 Responsive Solutions
28/30
RioLinx 2013 Page 28
How to create new Master Pages
Please refer to theprocess described abovefor SharePoint Server 2013/Office 365
How to create new Page Layouts
1. Navigate to the root web of your site collection and in the Site Contentspage select Page Layouts.
2. Select Files New Document SPF Page Layout
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:
http://www.riolinx.com/8/10/2019 SharePoint 2013 Responsive Solutions
29/30
RioLinx 2013 Page 29
4. Open your site in SharePoint Designer, navigate to All FilesPageLayouts, 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 FilesPageLayouts, 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):
http://www.riolinx.com/8/10/2019 SharePoint 2013 Responsive Solutions
30/30
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:
http://www.riolinx.com/