Skip to content

Commit 7e93a31

Browse files
brettsmasonbrettsmason
authored
Merge pull request foundation#10173 from zurb/xy-grid-kitchen-sink
XY Grid - Add kitchen sink/flex utilties visual tests
2 parents 60669c0 + 673168a commit 7e93a31

2 files changed

Lines changed: 712 additions & 0 deletions

File tree

‎test/visual/xy-grid/flex-utilities.html‎

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
<!doctype html>
2+
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
3+
<html class="no-js" lang="en" dir="ltr">
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<title>xy grid with flex utilities</title>
8+
<link href="../assets/css/foundation.css" rel="stylesheet" />
9+
<style>
10+
body {
11+
padding: 30px;
12+
}
13+
14+
h2 {
15+
margin-top: 3rem;
16+
}
17+
18+
h3 {
19+
margin-top: 2rem;
20+
border-top: 1px solid #ddd;
21+
padding-top: 2rem;
22+
margin-bottom: 2rem;
23+
}
24+
25+
hr {
26+
margin: 3rem 0;
27+
}
28+
29+
.demo {
30+
background: #1779ba;
31+
height: 100%;
32+
width: 100%;
33+
}
34+
35+
.cell {
36+
/*background: dodgerblue;*/
37+
color: white;
38+
text-align: center;
39+
}
40+
41+
.grid-x,
42+
.grid-y {
43+
background: #ddd;
44+
}
45+
</style>
46+
</head>
47+
<body>
48+
49+
<h2>X grid</h2>
50+
51+
<h3>X Axis Alignment</h3>
52+
53+
<div class="grid-x grid-margin-x">
54+
<div class="cell small-4"><div class="demo">4</div></div>
55+
<div class="cell small-4"><div class="demo">4</div></div>
56+
</div>
57+
58+
<hr>
59+
60+
<p>.align-right</p>
61+
62+
<div class="grid-x grid-margin-x align-right">
63+
<div class="cell small-4"><div class="demo">4</div></div>
64+
<div class="cell small-4"><div class="demo">4</div></div>
65+
</div>
66+
67+
<hr>
68+
69+
<p>.align-center</p>
70+
71+
<div class="grid-x grid-margin-x align-center">
72+
<div class="cell small-4"><div class="demo">4</div></div>
73+
<div class="cell small-4"><div class="demo">4</div></div>
74+
</div>
75+
76+
<hr>
77+
78+
<p>.align-justify</p>
79+
80+
<div class="grid-x grid-margin-x align-justify">
81+
<div class="cell small-4"><div class="demo">4</div></div>
82+
<div class="cell small-4"><div class="demo">4</div></div>
83+
</div>
84+
85+
<hr>
86+
87+
<p>.align-spaced</p>
88+
89+
<div class="grid-x grid-margin-x align-spaced">
90+
<div class="cell small-4"><div class="demo">4</div></div>
91+
<div class="cell small-4"><div class="demo">4</div></div>
92+
</div>
93+
94+
<h3>Y Axis Alignment</h3>
95+
96+
<p>.align-top</p>
97+
98+
<div class="grid-x grid-margin-x align-top">
99+
<div class="cell small-4"><div class="demo">I'm at the top (default)</div></div>
100+
<div class="cell small-4"><div class="demo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.</div></div>
101+
</div>
102+
103+
<hr>
104+
105+
<p>.align-middle</p>
106+
107+
<div class="grid-x grid-margin-x align-middle">
108+
<div class="cell small-4"><div class="demo">I'm in the middle</div></div>
109+
<div class="cell small-4"><div class="demo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.</div></div>
110+
</div>
111+
112+
<hr>
113+
114+
<p>.align-bottom</p>
115+
116+
<div class="grid-x grid-margin-x align-bottom">
117+
<div class="cell small-4"><div class="demo">I'm at the bottom</div></div>
118+
<div class="cell small-4"><div class="demo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.</div></div>
119+
</div>
120+
121+
<hr>
122+
123+
<p>.align-stretch</p>
124+
125+
<div class="grid-x grid-margin-x align-stretch">
126+
<div class="cell small-4"><div class="demo">these cells have the same height</div></div>
127+
<div class="cell small-4"><div class="demo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.</div></div>
128+
</div>
129+
130+
<h3>Child Alignment</h3>
131+
132+
<p>.align-self-bottom/middle/top</p>
133+
134+
<div class="grid-x grid-margin-x">
135+
<div class="cell small-4 align-self-bottom"><div class="demo">Align bottom</div></div>
136+
<div class="cell small-4 align-self-middle"><div class="demo">Align middle</div></div>
137+
<div class="cell small-4 align-self-top"><div class="demo">Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?</div></div>
138+
</div>
139+
140+
<h3>Central Alignment</h3>
141+
142+
<p>.align-center-middle</p>
143+
144+
<div class="grid-x grid-margin-x align-center-middle text-center" style="height: 200px; background: #eee;">
145+
<div class="cell small-4"><div class="demo">I am in the center-middle</div></div>
146+
<div class="cell small-4"><div class="demo">I am also centrally located</div></div>
147+
</div>
148+
149+
150+
<h2>Y grid</h2>
151+
152+
<h3>X Axis Alignment</h3>
153+
154+
<div class="grid-y grid-margin-y" style="height: 300px;">
155+
<div class="cell small-4"><div class="demo">4</div></div>
156+
<div class="cell small-4"><div class="demo">4</div></div>
157+
</div>
158+
159+
<hr>
160+
161+
<p>.align-right</p>
162+
163+
<div class="grid-y grid-margin-y align-right" style="height: 300px;">
164+
<div class="cell small-4"><div class="demo">4</div></div>
165+
<div class="cell small-4"><div class="demo">4</div></div>
166+
</div>
167+
168+
<hr>
169+
170+
<p>.align-center</p>
171+
172+
<div class="grid-y grid-margin-y align-center" style="height: 300px;">
173+
<div class="cell small-4"><div class="demo">4</div></div>
174+
<div class="cell small-4"><div class="demo">4</div></div>
175+
</div>
176+
177+
<hr>
178+
179+
<p>.align-justify</p>
180+
181+
<div class="grid-y grid-margin-y align-justify" style="height: 300px;">
182+
<div class="cell small-4"><div class="demo">4</div></div>
183+
<div class="cell small-4"><div class="demo">4</div></div>
184+
</div>
185+
186+
<hr>
187+
188+
<p>.align-spaced</p>
189+
190+
<div class="grid-y grid-margin-y align-spaced" style="height: 300px;">
191+
<div class="cell small-4"><div class="demo">4</div></div>
192+
<div class="cell small-4"><div class="demo">4</div></div>
193+
</div>
194+
195+
<h3>Y Axis Alignment</h3>
196+
197+
<p>.align-top</p>
198+
199+
<div class="grid-y grid-margin-y align-top" style="height: 300px;">
200+
<div class="cell small-4"><div class="demo">I'm at the top (default)</div></div>
201+
<div class="cell small-4"><div class="demo">4</div></div>
202+
</div>
203+
204+
<hr>
205+
206+
<p>.align-middle</p>
207+
208+
<div class="grid-y grid-margin-y align-middle" style="height: 300px;">
209+
<div class="cell small-4"><div class="demo">I'm in the middle</div></div>
210+
<div class="cell small-4"><div class="demo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.</div></div>
211+
</div>
212+
213+
<hr>
214+
215+
<p>.align-bottom</p>
216+
217+
<div class="grid-y grid-margin-y align-bottom" style="height: 300px;">
218+
<div class="cell small-4"><div class="demo">I'm at the bottom</div></div>
219+
<div class="cell small-4"><div class="demo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.</div></div>
220+
</div>
221+
222+
<hr>
223+
224+
<p>.align-stretch</p>
225+
226+
<div class="grid-y grid-margin-y align-stretch" style="height: 300px;">
227+
<div class="cell small-4"><div class="demo">these cells have the same height</div></div>
228+
<div class="cell small-4"><div class="demo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.</div></div>
229+
</div>
230+
231+
<h3>Child Alignment</h3>
232+
233+
<p>.align-self-bottom/middle/top</p>
234+
235+
<div class="grid-y grid-margin-y" style="height: 300px;">
236+
<div class="cell small-4 align-self-bottom"><div class="demo">Align bottom</div></div>
237+
<div class="cell small-4 align-self-middle"><div class="demo">Align middle</div></div>
238+
<div class="cell small-4 align-self-top"><div class="demo">Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?</div></div>
239+
</div>
240+
241+
<h3>Central Alignment</h3>
242+
243+
<p>.align-center-middle</p>
244+
245+
<div class="grid-y grid-margin-y align-center-middle text-center" style="height: 300px; background: #eee;">
246+
<div class="cell small-4"><div class="demo">I am in the center-middle</div></div>
247+
<div class="cell small-4"><div class="demo">I am also centrally located</div></div>
248+
</div>
249+
250+
<script src="../assets/js/vendor.js"></script>
251+
<script src="../assets/js/foundation.js"></script>
252+
<script>
253+
$(document).foundation();
254+
</script>
255+
</body>
256+
</html>

0 commit comments

Comments
 (0)