-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
170 lines (139 loc) · 6.83 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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="/static/js/analytics.js"></script>
<script type="text/javascript">archive_analytics.values.server_name="wwwb-app8.us.archive.org";archive_analytics.values.server_ms=204;</script>
<link type="text/css" rel="stylesheet" href="/static/css/banner-styles.css"/>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Gridless - An awesome HTML5 & CSS3 boilerplate for mobile first responsive, cross-browser websites</title>
<!-- Meta tags -->
<meta name="description" content="Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography." />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Don't forget to update the bookmark icons in root: /web/20130920125639/http://mathiasbynens.be/notes/touch-icons -->
<!-- CSS -->
<link rel="stylesheet" href="assets/css/main.css?version=1" />
<!-- JavaScript -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="assets/js/respond.min.js"></script>
</head>
<body>
<header class="group">
<hgroup id="main-header">
<h1>Gridless</h1>
</hgroup>
<nav id="main-nav">
<ul>
<!--<li><a href="docs/index.html">Documentation</a></li>-->
<li><a href="https://github.com/thatcoolguy/gridless-boilerplate">GitHub repo</a></li>
</ul>
</nav>
</header>
<hr />
<article id="intro">
<h2>Make future-proof responsive websites with ease.</h2>
<p>Gridless is an optionated <abbr>HTML</abbr>5 and <abbr>CSS</abbr>3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.</p>
<p>Sponsored by <a href="https://retreathub.com/">RetreatHub</a>, a company for hiring retreat venues.</p>
</article>
<div class="group">
<section id="demo">
<a href="demo/demo.html"><button>View demo</button></a>
</section>
<section id="download">
<a href="https://github.com/thatcoolguy/gridless-boilerplate/tarball/master"><button>Download</button></a>
</section>
</div>
<hr />
<section id="features">
<div class="group">
<article id="dby">
<header>
<h2><abbr>DBY</abbr> (Don't Bore Yourself) approach</h2>
</header>
<p>Gridless takes the boring parts of making websites and webapps out. It comes packed with everything you're tired of doing in every new project: <a href="http://necolas.github.com/normalize.css/"><abbr>CSS</abbr> normalization</a>, <a href="http://www.informationarchitects.jp/en/100e2r/">beautiful typography</a>, a well-organized folder structure, <a href="http://mathiasbynens.be/notes/safe-css-hacks"><abbr>IE<abbr> bugfixes</a> and other nice tricks.</p>
</article>
<article id="responsive">
<header>
<h2>Progressive responsiveness</h2>
</header>
<p>Gridless uses <a href="http://www.lukew.com/ff/entry.asp?933">mobile first</a> <a href="http://www.alistapart.com/articles/responsive-web-design">responsive web design</a> to adapt itself to the device's width. This means it'll work anywhere: old feature phones, newer smartphones, tablets, notebooks and bigger desktops. <abbr>IE</abbr>6/7/8 don't support media queries, so we use <a href="https://github.com/scottjehl/Respond/">Respond.js</a> to polyfill that.</p>
</article>
</div>
<div class="group">
<article id="simple">
<header>
<h2>Agnostic starting point</h2>
</header>
<p>Gridless is extremely simple and straightforward. It doesn't come with any predefined grid systems <!--<a href="#">(and here's why you shouldn't even be using them)</a>--> or non-semantic classes. Gridless is meant to be a starting point, <strong>which should be edited, tweaked and overwritten to suit each project's design</strong> requirements.
</article>
<!--<article id="documented">
<header>
<h2>Well documented</h2>
</header>
<p>What's a good library without good documentation? Gridless has <a href="docs/index.html">awesome documentation</a> so if you're going mad trying to understand something, just <a href="docs/index.html">check it out</a>.
</article>-->
</div>
</section>
<hr />
<div class="group">
<section id="source">
<article>
<header>
<h2>Source code</h2>
</header>
<p id="fork"><a href="https://github.com/thatcoolguy/gridless-boilerplate">Fork me on GitHub: thatcoolguy/gridless-boilerplate</a></p>
<p>Gridless is open-source, licensed under <a href="http://unlicense.org/">Unlicense</a>. If you'd like to contribute, clone the GitHub repo, send a pull request or an issue.</p>
<pre><code>$ git clone git://github.com/thatcoolguy/gridless-boilerplate.git</code></pre>
</article>
</section>
<section id="support">
<article>
<header>
<h2>Browser support</h2>
</header>
<p>Gridless is cross-browser compatible:</p>
<div class="group">
<figure>
<img src="assets/img/firefox.png" />
<figcaption>Firefox 3.5+</figcaption>
</figure>
<figure>
<img src="assets/img/opera.png" />
<figcaption>Opera 11+</figcaption>
</figure>
<figure>
<img src="assets/img/chrome.png" />
<figcaption>Chrome 11+</figcaption>
</figure>
<figure>
<img src="assets/img/safari.png" />
<figcaption>Safari 5+</figcaption>
</figure>
<figure>
<img src="assets/img/ie.png" />
<figcaption>Internet Explorer 6+</figcaption>
</figure>
</div>
<p>Even though some of these browsers are very recent, Gridless should work in any modern browser.</p>
</article>
</section>
</div>
</body>
</html>
<!--
FILE ARCHIVED ON 12:56:39 Sep 20, 2013 AND RETRIEVED FROM THE
INTERNET ARCHIVE ON 16:17:47 Jan 25, 2016.
JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.
ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
SECTION 108(a)(3)).
-->
<p><small>Hosted on GitHub Pages — Theme by <a href="https://github.com/orderedlist">orderedlist</a>. If you are fan of zombie flash games you can check the Infectonator game anytime you want or you can also check some bus driving games at <a href="http://www.bus-games.com/">www.bus-games.com</a> or you can check some <a href="http://www.unblockedgamesroom.com/">unblocked online games</a></a>.</small></p>
<p><small>Do you love jokes, humor, and funny texts that can make you laugh out loud? <a href="http://funnyjokes2go.com">Funny Jokes 2 Go</a> is packed with jokes, riddles and pick up lines to bring more happiness and laughter into your life. </small></p>
<p><small><i>page updated 11/7/2016</i></small></p>
</footer>
</div>
<script src="javascripts/scale.fix.js"></script>
</body>
</html>