-
Notifications
You must be signed in to change notification settings - Fork 1
/
nested.html
166 lines (150 loc) · 6.61 KB
/
nested.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
<!doctype html>
<!--[if IE 7 ]> <html class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<title>HIVE SCSS demo grid spleenteo/hive @ GitHub</title>
<meta charset="UTF-8">
<meta name="description" content="the demo grid for hive scss">
<meta name="author" content="Matteo Papadopoulos aka @spleenteo">
<meta name="viewport" content="width=device-width">
<!-- STYLESHEETS -->
<link rel="stylesheet" href="hive.css">
<link rel="stylesheet" href="demo_files/demo.css">
</head>
<body id="nested">
<div class="hive_12">
<hgroup class="cell_12">
<h1>Hive Scss Responsive Grid Layout</h1>
</hgroup>
<div class="cell_6">
<article>
<h2>Cells and nested cells experiment</h2>
<p>Just some test to understand how hive respond to nested cells. What's happen when children are displayed on mobiles or in a media query break up?</p>
<a class="cell_12 jumper" href="index.html">Back to the main demo page</a>
</article>
</div>
<div class="cell_6">
<section class="downlaod">
<h2>Download</h2>
<a href="http://github.com/spleenteo/hive/zipball/master">
<img border="0" width="90" src="http://github.com/images/modules/download/zip.png"></a>
<a href="http://github.com/spleenteo/hive/tarball/master">
<img border="0" width="90" src="http://github.com/images/modules/download/tar.png"></a>
<ul>
<li><a href="https://github.com/spleenteo/hive">Hive on GitHub</a></li>
<li><a href="http://twitter.com/#!/spleenteo">Follow on twitter</a></li>
</ul>
</section>
</div>
</div>
<div class="hive_12">
<h1>12 columns grid with children</h1>
<div class="wrapper clearfix">
<p>This is some content in the main hive, no cells declared. This has 10px padding</p>
<h2>Scenario 1: An header with menu</h2>
<div class="cell_12">
<section class="nested_cells">
<p>This is content of the 12 columns cell with 10px padding. I want now to put 4 cells (4 x cell_3 as we are in a 12 columns hive). The blue UL and olive LI have 3px padding</p>
<ul class="clearfix">
<li class="cell_3"><div>a cell_3 item</div></li>
<li class="cell_3"><div>a cell_3 item</div></li>
<li class="cell_3"><div>a cell_3 item</div></li>
<li class="cell_3"><div>a cell_3 item</div></li>
</ul>
</section>
</div>
<h2>Scenario 2: a 2 columns layout with 2 columns in the first one on the left side</h2>
<p>I'm giving 10px padding to all elements just to show'em better and to see how padding doesn't matter with columns' width</p>
<div class="cell_8">
<section class="left_col clearfix">
The column on the left with 2 columns inside 50% width (cell_6)
<div class="cell_6">
<section>This is the first subcolumn</section>
</div>
<div class="cell_6">
<section>This is the second subcolumn</section>
</div>
</section>
</div>
<div class="cell_4">
<section class="right_col">
The column on the right
</section>
</div>
<hr class="clear" />
<h2>Scenario 3: a three column layout with header with menu, aside with menu and footer</h2>
<p>I'm giving 10px padding to all elements justo to show'em better and to see how padding doesn't matter with column width</p>
<div class="cell_12">
<section>
cell_12 header
<ul class="menu clearfix">
<li class="cell_2"><div>cell_2 item</div></li>
<li class="cell_2"><div>cell_2 item</div></li>
<li class="cell_2"><div>cell_2 item</div></li>
<li class="cell_2"><div>cell_2 item</div></li>
<li class="cell_2"><div>cell_2 item</div></li>
<li class="cell_2"><div>cell_2 item</div></li>
</ul>
</section>
</div>
<div class="cell_6">
<section>
cell_6 article
</section>
</div>
<div class="cell_3">
<section>cell_3 column</section>
</div>
<div class="cell_3">
<section>
cell_3
<ul class="menu clearfix">
<li class="cell_6"><div>cell_6 item</div></li>
<li class="cell_6"><div>cell_6 item</div></li>
<li class="cell_6"><div>cell_6 item</div></li>
<li class="cell_6"><div>cell_6 item</div></li>
<li class="cell_6"><div>cell_6 item</div></li>
<li class="cell_6"><div>cell_6 item</div></li>
</ul>
</section>
</div>
<div class="tryptich">
<footer class="clearfix">
<div class="cell_4">
footer menu
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="cell_4">
in cell_4
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="cell_4">
cell_4
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
</footer>
</div>
</div>
</div>
<div class="hive_12">
<div class="cell_12">
<footer>credits: <a href="http://www.basictrading.biz" target="_blank">Matteo Papadopoulos aka @spleenteo</a> - <a href="http://twitter.com/#!/spleenteo" target="_blank">follow</a> me on twitter - <a href="https://github.com/spleenteo/hive">Fork or download</a> this project on GitHub
</footer>
</div>
</div>
<a href="http://github.com/spleenteo/hive"><img style="position: absolute; top: 20px; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
</body>