-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
119 lines (103 loc) · 5.62 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
<!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="css/base.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/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">
</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.1</h5>
<hr />
</div>
<!-- Sweet nested columns cleared with a clearfix class -->
<div class="sixteen columns clearfix">
<!-- In nested columns give the first column a class of alpha
and the second a class of omega -->
<nav class="four columns alpha">Left Sidebar</nav>
<div class="twelve columns omega">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem ligula, bibendum eu euismod sed, adipiscing non metus. In facilisis sodales diam. Sed vulputate urna quis tellus mollis in dictum erat lobortis. Sed a eros sit amet diam sodales feugiat eget vitae tortor. Praesent varius aliquam sem, sed feugiat sem placerat ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur condimentum, ipsum eget molestie eleifend, velit ante feugiat ante, vel rhoncus mauris tellus et nisi. Mauris iaculis, arcu a malesuada vehicula, dui tortor blandit dolor, a ornare lacus massa eu turpis. Mauris vitae orci nulla.
<div class="row">
<div class="six columns alpha">
<div style="border: 1px solid #000;">
<h2>Nested one</h2>
This is a test!
</div>
</div>
<div class="six columns omega">
<div style="border: 1px solid #000;">
<h2>Nested twoooo</h2>
And so is this.
</div>
</div>
</div>
<div class="row">
<div class="six columns alpha">
<div style="border: 1px solid #000;">
<h2>Nested one</h2>
This is a test!
</div>
</div>
<div class="six columns omega">
<div style="border: 1px solid #000;">
<h2>Nested twoooo</h2>
And so is this.
</div>
</div>
</div>
</div>
</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:hi@getskeleton.com">hi@getskeleton.com</a>.</p>
</div>
</div><!-- container -->
<!-- JS
================================================== -->
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="js/tabs.js"></script>
<!-- End Document
================================================== -->
</body>
</html>