how to use the html 5 boilerplate starter kit - Installing umbraco

GS 3 posts 23 karma points

Jun 19, 2011 @ 19:04

How to use the HTML 5 boilerplate starter kit?

Hi,

I have successfully installed the Html 5 boilerplate starter kit. I make a page, which is a "Boilerplate page", but the source contains nothing.

Does anyone know what needs to be done to utilise this starter kit?

Thanks

Copy Link

Kim Andersen 1447 posts 2197 karma points MVP

Jun 19, 2011 @ 20:22

Hmm...nothing at all? Does the page you just created run on the Boilerplate Page-template? (this can be checked under the Property-tab on your node)

If so could you try going to the Settings section and check the content of your Templates. Eg. the content of the Boilerplate Master-template should contain this:

<%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %>
  <asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
  <!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  
  <title><umbraco:Item field="siteTitle" recursive="true" runat="server"></umbraco:Item><umbraco:Item field="pageTitle" insertTextBefore=" - " runat="server"></umbraco:Item></title>
  <meta name="description" content='<umbraco:Item field="siteDescription" runat="server"></umbraco:Item>'>
  <meta name="author" content="">
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="stylesheet" href="css/style.css?v=2">
  <link rel="stylesheet" media="handheld" href="css/handheld.css?v=2">
  <script src="js/libs/modernizr-1.7.min.js"></script>
</head>
<body>
  <div id="container">
    <header>
<asp:ContentPlaceHolder Id="BoilerplateHeaderContentPlaceHolder" runat="server">
  No content in header
</asp:ContentPlaceHolder>
    </header>

    <div id="main" role="main">
<asp:ContentPlaceHolder Id="BoilerplateMainContentPlaceHolder" runat="server">
  No content in Main
</asp:ContentPlaceHolder>
    </div>

    <footer>
<asp:ContentPlaceHolder Id="BoilerplateFooterContentPlaceHolder" runat="server">
  No content in Footer
</asp:ContentPlaceHolder>
    </footer>
  </div>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  <script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.5.1.min.js"%3E%3C/script%3E'))</script>
  <script src="js/plugins.js"></script>
  <script src="js/script.js"></script>
  <!--[if lt IE 7 ]>
  <script src="js/libs/dd_belatedpng.js"></script>
  <script> DD_belatedPNG.fix('img, .png_bg');</script>
  <![endif]-->
  <script>
    var _gaq=[['_setAccount','<umbraco:Item field="googleAnalyticsKey" runat="server"></umbraco:Item>'],['_trackPageview']]; // Change UA-XXXXX-X to be your site's ID
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
    g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
    s.parentNode.insertBefore(g,s)}(document,'script'));
  </script>
</body>
</html>

and then the Boilerplate Page-template shall contain this:

<%@ Master Language="C#" MasterPageFile="~/masterpages/BoilerplateMaster.master" AutoEventWireup="true" %>

<asp:Content ContentPlaceHolderId="BoilerplateHeaderContentPlaceHolder" runat="server">
  <!-- Insert "BoilerplateHeaderContentPlaceHolder" markup here -->
</asp:Content>

<asp:Content ContentPlaceHolderId="BoilerplateMainContentPlaceHolder" runat="server">
  <umbraco:Item field="pageContent" runat="server"></umbraco:Item>
</asp:Content>

<asp:Content ContentPlaceHolderId="BoilerplateFooterContentPlaceHolder" runat="server">
  <!-- Insert "BoilerplateFooterContentPlaceHolder" markup here -->
</asp:Content>

Is this the case?

/Kim A

Copy Link

GS 3 posts 23 karma points

Jun 26, 2011 @ 01:25

Hi,

That is the case, yes!

However, one more question: How do I add a background image of my own to the .css (style) stylesheet? In the section for my own additions or elsewhere? If I do this in a body style, at the top of the css stylesheet, there is a body tag already defined so that would take precedence, no?

Thanks

Copy Link

Kim Andersen 1447 posts 2197 karma points MVP

Jun 26, 2011 @ 12:10

That's up to you actually. Just because there's a section in the stylesheet for your own additions, it doesn't mean that you're not allowed to edit, add, delete etc. the lines above this section. You can for sure edit the body that's already defined in the top of the stylesheet. There's nothing wrong in doing this.

In that way you will also learn "the already defined" lines of css, that you didn't write yourself.

But maybe you should just try it out and see if it works. No matter what it would be great if you could keep us posted in here, so we know if you made it work or you're still stuck :)

/Kim A

Copy Link

is working on a reply...

Flag this post as spam?

How to use the HTML 5 boilerplate starter kit?