From Bare Bones to Bootstrap with Composite C1

(Please note that the content here relates to Composite C1 3.2 and earlier. For v. 4.0 you can get pre-built starter sites, like "Open Cph".)

We are currently working on creating more starter sites for Composite C1 and part of that process have been going over different CSS grids, looking at template sites and similar which could yield more options and features for people setting up a new Composite C1 site.

One of the most promising things we have looked at so far is Twitter Bootstrap and below I’ll show how you can get a Bootstrap template up and running in Composite C1 without having to wait for the starter site. We will also look at how you can do customize the design using either LESS, downloadable themes or a web theme editor.  

Why care about Twitter Bootstrap?

Twitter Bootstrap is HTML and CSS based design templates for typography, forms, buttons, charts, navigation and other interface components and then some. Bootstrap goes the extra mile by trying to bring about some common ground like defining typical HTML constructs (like forms) and CSS classes for typical presentation like .table-stribed for tables with alternating row coloring and .form-inline for forms where labels should float left. Standardizing these things makes great sense in a system like Composite C1 where you pull in different packages and would like to have them adapt to the existing look and feel on the site.

As the icing on the cake Bootstrap is hard to hate if you are a web developer – it embraces CSS3, JavaScript, LESS and HTML5, it forces very little code bloat on you and at the other end you can find ready to use templates and theming tools which enable anyone able to decipher #bada55 color codes to easily customize website styling. There is quite good documentation and Bootstrap have also gained a lot of followers – it is the most downloaded and followed project on github.

Setting up a bare bones site for testing

Since there isn’t a Bootstrap based starter site yet we need to set it up from scratch it by hand. First let’s set up a bare bones Composite C1 website so we can keep the experiment clean:

1. Visit http://bit.ly/InstallCompositeC1 and install a new Composite C1 website.
   The install is handled by Microsoft’s Web Platform Installer – if this is something you haven’t used before all components you need is installed for you automatically.
2. Once you have a Composite C1 site running in your browser you are greeted with a straightforward wizard. While completing it, make sure to choose the Bare bones setup.

More guidance and alternative ways of downloading Composite C1 can be found here http://www.composite.net/Download.

Getting a template, a page and adding LESS file support

Given the bare bones setup we need to create a template and a page so we have somewhere to put Bootstrap and view it. Also we should pull in a C1 Package which ensures the web-server will serve LESS files (IIS will not by default).

1. Go to the “Layout” perspective.
2. On the “Page Types” folder click “Add Page Type”, name it “Content page” and click OK. Close the detail view.
3. On the “Page Templates” folder click “Add Template”, name it “Bootstrap”. If you are using Composite C1 v4 or later, choose the XML Template type. Click OK.  Close the detail view.
4. Go to the “Systems” perspective.
5. Open up “Packages | Available Packages | Composite.Web”, select “Composite.Web.Config.Html5MimeTypes” and click “Package Info”.
6. Click “Install” in the detail view and next through the wizard.
7. Go to the “Content” perspective.
8. Select “Websites” and click “Add Website…”, name it “My site” and click OK.
9. In the detail view that open up, add a heading and some content – you can grab some tasty lorem ipsum from http://baconipsum.com/.
10. Save and publish the page. Click “Browse saved page” to view it in all its bare bones glory.

Copying in Twitter Bootstrap and LESS resources

In case you were lazy and skipped the setup steps above and went with another starter site or you plan to use an existing Composite C1 installation, you should be aware of two things: The package Composite.Web.Config.Html5MimeTypes should be installed and if your site has the Composite.Web.Css.Less package installed, uninstall it (for simplicity we will be using JavaScript based LESS here, so we don’t want LESS support on the server).

To set up the template we will use Initializr – this give us a basic html template and the script and less files needed.

1. Open up the folder containing the Composite C1 website in Windows Explorer – we will be copying files here in a later step. If you are using WebMatrix to run the website, simply click the “Path” link in WebMatrix.
2. Go to http://www.initializr.com/
3. In “1 – Pre-configuration” click “Bootstrap”
4. In “2 – Fine tuning” you can keep the defaults, but consider unchecking all the checkboxes to keep things minimal. Just make sure that “Responsive Bootstrap 2.0.4” and “LESS” are selected.
5. Click “Download it!” and open up the ZIP you get.
6. Copy all the folders from the ZIP root to the website ~/Frontend folder (or root if that is your preference)

Manually transforming a boilerplate HTML5 template into a valid Composite C1 template

You can skip to the next section if you want a readymade template you can copy in.

The ZIP from Initializr contains a simple template index.html, but we need to customize this since we cannot copy it “as is” for a few reasons. First off Composite C1 need the html to be well structured XML (as in ‘close your tags’, ‘declare a namespace’ and ‘use numeric entities’) so it can be parsed and secondly style and script references should use absolute paths so the template works for page requests like /about/contact. Also we need to add a few Composite C1 specific tags, so page title and content html can end up in the right place.

You can find a version of the index.html file ready for Composite C1 below, but should you happen to come across another template you would like to pull in, these are the steps needed to make it a well-structured Composite C1 template:

• Ensure all tags are closed. <hr> should be <hr />, <meta charset="utf-8"> should be <meta charset="utf-8" /> etc.
• Make sure the root <html /> element include the three XML Namespace declarations shown here Presentation no longer available
• Use numeric entities only. &copy; should be &#169;, &raquo; should be &#187; etc.
• Make sure the html5 declaration is <!DOCTYPE html>
• Find all src and href attributes where the path is relative and make them absolute, like changing href="less/style.less" to href="~/Frontend/less/style.less" – you can omit the tilde, but it will ensure things work if Composite C1 runs in a subfolder.
• Add at least one content placeholder – this is where page content html ends up. A content placeholder looks like this <rendering:placeholder id="content" title="Content" default="true" />

Obviously you would also want to add navigation functionality, have a dynamic title and meta tags and so on – the steps above are kept to a functional minimum.

Creating the template

You already created a Page Template earlier and we have all the Bootstrap files copied to the Composite C1 website – all we need now is to replace the default template markup with the Bootstrap version.

1. Go to the “Layout” perspective and edit the Page Template “Bootstrap” we created earlier
2. Delete the existing template markup and copy in the markup below.
3. Save the template.
4. Browse the website front page to see your page presented with Twitter Bootstrap.

Customizing the theme using LESS

Bootstrap ships with a variables.less file which define colors, fonts, grid and element sizes. Edit ~/Frontend/less/bootstrap/variables.less either directly on disk using your favorite editor or via the C1 Console’s Layout perspective. Changes made to the file should show up immediately when you refresh a page view in your browser.

You can read about using LESS with Bootstrap at http://twitter.github.com/bootstrap/less.html.

Downloading themes from a gallery

At http://bootswatch.com/ you can view different themes and download them. They consist of a customized variables.less file and another less file containing additional styling. Here is how you can find and import a theme:

1. Go to http://bootswatch.com/ and find a theme you like
2. Use the Download dropdown to get the two .less files for the theme
3. Copy variables.less to your ~/Frontend/less/bootstrap folder and the other file to ~/Frontend/less
4. Edit ~/Frontend/less/styles.less and add an include statement so the second file gets pulled in.

Creating a random / custom theme using BootTheme

If neither prebuilt themes nor editing LESS files is not your cup of tea, but you can see why #bada55 is more red and green than blue, http://www.boottheme.com/ is for you. This site lets you edit variables.less in a sensible form layout and you get instant feedback on changes. It will auto import Google fonts simply by having you name them and you can switch the preview template to show your own website.

1. Go to http://www.boottheme.com/ and click Generate Theme
2. If you feel lucky use the dice button to cycle through some random themes
3. Open up the various areas like Scaffolding and Links to customize elements to your liking
4. In Typography you can specify a font name in fields like @baseFontFamily and @headingsFontFamily – you can add names of Google web fonts like Metal Mania.
5. To have your own website as a preview specify the URL above the preview. If you site is on localhost, click the pencil icon, copy the page html source from your Composite C1 site and paste it in.
6. When you have the theme you want click Export. Copy the LESS code, edit the variables.less file on your site and paste in the customized LESS.
7. BootTheme also allow you to see how the page will look in different viewports and the next time you visit the site it will open up as you left it. All in all a nice tool if you are not a diehard front-end developer.

Expect a starter site based on Twitter Bootstrap

From a CMS vendor point of view Twitter Bootstrap is a marvelous gift. On one hand we want to enable first time users to get up and running quickly, be able to install packages that snap in nicely in the design and get a website which that they feel is their own. On the other hand we want Composite C1 to be a front-end developers dream, void of weird abstraction layers and template technologies. Bootstrap, its use of technology and the eco system that has evolved around it seem to span both of these worlds. Provided that we provide the right starter sites, guidance, packages and tools this should enable us to reach a wider audience without alienating the people most dear to us – you (and us) the web developers.

Feel free to voice your opinion below and let us know if we are on the right track.

I have collected some additional links below If you want to know more about Twitter Bootstrap and related tools.

• http://en.wikipedia.org/wiki/Twitter_Bootstrap
• http://twitter.github.com/bootstrap/
• http://designshack.net/articles/css/20-awesome-resources-for-twitter-bootstrap-lovers/
• http://www.w3resource.com/twitter-bootstrap/tutorial.php
• http://builtwithbootstrap.com/