forked from dhg/Skeleton
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
143 lines (119 loc) · 5.51 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
<!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>Your Page Title Here :)</title>
<meta name="description" content="">
<meta name="author" content="">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- CSS
================================================== -->
<link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/layout.css">
<!-- 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" />
<!-- JS
================================================== -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>window.jQuery || document.write("<script src='javascripts/jquery-1.5.1.min.js'>\x3C/script>")</script>
<script src="javascripts/app.js"></script>
<script src="javascripts/pullfeeds.js"></script>
</head>
<body>
<!-- Primary Page Layout
================================================== -->
<!-- Delete everything in this .container and get started on your own site! -->
<div class="container">
<div class="sixteen columns">
<h1 class="remove-bottom" style="margin-top: 40px">Skeleton</h1>
<h5>Version 1.0.3</h5>
<hr />
</div>
<div class="one-third column">
<h3>About Skeleton?</h3>
<p>Skeleton is a small collection of well-organized CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, tabs, forms and media queries. Go ahead, resize this super basic page to see the grid in action.</p>
</div>
<div class="one-third column">
<h3>Three Core Principles</h3>
<p>Skeleton is built on three core principles:</p>
<ul class="square">
<li><strong>A Responsive Grid Down To Mobile</strong>: Elegant scaling from a browser to tablets to mobile.</li>
<li><strong>Fast to Start</strong>: It's a tool for rapid development with best practices</li>
<li><strong>Style Agnostic</strong>: It provides the most basic, beautiful styles, but is meant to be overwritten.</li>
</ul>
</div>
<div class="one-third column">
<h3>Docs & Support</h3>
<p>The easiest way to really get started with Skeleton is to check out the full docs and info at <a href="http://www.getskeleton.com">www.getskeleton.com.</a>. Skeleton is also open-source and has a <a href="https://github.com/dhgamache/skeleton">project on git</a>, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at <a href="mailto:[email protected]">[email protected]</a>.</p>
</div>
</div>
<div class="container">
<div class="one-third column">
<h3>Adding additional content</h3>
I added the ability to pull content from various sources on the internet
and cleanly display the information here. The code below is an example for
how to put a twitter feed into the Skeleton
framework:
<pre style="font-family:courier; font-size:8pt;">
<div id="twitter"></div>
<script>
twitter({screen_name:"adamlaiacano",
limit:3});
</script>
</pre>
You can see the results in the next column. The sources I've parsed so far are:
<a href="http://www.tumblr.com">tumblr</a>, <a href="http://www.twitter.com">twitter</a>,
and <a href="http://www.github.com">github</a>. See the
<span style="font-family:courier; font-size:10pt;">javascripts/pullfeeds.js</span> file for
details and default values.
</div>
<div class="one-third column">
<h3>twitter activity</h3>
<div id="twitter"></div>
<script>
twitter({screen_name:"adamlaiacano",limit:4});
</script>
</div>
<div class="one-third column">
<h3>github activity</h3>
<div id="github"></div>
<script>
github({screen_name:"adamlaiacano", limit:2});
</script>
</div>
</div><!-- container -->
<div class="container">
<div class="one-third column">
<h3>last.fm history</h3>
If you want to see your most recent track, use the <tt>lastfm_onetrack</tt> function.
You can embed the track and band (in this case, <span style="font-style:italic" id="lastfmtrack"></span>) right in a
sentence. Or you can list them using the <tt>lastfm</tt> function:
<script>
lastfm_onetrack({screen_name:"alaiacano", api_key:"85dd3ca9551c9699b71c5b3ae331a0f1",
node_id:"lastfmtrack"});
</script>
<div id="lastfm"></div>
<script>
lastfm({screen_name:"alaiacano", api_key:"85dd3ca9551c9699b71c5b3ae331a0f1", limit:5})
</script>
</div>
</div>
<!-- End Document
================================================== -->
</body>
</html>