forked from fat/coffin
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (102 loc) · 6.28 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
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Coffin: The Skeleton Drawer</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- CSS
================================================== -->
<link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/layout.css">
<link rel="stylesheet" href="stylesheets/coffin.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
</head>
<body>
<!-- Primary Page Layout
================================================== -->
<div class="resize"></div>
<!-- Defines the simple coffin drawer -->
<div class="coffin coffin-right">
<div class="pillow">coffin</div>
<ul class="nav">
<li><a data-coffin="click" href="#about">About Coffin</a></li>
<li><a data-coffin="click" href="#gettingStarted">Getting Started</a></li>
<li><a data-coffin="click" href="#contributing">Contributing</a></li>
<li><a href="//github.com/fat">@fat</a></li>
</ul>
</div>
<div class="coffin coffin-left">
<div class="pillow">coffin</div>
<ul class="nav">
<li><a data-coffin="click" href="#about">About Coffin</a></li>
<li><a data-coffin="click" href="#gettingStarted">Getting Started</a></li>
<li><a data-coffin="click" href="#contributing">Contributing</a></li>
<li><a href="//github.com/fat">@fat</a></li>
</ul>
</div>
<!-- Defines the coffin stage -->
<div class="page">
<div class="container">
<div class="ten columns content">
<h1 class="remove-bottom" style="margin-top: 40px">Coffin</h1>
<h5>Version 1.0.0-rc.2</h5>
<hr>
<h3 id="about">About Coffin</h3>
<p>Coffin is a UI component built on top of the <a href="//getskeleton.com">Skeleton framework</a>. It aims to provide a simple, collapsible left shelf. Coffin is fully responsive and automatically collapses in mobile views - allowing you to swipe away and toggle a nagivation in and out of view. It behaves similar to facebook/path's navigation UI.<p>
<h5>Versioning</h5>
<p>Coffin tries to adhere to semver as defined here <a href="http://semver.org/">http://semver.org/</a></p>
<h5>Dependencies</h5>
<p>Coffin's only dependency is skeleton. It has no js dependencies.</p>
<h5>Browser Support</h5>
<p>Currently only tested in Chrome and Safari on my iphone. Planning on adding more browsers as this tightens up though.</p>
<hr>
<h3 id="gettingStarted">Getting Started</h3>
<p>Using coffin is super easy. Just define a <strong>.coffin</strong> and a <strong>.page</strong>. A coffin is a collapsible drawer (you may have seen it implemented in facebook or path's iphone application). A page is a wrapper for your container. It's what slides over the top of your coffin.</p>
<h5>Assets</h5>
<p>To use coffin make sure you include skeleton's CSS. You'll want to have your assets loaded in a similar order as to what is shown directly below. You should include coffin.js at the bottom of your page, not in the head!</p>
<script src="https://gist.github.com/2964360.js"></script>
<h5>Markup</h5>
<p>There are three main things to note when marking up a page with a coffin.</p>
<ol>
<li><strong>data-coffin="touch" & data-coffin="click"</strong> - these attributes will toggle the coffin in and out of view when at a mobile size. You can place these attributes on any element. The difference between touch and click is that touch will fire the toggle on touchstart (faster in mobile) and click will fire the toggle on click (useful for nav elements where you want the default click action to execute).</li>
<li><strong>.page</strong> - a wrapper for the container element. Used to controll the sliding of the main content of a page. Note: Containers within a <strong>.page</strong> class work off a 10-column grid rather than a 16-column grid, which is different than a standard skeleton implementation and done in order to make space for an open coffin.</li>
<li><strong>.coffin</strong> - the coffin is the side shelf. It can contain <strong>.pillow</strong> elements which are sectioning bars, as well as a <strong>ul.nav</strong> elements.
</ol>
<p>A simple implementation for the above markup might look something like this:</p>
<script src="https://gist.github.com/2964424.js"> </script>
<hr>
<h3 id="contributing">Contributing</h3>
<p>This project is hosted on github. Feel free to file an issue or open a pull request against the project <a href="//github.com/fat/coffin">here</a>.</p>
<p>If you are opening a bug, please provide a link to a reproducible test case - preferably in jsfiddle or jsbin. If you are submiting a pull request, please do so from a feature branch. Thanks!</p>
<hr>
<p><small>Created by @<a href="http://www.twitter.com/fat">fat</a>, 2012 ©</small></p>
</div>
</div><!-- container -->
</div><!-- page -->
<!-- JS
================================================== -->
<script src="javascript/coffin.js"></script>
<script src="javascript/site.js"></script>
<!-- End Document
================================================== -->
</body>
</html>