Tag Archive for starter

HTML5 boilerplate with comments

<!doctype html>
<html lang="en" class="no-js">
<head>
  <meta charset="utf-8">

  <!-- <a href="http://www.phpied.com/conditional-comments-block-downloads/">www.phpied.com/conditional-comments-block-downloads/</a> -->
  <!--[if IE]><![endif]-->

  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame 
       Remove this if you use the .htaccess -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title></title>
  <meta name="description" content="">
  <meta name="author" content="">

  <!--  Mobile Viewport Fix
        j.mp/mobileviewport & davidbcalhoun.com/2010/viewport-metatag 
  device-width : Occupy full width of the screen in its current orientation
  initial-scale = 1.0 retains dimensions instead of zooming out if page height > device height
  maximum-scale = 1.0 retains dimensions instead of zooming in if page width < device width
  -->
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">


  <!-- Place favicon.ico and apple-touch-icon.png in the root of your domain and delete these references -->
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">


  <!-- CSS : implied media="all" -->
  <link rel="stylesheet" href="css/style.css?v=1">

  <!-- For the less-enabled mobile browsers like Opera Mini -->
  <link rel="stylesheet" media="handheld" href="css/handheld.css?v=1">

 
  <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
  <script src="js/modernizr-1.5.min.js"></script>

</head>

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <body class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <body class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <body class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->

  <div id="container">
    <header>

    </header>
    
    <div id="main">

    </div>
    
    <footer>

    </footer>
  </div> <!--! end of #container -->


  <!-- Javascript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery. fall back to local if necessary -->
  <script src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>" >http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script></a>
  <script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"></script>')</script>


  <script src="js/plugins.js?v=1"></script>
  <script src="js/script.js?v=1"></script>

  <!--[if lt IE 7 ]>
    <script src="js/dd_belatedpng.js?v=1"></script>
  <![endif]-->


  <!-- yui profiler and profileviewer - remove for production -->
  <script src="js/profiling/yahoo-profiling.min.js?v=1"></script>
  <script src="js/profiling/config.js?v=1"></script>
  <!-- end profiling code -->


  <!-- asynchronous google analytics: mathiasbynens.be/notes/async-analytics-snippet 
       change the UA-XXXXX-X to be your site's ID -->
  <script>
   var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
   (function(d, t) {
    var g = d.createElement(t),
        s = d.getElementsByTagName(t)[0];
    g.async = true;
    g.src = '//www.google-analytics.com/ga.js';
    s.parentNode.insertBefore(g, s);
   })(document, 'script');
  </script>
  
</body>
</html>

source

HTML Strict starter

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "<a href="http://www.w3.org/TR/html4/strict.dtd">" >http://www.w3.org/TR/html4/strict.dtd"></a>

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Sample Title</title>
</head>
<body>



</body>
</html>

source

HTML Transitional starter

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "<a href="http://www.w3.org/TR/html4/loose.dtd">" >http://www.w3.org/TR/html4/loose.dtd"></a>

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Sample Title</title>
</head>

<body>



</body>
</html>

source

XHTML Strict starter

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">" >http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></a>

<html xmlns="<a href="http://www.w3.org/1999/xhtml"" >http://www.w3.org/1999/xhtml"</a> xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>Sample Title</title>
</head>

<body>
	
	
	
</body>
</html>

source

HTML Strict starter

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "<a href="http://www.w3.org/TR/html4/strict.dtd">" >http://www.w3.org/TR/html4/strict.dtd"></a>

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Sample Title</title>
</head>
<body>



</body>
</html>

source

HTML Strict starter

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "<a href="http://www.w3.org/TR/html4/strict.dtd">" >http://www.w3.org/TR/html4/strict.dtd"></a>

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Sample Title</title>
</head>
<body>



</body>
</html>

source

CSS Starter

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit;}

table {border-collapse: collapse; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal;}
form legend {display: none;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
ol, ul {list-style: none;}
hr {display: none; visibility: hidden;}

:focus {outline: 0;}

source

XHTML 1 Strict Complete Starter Template

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">" >http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></a>
<html xmlns="<a href="http://www.w3.org/1999/xhtml"" >http://www.w3.org/1999/xhtml"</a> xml:lang="en" lang="en">
<head>
<title>SITENAME</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="" media="screen,projection" type="text/css" />
<link rel="stylesheet" href="" media="print" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="SITENAME Updates" href="" />
<script type="text/javascript" src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>" >http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script></a>
<script type="text/javascript" src=""></script>
<script type="text/javascript" charset="utf-8">
$(function(){
});
</script>
</head>
<body>
<div id="wrapper">
  <h1>SITENAME</h1>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "<a href="https://ssl."" >https://ssl."</a> : "<a href="http://www.");" >http://www.");</a>
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("YOUR-UA-GOES-HERE");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>

source

css starter

/* ------  Style Sheet ---last edited 12-12-06 -----------------------------------------*/

/*
below is a guide for beginning your style sheet - not all may be
required - the idea is to "normalize" or override different browsers
default styles thereby gaining more control
*/

/*
body is used to provide basic page styles meant to be inherited
by nearly all of the page’s children: font-face, size, alignment,
etc. Some use the html selector, but I have never done that so
it’s not listed.
*/
body {
/*using 62.5 allows you to assign 1.1em as a font size and it will be on most browsers the same as 11px */
font: 62.5%/1.6 "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
/*You do not have to use above method but the idea is to reduce the size of the default browsers  - maybe use 76% */
}

/*
Zero down margin and padding on all elements - before we were using
the universal selector for this but that may cause unwanted issues
*/
body, div, dl, dt, dd, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, testarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}

/* Normalizes font-size for headers - important one to use */
h1, h2, h3, h4, h5, h6 {
font-size: 100%
}

/* removes list-style from lists */
ol, ul {
list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
a:link, a:visited {
color: #666;
text-decoration: underline;
}
a:hover, a:active, a:hover {
text-decoration: none;
}

/*
Focus/active should be different than hover is some regards, such
as providing a background color to make it highly visible to
keyboard users. Thus, certain focal styles may be redefined.
*/

a:focus, a:active {
}

img {
border:none
}

/* use this to clear floats in FF */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/*
The wrapper div can be used to contain the page itself. It can
also redefine some characteristics inherited from the body. It
is high on this page as it’ll contain everything else used.
*/
#wrapper {
width: 720px;
margin: 0 auto;
text-align: left;
background-color: #fff;
border-left: 2px solid #666;
border-right: 2px solid #666;
border-bottom: 2px solid #666;
}


/*
After Normalizing is done define and comment layout below - you
can use a trick of putting "=" in front of the section to use
"find" easier
*/


/* ------- =side column -----------------------------------------*/



/* ------- =content -----------------------------------------*/

source

CSS starter Rob

/************************************/
/*	Table of Contents				*/
/*	0. Colors						*/
/*	1. General						*/
/*									*/
/*									*/
/*									*/
/*									*/
/*									*/
/*									*/
/*									*/
/*									*/
/*	99. Printer Styles				*/
/************************************/

/************************************/
/*	0. Colors						*/
/************************************/

/************************************/
/*	1. General						*/
/************************************/

html,body,blockquote,div,dd,dl,dt,h1,h2,h3,h4,h5,h6,li,ol,p,pre,th,td,ul {
margin:0;
padding:0;
}
body {
font-size:62.5%;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
caption,th {
text-align:left;
}
code,h1,h2,h3,h4,h5,h6,pre {
font-size:100%;
}
img {
display:block;
}
ol,ul {
list-style:none;
}
:link,:visited {
text-decoration:none;
}
a img,:link img,:visited img {
border:none;
}
q:after,q:before{
content:'';
}
table{
border-collapse:collapse;
border-spacing:0;
}
.clearfix {
display: inline-table;
height: 1%;
display: block;
}
html > body .clearfix {
height: auto;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/************************************/
/*	2.								*/
/************************************/

/************************************/
/*	3.								*/
/************************************/

/************************************/
/*	99. Printer Styles				*/
/************************************/
@media print {
body {
background: #fff;
font-size: 12pt;
}
a:link,
a:visited {
color: #520;
background: transparent;
font-weight: bold;
text-decoration: underline;
}
#content a:link:after,
#content a:visited:after {
content: " (" attr(href) ") ";
font-size: 90%;
}
#content a[href^="/"]:after {
content: " (http://www.thesite.com" attr(href) ") ";
}
}

source