-
Notifications
You must be signed in to change notification settings - Fork 11
/
index.html
116 lines (98 loc) · 6.21 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!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 © 2010 Dominik Guzei<p>
</div>
</footer>
</div>
</body>
</html>