YUI 2 Boilerplate

Board index » YUI 2.x: » General

Page 1 of 1

[ 1 post ]

New Topic | Post Reply | Print view

Previous topic | Next topic

Alan W. Smith

Username: StimulatingPixels
Joined: Thu Jun 25, 2009 7:56 am
Posts: 19

Tags:

YUI 2 Boilerplate

Posted: Wed Oct 27, 2010 9:23 am

+0-

I was the folks at http://html5boilerplate.com/ updated their template the other day and it got me thinking about a YUI boilerplate. Figured I'd post it here in case anyone else was interested and also to get suggestion for improvement. (I know the forum recommends use of a clipboard service, but it seems like it's appropriate to paste this here. Am I off base with that?)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>YUI (v2.8.1) Boilerplate (v1.0)</title>
  
  <!-- Make YUI style calls as needed -->
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/reset-fonts-grids/reset-fonts-grids.css" />
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/logger/assets/skins/sam/logger.css">
  
  <!-- Personal Style Calls. Normally external, but inline here as an example -->
  <style type="text/css">
  #bd { margin-top: 20px; }
  h1 { font-size:138.5%; }
  #exampleSpan { font-weight: bold; }
  #ft { font-size:77%; color: #999; }
  #loggerContainer { margin-top: 20px; }
  </style>
  
  <!-- YUI Main Script Call -->
  <script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
  
  <!-- Additional YUI calls as needed and you aren't using a loader -->
  <script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/logger/logger-min.js"></script>

</head>

<body class="yui-skin-sam">

<!-- If you use YUI Browser History, change the src path and the below <iframe> and hidden <input> -->
<!--
<iframe id="yui-history-iframe" src="index.html"></iframe><input id="yui-history-field" type="hidden">
-->

<div id="doc4" class="yui-t6">

  <div id="hd" role="banner">
    <h1>Header</h1>
  </div>
  
  <div id="bd" role="main">
  
    <div id="yui-main">
      <div class="yui-b">
        <div class="yui-g">
    
          <!-- YOUR DATA GOES HERE -->
          <p>Status: <span id="exampleSpan">Loading...</span></p>
    
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero ante, posuere in fringilla in, dictum non ipsum. Vivamus nisi sem, iaculis hendrerit elementum sit amet, condimentum molestie quam.</p>
    
        </div><!-- /yui-g -->
      </div><!-- /yui-b -->
    </div><!-- /yui-main -->

    
    <div class="yui-b">
    
      <!-- YOUR NAVIGATION GOES HERE -->
      <ul>
        <li>Nav Link</li>
        <li>Nav Link</li>
        <li>Etc...</li>
      </ul>
      
      <div id="loggerContainer"></div>
    
    </div><!-- /yui-b -->  
  </div><!-- /bd -->
  
  
  <div id="ft" role="contentinfo">
    <p>Footer</p>
  </div><!-- /ft -->

</div><!-- /doc4 -->


<!-- Build your application here -->
<script type="text/javascript">

// create the primary function that will warp everything else
(function(){

  //////////////////////////////////////////////////////////////////////
  // Define your application variables here. 
  // For the reason why you should generally define everything here, 
  // refer to the YUI Theater transcript of: 
  // "Douglas Crockford — Crockford on JavaScript -- Act III: Function the Ultimate"
  // link: http://developer.yahoo.com/yui/theater/video.php?v=crockonjs-3
  // read the three paragraphs starting with: 
  // "In this language we have function scope."
  //////////////////////////////////////////////////////////////////////
  
  var statusValue = "";
  var myLogger;
  
  
  //////////////////////////////////////////////////////////////////////
  // Create your main applicaiton funcitons here. 
  //////////////////////////////////////////////////////////////////////
  
  // Example to add a logger
  function initLogger()
  {
    myLogger = new YAHOO.widget.LogReader("loggerContainer");
    YAHOO.log("Loaded the logger");
  }
  
  // Example funciton 1
  function doSomethingUseful1() 
  { 
    statusValue = "Ready."; 
    YAHOO.log("Did something useful 1");
  }
  
  // Example funciton 2   
  function doSomethingUseful2()
  {
    YAHOO.util.Dom.get("exampleSpan").innerHTML = "Ready.";
    YAHOO.log("Did something useful 2");
  }
  
  
  //////////////////////////////////////////////////////////////////////
  // Define an init funciton to call when the page is fully loaded.
  // This function will be what kicks off the applicaiton by calling
  // everything that's need to start in the proper order.
  //////////////////////////////////////////////////////////////////////
  
  // make a function designed to start everything up in the desired way
  function init()
  {
  
    // Call the examples to start them.
    initLogger();
    doSomethingUseful1();
    doSomethingUseful2();
  
  }
  
  
  // when the dom is ready call the init function
  YAHOO.util.Event.onDOMReady(init);

}()); // make an appropriate, immediate return of the primary funciton

</script>

</body>
</html>

I'm trying to set this up to follow the best practices I'm learning about from watching the Crockford on Javascript talks. So, any pointers in that direction would be most appreciated.

Page 1 of 1

[ 1 post ]

New Topic | Post Reply | Print view

Previous topic | Next topic

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum