index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    
    <!-- www.phpied.com/conditional-comments-block-downloads/ -->
    <!--[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">
    
    <!-- Page Title -->
    <title>Starter Page - Flaw{LESS} Css Framework</title>
    
    <!-- Add informations for search engines -->
    <meta name="description" content="">
    <meta name="author" content="">
  
    <!--  Mobile viewport optimized: j.mp/bplateviewport -->
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
  
    <!-- Replace favicon.ico & 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">
    
    <!-- ======= DEVELOPMENT SCRIPT - PLEASE DELETE OR COMMENT OUT FOR PRODUCTION ======= -->
  	
  	<!-- This is the DEVELOPMENT script and stylesheet. This loads the complete framework components
    	 while development and allows us to use the less.js framework to generate the css code 
         for us and use variables and mixins. When you are finished with development comment out 
         this tags or delete them completely -->
    <link rel="stylesheet/less" type="text/css" href="css/style_dev.less" title="flawless_css" />
    <script type="text/javascript">
		var FLAWLESS_DIRECTORY = "css/flawless/"; // path to the flawless folder
    	var FLAWLESS_MENU = true; // set this to false to deactivate flawless ui (best for profiling with F9)
    	var FLAWLESS_WATCH = true; // enable watch mode -> changes to files update in browser
		var FLAWLESS_WATCH_INTERVAL = 3000; // fetch files every 3 seconds
		var FLAWLESS_FRAMEWORK_CACHING = true; // cache framework files, performance! -> reload for changes
		var FLAWLESS_CUSTOM_CACHING = false; // cache custom files @imported in style_dev -> bad for watch mode
    </script>
	<script type="text/javascript" src="css/flawless/core/development/init.js"></script>
    
    <!-- ======= PRODUCTION STYLESHEET - PLEASE UNCOMMENT THIS FOR PRODUCTION ========
    	 This is the stylesheet we use in production. When you are ready with the
    	 current development cycle just open the flawless menu at the bottom left of the page
         and copy the compressed and optimized css into this file and uncomment it. -->
     
     <!--
     <link rel="stylesheet" type="text/css" href="css/style_production.css" /> 
     -->
    
    <!-- ========= NEEDED BY FLAWLESS CSS FRAMEWORK - DONT DELETE ========== -->
    
    <!-- Modernizr which enables HTML5 elements & feature detects -->
    <script src="css/flawless/core/production/js/flawless.js"></script>
    
    <!-- IE9.js to add support for min-width and solve some bugs in IE 6 -->
    <!--[if lte IE 7]>
        <script src="css/flawless/core/production/js/flawless_ie.js" type="text/javascript"></script>
    <![endif]-->
    
</head>

<body>
<div id="skip-link"><a href="#main-menu">Jump to Navigation</a></div>
<!-- This is the wrapper element we use as grid. As you can see there is 
	 not a single hint (css class) about the layout or design. -->
<div id="page">
	<header>
    	<div class="in">
    		<h1>Flaw{LESS} Css Framework - Starter Page</h1>
        </div>
    </header>
    <nav id="main-menu">
    	<ul>
        	<li><a class="active" href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>
        </ul>
    </nav>
    <div id="content">
    	<!-- As you can see you can put the content in any position in the markup
        	 The framework allows you to swap positions of columns and alot more -->
        <article>
            <div class="in">
                <h1>My Article</h1>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </div>
        </article>
        
        <aside id="sidebar-1">
            <div class="in">
                <h1>First Sidebar</h1>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </div>
        </aside>
        
        <aside id="sidebar-2">
            <div class="in">
            	<h1>Second Sidebar</h1>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </div>
        </aside>
        
    </div>
    <footer>
    	<div class="in">
        	<p>Flaw{LESS} Css Framework &copy; 2010 Dominik Guzei<p>
    	</div>
    </footer>
</div>
</body>
</html>