Create a Responsive, Fluid HTML5/CSS3 based website on Umbraco 6 using Twitter Bootstrap
Building responsive, fluid HTML5/CSS3 based websites are a rage these days delivering the best ROI for clients investing in building new web sites. Building a single website which adapts itself depending on the device screen size gives end users richer experiences. There are several ways of building responsive websites, one of the popular ways to to use an existing framework like Bootstrap from Twitter which provide base scaffolding to quickly build responsive websites. In this blog post I am going to focus on how to integrate Twitter Bootstrap with Umbraco 6 and MVC/Razor display engine to build a HTML5/CSS3 based responsive website. The goal is to build a simple single page responsive website similar to the fluid bootstrap sample and focus on the integration part so that you can build more complex layouts as required. I plan to build upon this sample in future blog posts.
I am aware that there exists a Bootstrap package for Umbraco, but I found that it has not been updated in a while so I choose to start with a blank slate. I this blog post I am assuming that you have already setup Umbraco 6 with MVC as explained in the last blog post. The Visual Studio 2012 project that I am using is already provided as a download in the previous article.
Getting Started with Bootstrap integration
Once you have the Visual Studio 2012 project ready, head over to the Bootstrap website to download its zip file. Bootstrap provides a wide variety of customization options, for the purpose of this article I am just using the default download, feel free to customize your download as required. Extract the zip file to a temporary folder so that its contents are available for us to import into Umbraco. You can learn more about the files included in the bootstrap zip from here, for the purpose of this blog I will focus on using only the required files and minified versions of the same, since I do not intend to customize the default Bootstrap scripts.
Run (Ctrl+F5) the Umbraco project from within Visual Studio to launch it in the browser so that we can start importing the bootstrap items into our project. If you have not created any content in your Umbraco then you will be presented with the default Set up your website button and click on it to login to the admin site (credentials for the admin site are given in the previous article). In case you already have a site setup, then navigate to http://<sitename>/Umbraco to login into Umbraco admin by providing your credentials.
We need to import the Bootstrap JavaScript and CSS files into our project so that we can use them. In Visual Studio Solution Explorer window right click the project name and select Add – > New Folder from the context menu and give the name css to the new folder (if one does not already exist). Umbraco by default imports all style sheet files stored in this folder. Right click the css folder in Solution Explorer and select Add –> Existing Item from the context menu, navigate to the folder where you have extracted the boostrap files and select both bootstrap.min.css and bootstrap-responsive.min.css files from the css folder. This step will import the boostrap style sheets into your Visual Studio project as well as into Umbraco. Now right click the scripts folder in Solution Explorer and select Add –> Existing Item from the context menu, navigate to the folder where you have extracted the bootstrap files and select bootstrap.min.js file from the js folder. This step will import the bootstrap JavaScript file into Visual Studio as well as Umbraco. This completes our integration of Bootstrap into Umbraco we now move on to building our simple responsive website.
Building Our Responsive, Fluid Sample
The simple website that I plan to build will have single Homepage as shown in the bootstrap sample. Before you being building any website in Umbraco its very important to identify the sites structure followed by the structure of each page. Its essential that this information is thought through before hand so that its easier to arrange the Umbraco doctypes and templates accordingly. Figure 1 displays the layout for the Home page.
Figure 1 – Published Responsive Bootstrap enabled Umbraco website
As you can see from Figure 1 above the page has three distinct areas primary message, 3 secondary messages and a sidebar. Both the Primary Message and Secondary Message areas have title and content areas. Once we have fixed the areas of the page we will define them as editable below so that the content editors can edit the appropriate content based on the structure of the page and not worry about its display format.
To get started with the custom editing, we need to add our custom site-specific style sheet into to the project, this style sheet will contains styles which are specific to our site. Right click the css folder in the Solution Explorer and select Add –> New Item to open the Add New Item dialog. Select Style Sheet from the templates selection and give the name site.css and click OK to create the style sheet file. Copy paste the code from listing 1 below into the site.css style sheet file open in visual studio. Listing 1 contains all the styles required by our custom website, feel free to update the style sheet as per your requirements.
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
@media (max-width: 980px) {
/* Enable use of floated navbar text */
.navbar-text.pull-right {
float: none;
padding-left: 5px;
padding-right: 5px;
}
}
Listing 1: site.css custom style sheet
Creating the Site base Document Type
Umbraco allows you to nest Document Types, its an important feature to ensure that common properties for all documents are defined at the base document level so that they are reused in child document types. Its very similar to the master page concept in ASP.NET but different given the fact that master pages deal with layouts (which are similar to the Templates concept in Umbraco) while document types deal with defining properties that will be available for the CMS Content Editor to edit. In our case there are three properties that we need to define on the base document type: SEO Title, SEO Description and umbracoNaviHide. The first two properties are self explanatory and will map to title and description meta tag in the content header. The 3rd property is specific named Umbraco property. Basically if you set the umbracoNaviHide property on any of the content pages it will make the page invisible from the navigation menu’s even though the page remains published. This property is optional but I find it a good practice to include it since there are pages like Sitemap which need not show up in the navigation menu but at the same time they are required.
In the web browser go to the Umbraco administration portal. Select Settings from the Sections as shown in figure 2 below.
Figure 2: Umbraco Admin Settings
Right click on Document Types under Settings and select Create from the context menu (as shown in figure 3) to create a new Document Type.
Figure 3: Create new Document Type
In the Create dialog provide the Name as [PageBase] and click Create to create the Document Template as well as a matching Template with the same name as shown in figure 4. The Template will be used as our Master Layout.
Figure 4: Create Base Document Type
The [Pagebase] document type will open in the editor. Switch to the Generic properties tab and click on the Click here to add a new property bar to add the 3 properties as listed below and save them. Figures 5 to 7 show them being added.
Name: SEO Title
Alias: sEOTitle
Type: Textstring
Figure 5: SEO Title Property
Name: SEO Description
Alias: sEODescription
Type: textbox multiple
Figure 6: SEO Description property
Name: umbracoNaviHide
Alias: umbracoNaviHide
Type: True/false
Figure 7: umbracoNaviHide property
Now that we have our base page setup we need to create Partial View for our Site Navigation Header so that we can include it into our [PageBase] template. Right click Partial Views under Settings and select Create from the context menu. In the Create dialog give the Name as Navigation and click Create to create the Partial view and open its editor. Copy paste the code from listing 2 below into the editor and click the Save icon to save the partial view.
@inherits Umbraco.Web.Mvc.UmbracoViewPage<IPublishedContent>
@{
Layout = null;
var parent = Model.AncestorOrSelf(1);
string classSelectedMenuItem = "";
// Special Handling for Home page
if(Model.Name == parent.Name)
{
classSelectedMenuItem = "active";
}
}
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<button type="button" class="btn btn-navbar"
data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Responsive Sample</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="@classSelectedMenuItem" >
<a href="@parent.NiceUrl()">@parent.Name</a></li>
@foreach(var page in parent.Children.Where(x => x.IsVisible()))
{
string strClassName = "";
if(@Model.Name == @page.Name)
{
strClassName = "active";
}
<li class="@strClassName">
<a href="@page.NiceUrl()">
@page.Name
</a></li>
}
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Listing 2: NavigationHeader partial view
The above listing uses the Bootstrap Navigation bar to build the navigation menu. We loop over all published and visible pages in Umbraco to build the dynamic navigation menu.
Under Settings, expand Templates node and click on the [PageBase] template to open it in Umbraco editor. This template with automatically created when we created the Document Type with the same name. This template will server as our Master Layout template. Copy Paste code from listing 3 into the editor and click the Save icon to save the template in Umbraco.
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>@Umbraco.Field("sEOTitle")</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content='@Umbraco.Field("sEODescription")'>
<!-- styles -->
<link href="~/css/bootstrap.min.css" rel="stylesheet">
<link href="~/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="~/css/site.css" rel="stylesheet">
</head>
<body>
<nav>
@Html.Partial("Navigation", @Model.Content)
</nav>
<div class="container-fluid">
<div class="row-fluid">
@RenderSection("Content")
</div><!--/row-->
<hr>
<footer>
<p>© Systenics Solutions 2013</p>
</footer>
</div><!--/.fluid-container-->
<script src="~/scripts/jquery-1.9.1.min.js"></script>
<script src="~/scripts/bootstrap.min.js"></script>
</body>
</html>
Listing 3 - [PageBase] template
In the above listing I have defined a HTML5 based responsive template using Bootstrap classes where necessary. The appropriate Bootstrap style sheets and JavaScripts have also been included into the template file. I have defined one section Content on the page which will be replaced by appropriate child pages. You will also find that I am using the Umbraco Field method to define the SEO Title and SEO Description properties that we defined on the [PageBase] document type on the page.
Now we need to define the Home Page document type, expand the Document Types node under Settings. Right click on the [PageBase] node and select Create from the context menu. Provide the document name as Home and uncheck the Create Matching template checkbox and click Create button to create the Home document type under the [PageBase] document. We create it under the [PageBase] document so that it can inherit properties defined in the base document. Switch to the Structure tab and select Yes for Allow at root so that Home page can be the root of the site. Save the setting and switch to the Tabs tab so that we can define the tabs required for the Homepage. Add 3 new tabs named Primary Message, Secondary Message and Sidebar by entering the tab name and clicking New Tab button. Switch to the Generic Properties tab and add the following properties.
Name: homePrimaryMessageTitle
Alias: homePrimaryMessageTitle
Type: Textstring
Tab: Primary Message
Name: homePrimaryMessageContent
Alias: homePrimaryMessageContent
Type: Richtext editor
Tab: Primary Message
Name: homeSecondaryMessageTitle1
Alias: homeSecondaryMessageTitle1
Type: Textstring
Tab: Secondary Message
Name: homeSecondaryMessageContent1
Alias: homeSecondaryMessageContent1
Type: Richtext editor
Tab: Secondary Message
Name: homeSecondaryMessageTitle2
Alias: homeSecondaryMessageTitle2
Type: Textstring
Tab: Secondary Message
Name: homeSecondaryMessageContent2
Alias: homeSecondaryMessageContent2
Type: Richtext editor
Tab: Secondary Message
Name: homeSecondaryMessageTitle3
Alias: homeSecondaryMessageTitle3
Type: Textstring
Tab: Secondary Message
Name: homeSecondaryMessageContent3
Alias: homeSecondaryMessageContent3
Type: Richtext editor
Tab: Secondary Message
Name: homeSidebar
Alias: homeSidebar
Type: Richtext editor
Tab: Secondary Message
Once you have saved all the properties your properties definition for the Home document type should look like figure 8 below.
Figure 8: Properties defined for Home document type
Now let’s define the matching Home template so that we have appropriate containers defined to display the properties that have been added by us. Expand the Templates node under Settings and right click on the existing [PageBase] template and select Create from the context menu to create a new template using [PageBase] as the master template. Enter the template name as Home and click Create button to create it. You will see that the new template uses the [PageBase] template as the master page template. Copy paste the code from Listing 4 below into the editor for Home template and click the Save icon to save the template.
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
Layout = "PageBase.cshtml";
}
@section content{
<div class="span3">
<div class="well sidebar-nav">
@Umbraco.Field("homeSidebar")
</div><!--/.well -->
</div><!--/span-->
<div class="span9">
<div class="hero-unit">
<h1>@Umbraco.Field("homePrimaryMessageTitle")</h1>
@Umbraco.Field("homePrimaryMessageContent")
</div>
<div class="row-fluid">
<div class="span4">
<h2>@Umbraco.Field("homeSecondaryMessageTitle1")</h2>
@Umbraco.Field("homeSecondaryMessageContent1")
</div><!--/span-->
<div class="span4">
<h2>@Umbraco.Field("homeSecondaryMessageTitle2")</h2>
@Umbraco.Field("homeSecondaryMessageContent2")
</div><!--/span-->
<div class="span4">
<h2>@Umbraco.Field("homeSecondaryMessageTitle3")</h2>
@Umbraco.Field("homeSecondaryMessageContent3")
</div><!--/span-->
</div><!--/row-->
</div><!--/span-->
}
Listing 4 – Home template
The above listing 4 lays out the appropriate HTML elements using Bootstrap styles and also uses Umbraco Field method to provide placeholder for content that will be provided by the end user. Now that we have the Home template setup we need to update the Home document type so that it uses this template by default. Expand Document Types under Settings and then select the Home document type. Under the Info tab, Default Template choose Home from the drop down list and click Save icon. Now we are all set to build our content page for the Home document type. Click on Content icon (figure 2) under Sections and from the top tree view right click on Content under Content title and select Create from the context menu. Provide the Name as Home and select the Document Type Home and click on Create button to create the new content as shown in figure 9.
Figure 9 – Create Home content page
You will see that the Home content page is created but unpublished (indicated by the greyed out icon for the page – figure 10) and you are presented with tab to fill up the content for the page. These same tabs will be available to your content editors to edit content for the page. As you can see the content page really hides the inner implementation details of the page and just presents the user with a friendly view to edit content as per their requirements. The power of Umbraco CMS shines in this aspect where you are given totally liberty to define the tabs and its editable properties so that the content is presented to content editors in a format they understand rather than training the content editors to understand the limited structure other CMS systems provide.
Fill up the content of each of the Home page tabs and save them as you proceed. Its important that you also fill up the SEO Title and SEO Description properties on the Properties tab. You can see that even though these properties were defined on the [PageBase] document type, they have been inherited by the Home document type. Once you have filled all the information, click on the Save and Publish icon (circled red in Figure 10) to publish the page and make it available for everyone to view.
Figure 10 – Unpublished Home content page
Figure 10 shows the unpublished view of the Home content page. Once the page is published you can see that Umbraco has provided a published date as well as path to view the published page. If you click on that path or access the Umbraco website Url in a new browser you will be able to view the final result of the responsive website. You can use the Responsive Design View tool available in latest version of FireFox browser to test the responsive capabilities of the site. Figures 11 to 13 show the Home page rendered in different browser sizes.
Figure 11 – 320x480 Mobile view of the Home page
Figure 12 – 786x1024 Tablet view of the Home page
Figure 13 – 1280x600 Desktop view of the Home page
The above 3 figures show the mobile, tablet and desktop view of the responsive Home page. You can see how the page menu automatically changes to an icon on the mobile screen (Figure 11,12) and other content elements are also laid out one below another on the mobile browser. You can see similar fluid changes between the tablet and desktop screen sizes.
Summary
In this blog post I have integrated the popular Twitter Bootstrap framework into Umbraco 6 CMS. I have covered all the steps related to integration as well as building your first responsive, fluid Home page in Umbraco 6. This blog post should serve as a starting point for anyone interested in building responsive fluid layouts on Umbraco 6. In future blog posts I plan to extend on this sample adding more features.
Download
Click here to download the sample used in this article.