This section will guide you into a detailled look to the default template markup. You will find explanations, alternatives and tips to help you build it the way you want. For a raw version of this code, go to Quick start guide/Basic markup.

<!DOCTYPE html>

Nothing much to say, this is the HTML5 doctype, clean and easy. Yo.

<!--[if IEMobile 7]><html class="no-js iem7 oldie"><![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js ie7 oldie" lang="en"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js ie8 oldie" lang="en"><![endif]-->
<!--[if (IE 9)&!(IEMobile)]><html class="no-js ie9" lang="en"><![endif]-->
<!--[if (gt IE 9)|(gt IEMobile 7)]><!--><html class="no-js" lang="en"><!--<![endif]-->

A little bit crowded, but really usefull: on IE, the conditional comments will output only the <html> node matching the version of Internet Explorer. And for every other browsers, the last one will be used. Therefore, you may target any of these versions of IE in your CSS code using the related selector: .ie7, .ie8, .ie9, .iem7 (for Internet Explorer Mobile 7) and .oldie (for all at once)

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

This last line is here to force the use of Google Chrome Frame if installed on Internet Explorer. If not installed, IE6 users will be prompted by the conditional commented line right below <body>.

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

	<!-- http://davidbcalhoun.com/2010/viewport-metatag -->
	<meta name="HandheldFriendly" content="True">
	<meta name="MobileOptimized" content="320">

	<!-- http://www.kylejlarson.com/blog/2012/iphone-5-web-design/ -->
	<meta name="viewport" content="user-scalable=0, initial-scale=1.0">

This last section defines several metas to tell mobile browsers how to display the content. If you are not familiar with it, you should read the two articles in the comments above, they are really useful.

	<!-- For all browsers -->
	<link rel="stylesheet" href="css/reset.css?v=1">
	<link rel="stylesheet" href="css/style.css?v=1">
	<link rel="stylesheet" href="css/colors.css?v=1">
	<link rel="stylesheet" media="print" href="css/print.css?v=1">
	<!-- For progressively larger displays -->
	<link rel="stylesheet" media="only all and (min-width: 480px)" href="css/480.css?v=1">
	<link rel="stylesheet" media="only all and (min-width: 768px)" href="css/768.css?v=1">
	<link rel="stylesheet" media="only all and (min-width: 992px)" href="css/992.css?v=1">
	<link rel="stylesheet" media="only all and (min-width: 1200px)" href="css/1200.css?v=1">
	<!-- For Retina displays -->
	<link rel="stylesheet" media="only all and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5)" href="css/2x.css?v=1">

Standard stylesheets loading, using media queries sometimes.

	<!-- Webfonts -->
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>

This is the font used for thin headlines. If not required, you can drop this line safely.

	<!-- Additional styles -->

Place additional style sheets here. Not mandatory, but it is a good habit to get a little organized.

	<!-- JavaScript at bottom except for Modernizr -->
	<script src="js/libs/modernizr.custom.js"></script>

Modernizr is the only javascript loaded in the <head> section, because it should be fired before anything else. All other files are loaded right above </body>, as this is the recommended way to do, mostly for faster page loading. But if you want (or need) all your scripts here, do as you wish!

	<!-- For Modern Browsers -->
	<link rel="shortcut icon" href="img/favicons/favicon.png">
	<!-- For everything else -->
	<link rel="shortcut icon" href="img/favicons/favicon.ico">

A bunch of favicons sizes, every browser will pick the one that fits best. Note that, when using Tinycon, the first favicon will be the one used.

	<!-- iOS web-app metas -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

This part defines that your webapp is capable of running as a standalone app on iOS, and set the status bar color. If you do not need (or want) this, just remove these lines.

	<!-- iPhone ICON -->
	<link rel="apple-touch-icon" href="img/favicons/apple-touch-icon.png" sizes="57x57">
	<!-- iPad ICON -->
	<link rel="apple-touch-icon" href="img/favicons/apple-touch-icon-ipad.png" sizes="72x72">
	<!-- iPhone (Retina) ICON -->
	<link rel="apple-touch-icon" href="img/favicons/apple-touch-icon-retina.png" sizes="114x114">
	<!-- iPad (Retina) ICON -->
	<link rel="apple-touch-icon" href="img/favicons/apple-touch-icon-ipad-retina.png" sizes="144x144">

A bunch of iOS tags to define the various icons sizes for websites added as a webapp (on the dashboard). If you do not need (or want) this, just remove these lines.

	<!-- iPhone SPLASHSCREEN (320x460) -->
	<link rel="apple-touch-startup-image" href="img/splash/iphone.png" media="(device-width: 320px)">
	<!-- iPhone (Retina) SPLASHSCREEN (640x960) -->
	<link rel="apple-touch-startup-image" href="img/splash/iphone-retina.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)">
	<!-- iPhone 5 SPLASHSCREEN (640×1096) -->
	<link rel="apple-touch-startup-image" href="img/splash/iphone5.png" media="(device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
	<!-- iPad (portrait) SPLASHSCREEN (748x1024) -->
	<link rel="apple-touch-startup-image" href="img/splash/ipad-portrait.png" media="(device-width: 768px) and (orientation: portrait)">
	<!-- iPad (landscape) SPLASHSCREEN (768x1004) -->
	<link rel="apple-touch-startup-image" href="img/splash/ipad-landscape.png" media="(device-width: 768px) and (orientation: landscape)">
	<!-- iPad (Retina, portrait) SPLASHSCREEN (2048x1496) -->
	<link rel="apple-touch-startup-image" href="img/splash/ipad-portrait-retina.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2)">
	<!-- iPad (Retina, landscape) SPLASHSCREEN (1536x2008) -->
	<link rel="apple-touch-startup-image" href="img/splash/ipad-landscape-retina.png" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2)">

Splash screens for webapp on iOS devices. You will find PSD templates in the package to create your own. If you do not need (or want) this, just remove these lines.

	<!-- Microsoft clear type rendering -->
	<meta http-equiv="cleartype" content="on">

Some Internet Explorer type display softening.

	<!-- IE9 Pinned Sites: http://msdn.microsoft.com/en-us/library/gg131029.aspx -->
	<meta name="application-name" content="Developr Admin Skin">
	<meta name="msapplication-tooltip" content="Cross-platform admin template.">
	<meta name="msapplication-starturl" content="http://www.display-inline.fr/demo/developr">
	<!-- These custom tasks are examples, you need to edit them to show actual pages -->
	<meta name="msapplication-task" content="name=Agenda;action-uri=http://www.display-inline.fr/demo/developr/agenda.html;icon-uri=http://www.display-inline.fr/demo/developr/img/favicons/favicon.ico">
	<meta name="msapplication-task" content="name=My profile;action-uri=http://www.display-inline.fr/demo/developr/profile.html;icon-uri=http://www.display-inline.fr/demo/developr/img/favicons/favicon.ico">

Internet Explorer 9 pinned site demo. This is just an example, you need to define some real texts and tasks.

</head>

<body class="clearfix with-menu with-shortcuts">

The <body> node can take several special classes:

with-menu: Use this class when your page includes the navigation menu panel. This will add the necessary padding along the main content.
with-shortcuts: Use this class when your page includes the side tabs shortcuts. This will also add the necessary padding along the main content.
reversed: This class will invert the position of the menu and the shortcuts. Works also if only one of them is used.
fixed-title-bar: The title bar will have a fixed position on mobile layout, scrolling down with the page (on browsers with required support, other ones will see the static title bar instead)
menu-hidden: The navigation menu will be closed by default

	<!-- Prompt IE 6 users to install Chrome Frame -->
	<!--[if lt IE 7]><p class="message red-gradient simpler">Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->

As mentioned above, this will prompt IE6 users to install Google Chrome Frame or a newer browser. Learn more here : http://chromium.org/developers/how-tos/chrome-frame-getting-started.

	<!-- Title bar -->
	<header role="banner" id="title-bar">
		<h2>Developr</h2>
	</header>

The title bar, with your application title. It is also used as a button on mobile devices to display the shortcuts panel.

	<!-- Button to open/hide menu -->
	<a href="#" id="open-menu"><span>Menu</span></a>

	<!-- Button to open/hide shortcuts -->
	<a href="#" id="open-shortcuts"><span class="icon-thumbs"></span></a>

These buttons may be placed anywhere, as they are absolutely positioned, but here is a good place, isn't it?

	<!-- Main content -->
	<section role="main" id="main">

The main content block, with the corresponding Aria role

		<!-- Visible only to browsers without javascript -->
		<noscript class="message black-gradient simpler">Your browser does not support JavaScript! Some features won't work as expected...</noscript>

Simple noscript element for browsers with javascript disabled. The template generally works fine without it, but most features will be disabled.

		<!-- Main title -->
		<hgroup id="main-title" class="thin">
			<h1>Dashboard</h1>
			<h2>nov <strong>10</strong></h2>
		</hgroup>

This markup is optional, you can use a bare <h1>. Just include it in the padded block below then.

		<!-- The padding wrapper may be omitted -->
		<div class="with-padding">

			<!-- Main content here -->

		</div>

This block is optional, you can put your content directly in the #main block, but there will be no padding then. This is on purpose, as some styles may look better without padding.

	</section>
	<!-- End main content -->

End of main content. Note the use of a section element: this is pure semantic, you may use a div as well.

	<!-- Side tabs shortcuts -->
	<ul id="shortcuts" role="complementary" class="children-tooltip tooltip-right">
		<!-- Active shortcut -->
		<li class="current"><a href="./" class="shortcut-dashboard" title="Dashboard">Dashboard</a></li>
		<!-- Background shortcut -->
		<li><a href="#" class="shortcut-messages" title="Messages">Messages</a></li>
		<!-- Disabled shortcut -->
		<li><span class="shortcut-notes" title="Notes">Notes</span></li>
	</ul>

Side tabs shortcuts, with some tooltips classes (see related section for more details). Three tabs styles are shown here:

The first one is active, with the tab background visible
The second one is a standard shortcut
The last one is a disabled shortcut

There a several icons bundled with the template, go to the advanced section to learn how to create your own.

Since v1.5, a style with legends is available: just add the class with-legend to the #shortcuts element, and wrap the text of the shortcut in a span with the class shortcut-legend:

	<!-- Side tabs shortcuts with legends -->
	<ul id="shortcuts" role="complementary" class="children-tooltip tooltip-right with-legend">
		<!-- Active shortcut -->
		<li class="current"><a href="./" class="shortcut-dashboard" title="Dashboard"><span class="shortcut-legend">Dashboard</span></a></li>
		<!-- Background shortcut -->
		<li><a href="#" class="shortcut-messages" title="Messages"><span class="shortcut-legend">Messages</span></a></li>
		<!-- Disabled shortcut -->
		<li><span class="shortcut-notes" title="Notes"><span class="shortcut-legend">Notes</span></span></li>
	</ul>

	<!-- Sidebar/drop-down menu -->
	<section id="menu" role="complementary">

The navigation menu panel. And the Aria role.

		<!-- This wrapper is used by several responsive layouts -->
		<div id="menu-content">

This wrapper is mostly for tablet display, where the content will scroll in this element.

			<header>
				Administrator
			</header>

Just a simple header. Put whatever you want here.

			<div id="profile">
				<img src="img/user.png" width="64" height="64" alt="User name" class="user-icon">
				Hello
				<span class="name">John <b>Doe</b></span>
			</div>

User profile block. The wrapper div may be replaced by a link, for instance to point to the profile page.

			<!-- By default, this section is made for 4 icons, see the doc to learn how to change this, in "basic markup explained" -->
			<ul id="access" class="children-tooltip">
				<!-- Icon with count -->
				<li><a href="#" title="Messages">
					<span class="icon-inbox"></span>
					<span class="count">2</span>
				</a></li>
				<!-- Simple icon -->
				<li><a href="#" title="Calendar">
					<span class="icon-calendar"></span></a>
				</li>
				<!-- Disabled icon -->
				<li class="disabled">
					<span class="icon-gear"></span>
				</li>
			</ul>

Quick access bar, with icons. To disable icons, use the class disabled.

To change the number of visible icons, edit file style.css and find the selector #access > li, then change the width to whatever you want to fit the desired number of icons.

			<!-- Navigation menu goes here -->

Placeholder for your navigation menu content, but it may go anywhere in the menu panel, even above header or profile blocks.

		</div>
		<!-- End content wrapper -->

		<!-- This is optional -->
		<footer id="menu-footer">
			<!-- Any content -->
		</footer>

This is an optional block where you can put some additional content, for instance some options switches. It will be always visible on tablet mode, as it is outside the scrolling wrapper.

	</section>
	<!-- End sidebar/drop-down menu -->

Same thing as for main content: the use of a section element is pure semantic, you may use a div as well.

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

	<!-- Scripts -->
	<script src="js/libs/jquery-1.9.1.min.js"></script>
	<script src="js/setup.js"></script>

The two main javascript files, should be loaded before anything else.

	<!-- Libs go here -->

Put the required libs here. Note that there is sometimes a specific order - for instance, it is recommended to load the tabs plugin last, as the size normalization will work better.

</body>
</html>

Basic markup explained