This repository has been archived by the owner on Jul 5, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
140 lines (120 loc) · 7.05 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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta tags -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- stylesheets -->
<link rel="stylesheet" type="text/css" media="all" href="styles-compiled/application.css"/>
<!-- conditional comments -->
<!--[if IE]>
<link rel="stylesheet" type="text/css" media="all" href="styles-compiled/ie.css" />
<![endif]-->
<!-- print stylesheet -->
<link rel="stylesheet" type="text/css" media="print" href="styles-compiled/print.css"/>
<!-- external styles -->
<!-- <link rel="stylesheet" type="text/css" media="all" href="http://code.jquery.com/ui/1.8.18/themes/redmond/jquery-ui.css"/> -->
<!-- Favicons and touch icons -->
<!-- For retina-display iPads -->
<link href="images/apple-touch-icon-xlarge.png" rel="apple-touch-icon-precomposed" sizes="144x144" type="image/png"/>
<!-- For retina-display iPhones -->
<link href="images/apple-touch-icon-large.png" rel="apple-touch-icon-precomposed" sizes="114x114" type="image/png"/>
<!-- For iPad 1 -->
<link href="images/apple-touch-icon-medium.png" rel="apple-touch-icon-precomposed" sizes="72x72" type="image/png"/>
<!-- For iPhone 3G, iPod Touch and Android -->
<link href="images/apple-touch-icon-small.png" rel="apple-touch-icon-precomposed" type="image/png"/>
<!-- For Nokia -->
<link href="images/apple-touch-icon-small.png" rel="shortcut icon"/>
<!-- For everything else -->
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon"/>
<!-- header javascript -->
<!-- stand-alone utilities -->
<script type="text/javascript" src="scripts/lib/fiftyfive-utils/55_utils.js">
</script>
<script type="text/javascript">
document.getElementsByTagName("html")[0].className += fiftyfive.util.getIEClass();
// scroll to hide iPhone URL bar; from http://remysharp.com/2010/08/05/doing-it-right-skipping-the-iphone-url-bar/
/iphone/i.test(navigator.userAgent) && !location.hash && setTimeout(function () {
if (!pageYOffset) window.scrollTo(0, 1);
}, 1000);
</script>
<!-- HTML5 and media query polyfill for IE8 and below -->
<script src="scripts/lib/shivs-custom.js" type="text/javascript"></script>
<title>CSS3/HTML5 scaffolding</title>
</head>
<body id="home" class="documentation">
<div id="page" class="group">
<!-- If you have a multitude of pages you want styled just like this one, just
add a class of "documentation" to the body tag, then add links to each page
in the nav, as below. -->
<header>
<nav>
<span>Home</span> |
<a href="style-guide.html">Style guide</a> |
<a href="login.html">Sample login page</a>
</nav>
</header>
<section id="about">
<h1>Compass-based CSS3/HTML5 scaffolding</h1>
<p>These files contain a <a href="http://compass-style.org/" title="Compass">Compass</a>-based CSS3/HTML5 scaffolding. The markup and styling contained within may be used as a bootstrap for a variety of web projects, ranging from simple, static websites to full-fledged web applications built with frameworks like <a href="https://www.djangoproject.com/">Django</a>, <a href="http://wicket.apache.org/" title="Apache Wicket - Welcome to Apache Wicket">Wicket</a> and <a href="http://rubyonrails.org/" title="Ruby on Rails">Rails</a>.</p>
<h2>Goals and features</h2>
<h3>Standards-compliance</h3>
<p>Clean, readable, semantic markup is the basis of any good web project, be it simple or complex. In addition to providing a rock-solid, cross-browser-compatible basis for your project, you should be able to open the source code for any page in this scaffolding and comprehend it as easily as you do the final HTML rendering.</p>
<h3>Responsiveness</h3>
<p>The past few years have seen an explosion of new ways by which people access and interact with the web. This scaffolding uses the principles of <a href="http://www.abookapart.com/products/responsive-web-design" title="A Book Apart, Responsive Web Design">responsive web design</a> to provide a fast, friendly user experience to a variety of devices, from phones to tablets to desktop computers. To see it in action on this page, try resizing your browser window.</p>
<h3>Freshness</h3>
<p>The pace of innovation on the web is staggering, with new tools and methodologies changing the landscape so frequently it's hard to keep track. This scaffolding strives to incorporate the latest innovations and best-practices for markup, styling and behavior, like those suggested in <a href="http://stuffandnonsense.co.uk/projects/320andup/" title="320 and up">320 and up</a>.</p>
</section> <!-- /#content -->
<section id="resources">
<h1>Resources</h1>
<ul>
<li><a href="https://github.com/55minutes/css3-foundation">css3-foundation on Github</a></li>
<li><a href="http://compass-style.org/" title="Compass Home | Compass Documentation">Compass</a></li>
<li><a href="http://sass-lang.com/" title="Sass - Syntactically Awesome Stylesheets">Sass</a></li>
<li><a href="http://jaredhardy.com/sassy-buttons/" title="Sassy Buttons, Awesome CSS3 Buttons With Compass and Sass - Jared Hardy">Sassy Buttons</a></li>
<li><a href="http://opensource.55minutes.com/" title="opensource @ 55 Minutes: Java and HTML5 goodies">Other 55 Minutes open-source projects</a></li>
</ul>
</section> <!-- /#resources -->
<footer>
© 2012 55 Minutes. Icons by <a href="http://www.famfamfam.com/lab/icons/silk/" title="famfamfam.com: Silk Icons">famfamfam</a>.
</footer>
</div> <!-- /#page -->
<!-- all other javascript goes at the end of the body -->
<!-- libraries -->
<script type="text/javascript" src="scripts/lib/jquery.js">
</script>
<!-- <script type="text/javascript" src="scripts/lib/jquery-ui.js">
</script>
<script type="text/javascript" src="scripts/lib/jquery-ui.widget.js">
</script> -->
<!-- utilities and library extensions -->
<!-- uncomment as necessary -->
<!-- <script type="text/javascript" src="scripts/lib/fiftyfive-utils/cookies.js">
</script>
<script type="text/javascript" src="scripts/lib/fiftyfive-utils/dump.js">
</script>
<script type="text/javascript" src="scripts/lib/fiftyfive-utils/strftime.js">
</script>
<script type="text/javascript" src="scripts/lib/fiftyfive-utils/feature-detect.js">
</script>
<script type="text/javascript" src="scripts/lib/fiftyfive-utils/jquery.55_utils.js">
</script>
<script type="text/javascript" src="scripts/lib/fiftyfive-utils/jquery.ui.forminputplaceholdertext.js">
</script>
<script type="text/javascript" src="scripts/lib/fiftyfive-utils/jquery.ui.unsupportedbrowserwarning.js">
</script> -->
<script type="text/javascript" src="scripts/common.js">
</script>
<!-- page- or feature-specific javascript -->
<!-- <script type="text/javascript" src="scripts/home.js">
</script> -->
<!-- onload javascript -->
<script type="text/javascript">
(function($) {
$(function() {
FiftyfiveExample.commonInit();
});
})(jQuery);
</script>
</body>
</html>