SharePoint 2013 Responsive Solutions

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/


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


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/


4/30


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.


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.


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).


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:


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


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:


11/30


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.


12/30


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/


13/30


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.


14/30


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(


15/30


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)


16/30



17/30


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.


18/30


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 :


19/30


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.


20/30


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.


21/30


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.


22/30


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 :


23/30


24/30


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).


25/30


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.


26/30


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.


27/30


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


28/30


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:


29/30


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


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:

SharePoint 2013 Responsive Solutions

Documents

Transcript of SharePoint 2013 Responsive Solutions