[sencha-touch.git] / src / resources / themes / vendor / compass-recipes / tests / recipes / layout / grid / index.html

<!doctype html>
<link rel="stylesheet" href="s.css" />

<p>This method was inspired by the Foundation grid, from Zurb. It is made slightly more dynamic, but will require Sass 3.2 to become truly configureable.</p>


<h4>Examples</h4>
<p>Take this page for example - we've set up this page by containing this section in columns-8, and the sidebar in four. When the screen is larger than iPad resolution you'll see them laid out normally - smaller than that and columns become 100% width objects for mobile devices.</p>

<p>Below you can see how the rows and columns come together. All columns are inside a row and for this we've colored the rows and columns for visibility. You can also see how nesting works - this example is inside an eight column container, but below we have all 12 columns to use. You can nest them down quite a ways before the percentage widths become absurdly small.</p>


<div class="container">
    <div class="row display">
        <div class="columns-4 columns">
            .columns-4
        </div>
        <div class="columns-4">
            .columns-4
        </div>
        <div class="columns-4">
            .columns-4
        </div>
    </div>
    <div class="row display">
        <div class="columns-1">
            .columns-1
        </div>
        <div class="columns-1">
            .columns-1
        </div>
        <div class="columns-1">
            .columns-1
        </div>
        <div class="columns-1">
            .columns-1
        </div>
        <div class="columns-1">
            .columns-1
        </div>
        <div class="columns-1">
            .columns-1
        </div>
        <div class="columns-1">
            .columns-1
        </div>
        <div class="columns-1">
            .columns-1
        </div>
        <div class="columns-1">
            .columns-1
        </div>
        <div class="columns-1">
            .columns-1
        </div>
        <div class="columns-1">
            .columns-1
        </div>
        <div class="columns-1">
            .columns-1               
        </div>
    </div>
    <div class="row display">
        <div class="columns-3">
            .columns-3              
        </div>
        <div class="columns-6">
            .columns-6                
        </div>
        <div class="columns-3">
            .columns-3              
        </div>
    </div>
    <div class="row display">
        <div class="columns-2">
            .columns-2                
        </div>
        <div class="columns-8">
            .columns-8              
        </div>
        <div class="columns-2">
            .columns-2                
        </div>
    </div>
    <div class="row display">
        <div class="columns-1">
            .columns-1                
        </div>
        <div class="columns-11">
            .columns-11
        </div>
    </div>
    <div class="row display">
        <div class="columns-2">
            .columns-2        
        </div>
        <div class="columns-10">
            .columns-10
        </div>
    </div>
    <div class="row display">
        <div class="columns-3">
            .columns-3      
        </div>
        <div class="columns-9">
            .columns-9
        </div>
    </div>
    <div class="row display">
        <div class="columns-4">
            .columns-4
        </div>
        <div class="columns-8">
            .columns-8              
        </div>
    </div>
    <div class="row display">
        <div class="columns-5">
            .columns-5              
        </div>
        <div class="columns-7">
            .columns-7
        </div>
    </div>
    <div class="row display">
        <div class="columns-6">
            .columns-6                
        </div>
        <div class="columns-6">
            .columns-6                
        </div>
    </div>
    <div class="row display">
        <div class="columns-7">
            .columns-7              
        </div>
        <div class="columns-5">
            .columns-5               
        </div>
    </div>
    <div class="row display">
        <div class="columns-8">
            .columns-8  
        </div>
        <div class="columns-4">
            columns-4               
        </div>
    </div>
    <div class="row display">
        <div class="columns-9">
            .columns-9               
        </div>
        <div class="columns-3">
            .columns-3              
        </div>
    </div>
    <div class="row display">
        <div class="columns-10">
            .columns-10                
        </div>
        <div class="columns-2">
            .columns-2                
        </div>
    </div>
    <div class="row display">
        <div class="columns-11">
            .columns-11             
        </div>
        <div class="columns-1">
            .columns-1                
        </div>
    </div>
    <div class="row display">
        <div class="columns-12">
            .columns-12             
        </div>
    </div>
</div>

<div class="container">
    <div class="row display">
        <div class="columns-1">
            .columns-1                
        </div>
        <div class="columns-11">
            .columns-11             
        </div>
    </div>
    <div class="row display">
        <div class="columns-1">
            .columns-1                
        </div>
        <div class="columns-10 offset-by-1">
            .columns-10.offset-by-one          
        </div>
    </div>
    <div class="row display">
        <div class="columns-1">
            .columns-1                
        </div>
        <div class="columns-9 offset-by-2">
            .columns-9.offset-by-two                 
        </div>
    </div>
    <div class="row display">
        <div class="columns-1">
            .columns-1                
        </div>
        <div class="columns-8 offset-by-3">
            .columns-8.offset-by.three              
        </div>
    </div>
    <div class="row display">
        <div class="columns-7 offset-by-5">
            .columns-7.offset-by-five               
        </div>
    </div>
    <div class="row display">
        <div class="columns-6 offset-by-6">
            .columns-6.offset-by-six              
        </div>
    </div>
    <div class="row display">
        <div class="columns-5 offset-by-7">
            .columns-5.offset-by-six                 
        </div>
    </div>
    <div class="row display">
        <div class="columns-4 offset-by-8">
            columns-4.offset-by-eight                   
        </div>
    </div>
    
    <hr>
    <h4>Centered Columns</h4>
    <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element itself. This is a convenient way to make sure a block is centered, even if you change the number of columns it contains. Note: for this to work, there cannot be any other column blocks in the row.</p>

    <div class="row display">
        <div class="columns-1 centered">
            .columns-1.centered               
        </div>
    </div>
    <div class="row display">
        <div class="columns-2 centered">
            .columns-2.centered               
        </div>
    </div>
    <div class="row display">
        <div class="columns-3 centered">
            .columns-3.centered             
        </div>
    </div>
    <div class="row display">
        <div class="columns-4 centered">
            columns-4.centered              
        </div>
    </div>
    <div class="row display">
        <div class="columns-5 centered">
            .columns-5.centered              
        </div>
    </div>
    <div class="row display">
        <div class="columns-6 centered">
            .columns-6.centered               
        </div>
    </div>
    <div class="row display">
        <div class="columns-7 centered">
            .columns-7.centered             
        </div>
    </div>
    <div class="row display">
        <div class="columns-8 centered">
            .columns-8.centered             
        </div>
    </div>
    <div class="row display">
        <div class="columns-9 centered">
            .columns-9.centered              
        </div>
    </div>
    <div class="row display">
        <div class="columns-10 centered">
            .columns-10.centered               
        </div>
    </div>
    <div class="row display">
        <div class="columns-11 centered">
            .columns-11.centered                
        </div>
    </div>
    <div class="row display">
        <div class="columns-12 centered">
            .columns-12.centered                
        </div>
    </div>
    
    <hr>
    
    <h4>Source Ordering</h4>
    <p>Sometimes within the grid you want the order of your markup to not necessarily be the same as the order items are flowed into the grid. Using these source ordering classes you can shift columns around on desktops and tablets. On phones the grid will still be linearized into the order of the markup.</p>
    
    <div class="row display">
        <div class="columns-2 push-ten">
            .columns-2                    </div>
        <div class="columns-10">
            .columns-10 (last)
        </div>
    </div>
    <div class="row display">
        <div class="columns-3 push-nine">
            .columns-3      
        </div>
        <div class="columns-9 pull-three">
            .columns-9 (last)
        </div>
    </div>
    <div class="row display">
        <div class="columns-4 push-eight">
            columns-4
        </div>
        <div class="columns-8 pull-four">
            .columns-8 (last)
        </div>
    </div>
    <div class="row display">
        <div class="columns-5 push-seven">
            .five
        </div>
        <div class="columns-7 pull-five">
            .columns-7 (last)
        </div>
    </div>
    <div class="row display">
        <div class="columns-6 push-six">
            .columns-6
        </div>
        <div class="columns-6 pull-six">
            .columns-6 (last)
        </div>
    </div>
    <div class="row display">
        <div class="columns-7 push-five">
            .columns-7
        </div>
        <div class="columns-5 pull-seven">
            .columns-5 (last)
        </div>
    </div>
    <div class="row display">
        <div class="columns-8 push-four">
            .columns-8  
        </div>
        <div class="columns-4 pull-eight">
            columns-4 (last)
        </div>
    </div>
    <div class="row display">
        <div class="columns-9 push-three">
            .columns-9
        </div>
        <div class="columns-3 pull-nine">
            .columns-3 (last)       
        </div>
    </div>
    <div class="row display">
        <div class="columns-10 push-two">
            .columns-10    
        </div>
        <div class="columns-2 pull-ten">
            .two (last)     
        </div>
    </div>


    <hr>
    <h4>Offsets</h4>
    <p>Offsets allow you to create additional space between columns in a row. The offsets run from offset-by-one all the way up to offset-by-eleven. Like the rest of the grid they're nestable.</p>

    <hr>
    <h4>Mobile Grid</h4>
    <p>The grid has two modes of adapting for small displays like phones. The first requires no work at all — the grid will linearize on a small device so your columns stack vertically. This is useful to quickly adapt a desktop layout to a simple scrolling mobile layout. The other option is to use some simple classes to implement a four-column phone grid.</p>
            <h5>Four Column Mobile Grid</h5>
    <p>When you're creating your layout you can optionally attach classes that take your existing grid elements and attach them to a four column phone grid.</p>
    <div class="row display">
        <div class="columns-3 phone-1">
            .columns-3.phone-1
        </div>
        <div class="columns-9 phone-3">
            .columns-9.phone-3
        </div>
    </div>
    <div class="row display">
        <div class="columns-6 phone-2">
            .columns-6
        </div>
        <div class="columns-6 phone-2">
            .columns-6
        </div>
    </div>
    <div class="row display">
        <div class="columns-10 phone-3">
            .columns-10.phone-3
        </div>
        <div class="columns-2 phone-1">
            .columns-2.phone-1
        </div>
    </div>

    <h5>Two-up</h5>
    <ul class="grid-2">
        <li>Two-up element</li>
        <li>Two-up element</li>
        <li>Two-up element</li>
        <li>Two-up element</li>
        <li>Two-up element</li>
    </ul>

    <h5>Three-up</h5>
    <ul class="grid-3">
        <li>Three-up element</li>
        <li>Three-up element</li>
        <li>Three-up element</li>
        <li>Three-up element</li>
        <li>Three-up element</li>
    </ul>

    <h5>Four-up (Mobile)</h5>
    <ul class="grid-4 mobile">
        <li>Four-up element</li>
        <li>Four-up element</li>
        <li>Four-up element</li>
        <li>Four-up element</li>
        <li>Four-up element</li>
        <li>Four-up element</li>
    </ul>

    <h5>Five-up</h5>
    <ul class="grid-5">
        <li>Five-up element</li>
        <li>Five-up element</li>
        <li>Five-up element</li>
        <li>Five-up element</li>
        <li>Five-up element</li>
        <li>Five-up element</li>
        <li>Five-up element</li>
    </ul>

    <h5>Mobile Source Ordering</h5>
    <p>You can use the same push and pull style classes on the 4 column phone grid. The syntax includes .pull-one-phone, .pull-two-phone, .pull-three-phone, as well as .push-one-phone, .push-two-phone, .push-three.phone.</p>

    <h4>Other Layout Options</h4>
    <p>Be sure to check out the <a href="layout.php">Layout docs</a> to see how you can turn various grid elements on and off, as well as use 2/3/4/5-up block grids for gallery style layouts.</p>
</div>
Commit	Line	Data
c4685c84 TL	1	<!doctype html>
	2	<link rel="stylesheet" href="s.css" />
	3
	4	<p>This method was inspired by the Foundation grid, from Zurb. It is made slightly more dynamic, but will require Sass 3.2 to become truly configureable.</p>
	5
	6
	7	<h4>Examples</h4>
	8	<p>Take this page for example - we've set up this page by containing this section in columns-8, and the sidebar in four. When the screen is larger than iPad resolution you'll see them laid out normally - smaller than that and columns become 100% width objects for mobile devices.</p>
	9
	10	<p>Below you can see how the rows and columns come together. All columns are inside a row and for this we've colored the rows and columns for visibility. You can also see how nesting works - this example is inside an eight column container, but below we have all 12 columns to use. You can nest them down quite a ways before the percentage widths become absurdly small.</p>
	11
	12
	13	<div class="container">
	14	<div class="row display">
	15	<div class="columns-4 columns">
	16	.columns-4
	17	</div>
	18	<div class="columns-4">
	19	.columns-4
	20	</div>
	21	<div class="columns-4">
	22	.columns-4
	23	</div>
	24	</div>
	25	<div class="row display">
	26	<div class="columns-1">
	27	.columns-1
	28	</div>
	29	<div class="columns-1">
	30	.columns-1
	31	</div>
	32	<div class="columns-1">
	33	.columns-1
	34	</div>
	35	<div class="columns-1">
	36	.columns-1
	37	</div>
	38	<div class="columns-1">
	39	.columns-1
	40	</div>
	41	<div class="columns-1">
	42	.columns-1
	43	</div>
	44	<div class="columns-1">
	45	.columns-1
	46	</div>
	47	<div class="columns-1">
	48	.columns-1
	49	</div>
	50	<div class="columns-1">
	51	.columns-1
	52	</div>
	53	<div class="columns-1">
	54	.columns-1
	55	</div>
	56	<div class="columns-1">
	57	.columns-1
	58	</div>
	59	<div class="columns-1">
	60	.columns-1
	61	</div>
	62	</div>
	63	<div class="row display">
	64	<div class="columns-3">
65	.columns-3
66	</div>
67	<div class="columns-6">
68	.columns-6
69	</div>
70	<div class="columns-3">
71	.columns-3
72	</div>
73	</div>
74	<div class="row display">
75	<div class="columns-2">
76	.columns-2
77	</div>
78	<div class="columns-8">
79	.columns-8
80	</div>
81	<div class="columns-2">
82	.columns-2
83	</div>
84	</div>
85	<div class="row display">
86	<div class="columns-1">
87	.columns-1
88	</div>
89	<div class="columns-11">
90	.columns-11
91	</div>
92	</div>
93	<div class="row display">
94	<div class="columns-2">
95	.columns-2
96	</div>
97	<div class="columns-10">
98	.columns-10
99	</div>
100	</div>
101	<div class="row display">
102	<div class="columns-3">
103	.columns-3
104	</div>
105	<div class="columns-9">
106	.columns-9
107	</div>
108	</div>
109	<div class="row display">
110	<div class="columns-4">
111	.columns-4
112	</div>
113	<div class="columns-8">
114	.columns-8
115	</div>
116	</div>
117	<div class="row display">
118	<div class="columns-5">
119	.columns-5
120	</div>
121	<div class="columns-7">
122	.columns-7
123	</div>
124	</div>
125	<div class="row display">
126	<div class="columns-6">
127	.columns-6
128	</div>
129	<div class="columns-6">
130	.columns-6
131	</div>
132	</div>
133	<div class="row display">
134	<div class="columns-7">
135	.columns-7
136	</div>
137	<div class="columns-5">
138	.columns-5
139	</div>
140	</div>
141	<div class="row display">
142	<div class="columns-8">
143	.columns-8
144	</div>
145	<div class="columns-4">
146	columns-4
147	</div>
148	</div>
149	<div class="row display">
150	<div class="columns-9">
151	.columns-9
152	</div>
153	<div class="columns-3">
154	.columns-3
155	</div>
156	</div>
157	<div class="row display">
158	<div class="columns-10">
159	.columns-10
160	</div>
161	<div class="columns-2">
162	.columns-2
163	</div>
164	</div>
165	<div class="row display">
166	<div class="columns-11">
167	.columns-11
168	</div>
169	<div class="columns-1">
170	.columns-1
171	</div>
172	</div>
173	<div class="row display">
174	<div class="columns-12">
175	.columns-12
176	</div>
177	</div>
178	</div>
179
180	<div class="container">
181	<div class="row display">
182	<div class="columns-1">
183	.columns-1
184	</div>
185	<div class="columns-11">
186	.columns-11
187	</div>
188	</div>
189	<div class="row display">
190	<div class="columns-1">
191	.columns-1
192	</div>
193	<div class="columns-10 offset-by-1">
194	.columns-10.offset-by-one
195	</div>
196	</div>
197	<div class="row display">
198	<div class="columns-1">
199	.columns-1
200	</div>
201	<div class="columns-9 offset-by-2">
202	.columns-9.offset-by-two
203	</div>
204	</div>
205	<div class="row display">
206	<div class="columns-1">
207	.columns-1
208	</div>
209	<div class="columns-8 offset-by-3">
210	.columns-8.offset-by.three
211	</div>
212	</div>
213	<div class="row display">
214	<div class="columns-7 offset-by-5">
215	.columns-7.offset-by-five
216	</div>
217	</div>
218	<div class="row display">
219	<div class="columns-6 offset-by-6">
220	.columns-6.offset-by-six
221	</div>
222	</div>
223	<div class="row display">
224	<div class="columns-5 offset-by-7">
225	.columns-5.offset-by-six
226	</div>
227	</div>
228	<div class="row display">
229	<div class="columns-4 offset-by-8">
230	columns-4.offset-by-eight
231	</div>
232	</div>
233
234	<hr>
235	<h4>Centered Columns</h4>
236	<p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element itself. This is a convenient way to make sure a block is centered, even if you change the number of columns it contains. Note: for this to work, there cannot be any other column blocks in the row.</p>
237
238	<div class="row display">
239	<div class="columns-1 centered">
240	.columns-1.centered
241	</div>
242	</div>
243	<div class="row display">
244	<div class="columns-2 centered">
245	.columns-2.centered
246	</div>
247	</div>
248	<div class="row display">
249	<div class="columns-3 centered">
250	.columns-3.centered
251	</div>
252	</div>
253	<div class="row display">
254	<div class="columns-4 centered">
255	columns-4.centered
256	</div>
257	</div>
258	<div class="row display">
259	<div class="columns-5 centered">
260	.columns-5.centered
261	</div>
262	</div>
263	<div class="row display">
264	<div class="columns-6 centered">
265	.columns-6.centered
266	</div>
267	</div>
268	<div class="row display">
269	<div class="columns-7 centered">
270	.columns-7.centered
271	</div>
272	</div>
273	<div class="row display">
274	<div class="columns-8 centered">
275	.columns-8.centered
276	</div>
277	</div>
278	<div class="row display">
279	<div class="columns-9 centered">
280	.columns-9.centered
281	</div>
282	</div>
283	<div class="row display">
284	<div class="columns-10 centered">
285	.columns-10.centered
286	</div>
287	</div>
288	<div class="row display">
289	<div class="columns-11 centered">
290	.columns-11.centered
291	</div>
292	</div>
293	<div class="row display">
294	<div class="columns-12 centered">
295	.columns-12.centered
296	</div>
297	</div>
298
299	<hr>
300
301	<h4>Source Ordering</h4>
302	<p>Sometimes within the grid you want the order of your markup to not necessarily be the same as the order items are flowed into the grid. Using these source ordering classes you can shift columns around on desktops and tablets. On phones the grid will still be linearized into the order of the markup.</p>
303
304	<div class="row display">
305	<div class="columns-2 push-ten">
306	.columns-2 </div>
307	<div class="columns-10">
308	.columns-10 (last)
309	</div>
310	</div>
311	<div class="row display">
312	<div class="columns-3 push-nine">
313	.columns-3
314	</div>
315	<div class="columns-9 pull-three">
316	.columns-9 (last)
317	</div>
318	</div>
319	<div class="row display">
320	<div class="columns-4 push-eight">
321	columns-4
322	</div>
323	<div class="columns-8 pull-four">
324	.columns-8 (last)
325	</div>
326	</div>
327	<div class="row display">
328	<div class="columns-5 push-seven">
329	.five
330	</div>
331	<div class="columns-7 pull-five">
332	.columns-7 (last)
333	</div>
334	</div>
335	<div class="row display">
336	<div class="columns-6 push-six">
337	.columns-6
338	</div>
339	<div class="columns-6 pull-six">
340	.columns-6 (last)
341	</div>
342	</div>
343	<div class="row display">
344	<div class="columns-7 push-five">
345	.columns-7
346	</div>
347	<div class="columns-5 pull-seven">
348	.columns-5 (last)
349	</div>
350	</div>
351	<div class="row display">
352	<div class="columns-8 push-four">
353	.columns-8
354	</div>
355	<div class="columns-4 pull-eight">
356	columns-4 (last)
357	</div>
358	</div>
359	<div class="row display">
360	<div class="columns-9 push-three">
361	.columns-9
362	</div>
363	<div class="columns-3 pull-nine">
364	.columns-3 (last)
365	</div>
366	</div>
367	<div class="row display">
368	<div class="columns-10 push-two">
369	.columns-10
370	</div>
371	<div class="columns-2 pull-ten">
372	.two (last)
373	</div>
374	</div>
375
376
377	<hr>
378	<h4>Offsets</h4>
379	<p>Offsets allow you to create additional space between columns in a row. The offsets run from offset-by-one all the way up to offset-by-eleven. Like the rest of the grid they're nestable.</p>
380
381	<hr>
382	<h4>Mobile Grid</h4>
383	<p>The grid has two modes of adapting for small displays like phones. The first requires no work at all — the grid will linearize on a small device so your columns stack vertically. This is useful to quickly adapt a desktop layout to a simple scrolling mobile layout. The other option is to use some simple classes to implement a four-column phone grid.</p>
384	<h5>Four Column Mobile Grid</h5>
385	<p>When you're creating your layout you can optionally attach classes that take your existing grid elements and attach them to a four column phone grid.</p>
386	<div class="row display">
387	<div class="columns-3 phone-1">
388	.columns-3.phone-1
389	</div>
390	<div class="columns-9 phone-3">
391	.columns-9.phone-3
392	</div>
393	</div>
394	<div class="row display">
395	<div class="columns-6 phone-2">
396	.columns-6
397	</div>
398	<div class="columns-6 phone-2">
399	.columns-6
400	</div>
401	</div>
402	<div class="row display">
403	<div class="columns-10 phone-3">
404	.columns-10.phone-3
405	</div>
406	<div class="columns-2 phone-1">
407	.columns-2.phone-1
408	</div>
409	</div>
410
411	<h5>Two-up</h5>
412	<ul class="grid-2">
413	<li>Two-up element</li>
414	<li>Two-up element</li>
415	<li>Two-up element</li>
416	<li>Two-up element</li>
417	<li>Two-up element</li>
418	</ul>
419
420	<h5>Three-up</h5>
421	<ul class="grid-3">
422	<li>Three-up element</li>
423	<li>Three-up element</li>
424	<li>Three-up element</li>
425	<li>Three-up element</li>
426	<li>Three-up element</li>
427	</ul>
428
429	<h5>Four-up (Mobile)</h5>
430	<ul class="grid-4 mobile">
431	<li>Four-up element</li>
432	<li>Four-up element</li>
433	<li>Four-up element</li>
434	<li>Four-up element</li>
435	<li>Four-up element</li>
436	<li>Four-up element</li>
437	</ul>
438
439	<h5>Five-up</h5>
440	<ul class="grid-5">
441	<li>Five-up element</li>
442	<li>Five-up element</li>
443	<li>Five-up element</li>
444	<li>Five-up element</li>
445	<li>Five-up element</li>
446	<li>Five-up element</li>
447	<li>Five-up element</li>
448	</ul>
449
450	<h5>Mobile Source Ordering</h5>
451	<p>You can use the same push and pull style classes on the 4 column phone grid. The syntax includes .pull-one-phone, .pull-two-phone, .pull-three-phone, as well as .push-one-phone, .push-two-phone, .push-three.phone.</p>
452
453	<h4>Other Layout Options</h4>
454	<p>Be sure to check out the <a href="layout.php">Layout docs</a> to see how you can turn various grid elements on and off, as well as use 2/3/4/5-up block grids for gallery style layouts.</p>
455	</div>