forked from frankpf/gridless-boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
106 lines (101 loc) · 6.15 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Gridless - An awesome boilerplate for responsive, cross-browser websites</title>
<!-- Meta tags -->
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Don't forget to update the bookmark icons in root: http://mathiasbynens.be/notes/touch-icons -->
<!-- CSS -->
<link rel="stylesheet" href="assets/css/main.css?version=1" />
<!-- JavaScript -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="assets/js/respond.min.js"></script>
</head>
<body>
<header id="main-header">
<h1>Gridless</h1>
<nav>
<ul>
<li><a href="#intro">Introduction</a></li>
<li><a href="#philosophy">Philosophy</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#code">Source code</a></li>
<li><a href="#demo">Demonstration</a></li>
<li><a href="#support">Browser support</a></li>
<li><a href="#contribute">Contributing</a></li>
<li><a href="#thanks">Thanks</a></li>
</ul>
</nav>
</header>
<article id="intro">
<p>Gridless is an awesome <abbr>HTML</abbr>5 and <abbr>CSS</abbr>3 framework for making responsive, cross-browser websites with beautiful typography.</p>
</article>
<article id="philosophy">
<header>
<h2>Philosophy</h2>
</header>
<p>Most responsive and adaptive <abbr>HTML</abbr>/<abbr>CSS</abbr> frameworks or boilerplates start with desktop styles and use media queries to serve mobile browsers the right layout. The problem is that most mobiles won't respond to these media queries because they don't support it. Also, using a polyfill like <a href="https://github.com/scottjehl/Respond">Respond.js</a> will not give you any result because they are very limited devices and don't even support JavaScript.</p>
<p>But Gridless uses a different approach: it uses media queries to serve a <a href="http://en.wikipedia.org/wiki/Progressive_enhancement">progressively-enhanced</a> <a href="http://www.alistapart.com/articles/responsive-web-design">responsive</a> layout, <a href="http://www.lukew.com/ff/entry.asp?933">starting from mobile</a> and building up to desktop sizes.</p>
<p>Gridless has a simple approach on markup and styles. There aren't any pre-made grid systems and the <abbr>CSS</abbr> isn't littered with silly classes. Gridless is only a starting point, that should be edited to suit each project's needs.</p>
</article>
<article id="features">
<header>
<h2>Main features</h2>
</header>
<ul>
<li><a href="http://www.alistapart.com/articles/responsive-web-design">Responsive</a> (responds to the user's device screen width with the adequated <abbr>CSS</abbr>)</li>
<li><a href="http://en.wikipedia.org/wiki/Progressive_enhancement">Progressive enhancement</a> and <a href="http://www.lukew.com/ff/entry.asp?933">mobile first</a></li>
<li>Cross-browser compatible (even IE6 and 7)</li>
<li>CSS normalization instead of CSS reset</li>
<li><a href="http://www.informationarchitects.jp/en/100e2r/">Beautiful typography</a> with a <a href="http://24ways.org/2006/compose-to-a-vertical-rhythm">vertical rhythm</a> and heading sizes based on <a href="http://en.wikipedia.org/wiki/Golden_ratio">golden ratio</a></li>
<li>Print styles optimized for performance</li>
<li>Optimal caching</li>
<li>HTML5 and CSS3 ready</li>
<li><a href="http://mathiasbynens.be/notes/safe-css-hacks">Safe CSS hacks</a> instead of conditional classnames/stylesheets</li>
<li>Micro clearfix hack</li>
<li>A well-organized folder structure</li>
</ul>
</article>
<article id="code">
<header>
<h2>Source code</h2>
</header>
<p>Gridless is in public domain, licensed under the <a href="http://unlicense.org">Unlicense</a></p>
<p id="fork"><a href="https://github.com/thatcoolguy/gridless-boilerplate">Fork me on GitHub: thatcoolguy/gridless-boilerplate</a></p>
<p>As a <a href="https://github.com/thatcoolguy/gridless-boilerplate/zipball/master">zip</a> or <a href="https://github.com/thatcoolguy/gridless-boilerplate/tarball/master">tar</a> package</p>
<p>Clone the project with git using:</p>
<pre><code>$ git clone git://github.com/thatcoolguy/gridless-boilerplate.git</code></pre>
</article>
<article id="demo">
<header>
<h2>Demonstration</h2>
</header>
<a href="demo/demo.html"><p>Check out the demo</p></a>
</article>
<article id="support">
<header>
<h2>Browser support</h2>
</header>
<p>Internet Explorer 6+, Mozilla Firefox 3.6+, Google Chrome 11+, Opera 11+, Safari 5+</p>
<p>Although some of these browsers are very recent, Gridless should work in any modern browser without problems.</p>
</article>
<article id="contribute">
<header>
<h2>Contributing</h2>
</header>
<p>If you'd like to contribute to Gridless, visit <a href="https://github.com/thatcoolguy/gridless-boilerplate">thatcoolguy/gridless-boilerplate</a> and send a pull request or an issue. You can also fork the project or clone it. Do anything, it's open-source!</p>
</article>
<article id="thanks">
<header>
<h2>Thanks</h2>
</header>
<p><a href="http://meyerweb.com">Eric Meyer</a>, <a href="http://www.scottjehl.com/">Scott Jehl</a>, <a href="http://adactio.com/">Jeremy Keith</a>, <a href="http://ethanmarcotte.com/">Ethan Marcotte</a>, <a href="http://www.informationarchitects.jp/">Oliver Reichenstein</a>, <a href="http://www.wilsonminer.com/">Wilson Miner</a>, <a href="http://yiibu.com/">Bryan Rieger</a>, <a href="http://paulirish.com/">Paul Irish</a>, <a href="http://csswizardry.com/">Harry Roberts</a>, <a href="http://nicolasgallagher.com/">Nicolas Gallagher</a>, <a href="http://mathiasbynens.be">Mathias Bynens</a>, <a href="http://www.lukew.com/">Luke Wroblewski</a>, <a href="http://camendesign.com/">Kroc Camen</a>, <a href="http://css-tricks.com/">Chris Coyier</a>, <a href="http://clagnut.com/">Richard Rutter</a>, <a href="http://remysharp.com/">Remy Sharp</a> and many others.</p>
</article>
</body>
</html>