SharePoint 2013 BootStrap

Watch the above video to demonstrate how to create a simple mobile responsive branded SharePoint 2013 site using only CSS.

However when developing a complex branding site for SharePoint 2013, where the site needs to be mobile responsive and compatible across mobile devices and tablets, then the starting point is learning how to implement a master page that uses BootStrap.

Getting Started

There are three ways below to get started in using BootStrap framework for SharePoint 2013.

• ShareBoot – It is a responsive SharePoint 2013 theme that is downloaded from a Zip file. When uncompressed, the zip contains a master page, three page layouts and bootstrap files;
• CodePlex – There is an open community source code called “Responsive SharePoint” that contains the source code and WSP file to deploy a branded SharePoint 2013 site with BootStrap; and
• Twitter BootStrap – Solutions in GitHub with its documentations.

“ShareBoot” and “Responsive SharePoint CodePlex” already has their solution with BootStrap integrated with SharePoint 2013. So it is quicker to get started using either of them in SharePoint 2013. However “Twitter Bootstrap” has standalone solution with just CSS3,  JavaScript & Font files.

This blog focuses on how to use ShareBoot.  So for a complete instructions on how to deploy ShareBoot in SharePoint 2013, read below:

Note that the documented instructions is a manual process of deploying ShareBoot as a drawback. So to automate the deployment process, I suggest packaging up all the deployment ShareBoot files into Visual Studio 2012-13 as a solution package WSP file.

 

References

1. http://getbootstrap.com/

2. W3School links below:

Bootstrap 3 Home

Bootstrap Grids

• BS Grid System
• BS Stacked/Horizontal
• BS Grid Small
• BS Grid Medium
• BS Grid Large
• BS Grid Examples

Bootstrap CSS Ref

• CSS Typography
• CSS Buttons
• CSS Forms
• CSS Helpers
• CSS Images
• CSS Tables

Bootstrap Comps

• Glyphicons
• Dropdowns
• Navs

Bootstrap JS Ref

• JS Alert
• JS Button
• JS Carousel
• JS Collapse
• JS Dropdown
• JS Modal
• JS Popover
• JS Scrollspy
• JS Tab
• JS Tooltip

3. SharePoint 20103 Responsive – CodePlex

• Home – https://responsivesharepoint.codeplex.com/
• Documentation and WSP file – https://responsivesharepoint.codeplex.com/releases/view/114361
• Download release – https://responsivesharepoint.codeplex.com/releases
• Source – https://responsivesharepoint.codeplex.com/SourceControl/latest#README.txt

Advertisements