Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 111 lines (100 sloc) 4.396 kb
ffc6e86 @smileyj68 Initial public commit for Foundation
smileyj68 authored
1 <? $page_title = "Nesting the Grid" ?>
2 <?php include("includes/_header.php"); ?>
3
ed8ccf9 @smileyj68 Removed the IE rendering specification example (issue #1) and removed un...
smileyj68 authored
4 <style>
ffc6e86 @smileyj68 Initial public commit for Foundation
smileyj68 authored
5
6 .example .row, .example .row .column, .example .row .columns { border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; }
7 .example .row { margin-bottom: 10px; }
8 .example .row .column, .example .row .columns { background: #eee; }
9
10 @media handheld, only screen and (max-width: 767px) {
11 .example .row { height: auto; }
12 .example .row .column, .example .row .columns { margin-bottom: 10px; }
13 .example .row .column:last-child, .example .row .columns:last-child { margin-bottom: 0; }
14 }
15
16 </style>
17
18 <!-- Grid BG -->
19 <div id="gridBgShort" class="container">
20 <div class="white-fade hide-on-phones"></div>
21 <div class="row">
22 <div class="one columns"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div>
23 </div>
24 </div>
25 <!-- /Grid BG -->
26
27 <div id="insideContainer" class="container">
28 <div class="row hide-on-phones">
29 <a href="grid.php" class="back two columns hide-on-phones">&larr; About the Grid</a>
30 <!-- Nav -->
31 <nav class="ten columns">
32 <ul>
33 <li><a href="docs/">Documentation</a></li>
34 <li><a href="#">On Github</a></li>
0a4a65f @smileyj68 Added src-download class to file downloads so we can track it
smileyj68 authored
35 <li><a class="nice small blue button src-download" href="files/foundation-download.zip">Download</a></li>
ffc6e86 @smileyj68 Initial public commit for Foundation
smileyj68 authored
36 </ul>
37 </nav>
38 <!-- / Nav -->
39 </div>
40
41 <div class="row">
42 <div class="twelve columns">
43 <h1 class="light-weight">Nesting the Grid</h1>
44 </div>
45 </div>
46
47 <section class="example">
48 <div class="row">
49 <div class="twelve columns">
50 <h3>Page Title (.twelve .columns)</h3>
51 </div>
52 </div>
53 <div class="row">
54 <div class="eight columns">
55 <p>This is an eight column section, starting with this paragraph.<br />Below this you'll find another row with two section.</p>
56 <div class="row">
57 <div class="six columns">
58 <img src="http://placehold.it/300x200" />
59 <h5>Another Section (.six.columns)</h5>
60 <p>This is a nested row with two six column sections.</p>
61 </div>
62 <div class="six columns">
63 <img src="http://placehold.it/300x200" />
64 <h5>Another Section (.six.columns)</h5>
65 <p>This is a nested row with two six column sections.</p>
66 </div>
67 </div>
68 <p>Now the nested row has been closed, and we're back to the original eight column section.</p>
69 </div>
70 <div class="four columns">
71 <p>And this is a four columns section to represent a sidebar (or similar element).</p>
72 <div class="row">
73 <div class="three columns">
74 <img src="http://placehold.it/64x64" />
75 </div>
76 <div class="nine columns">
77 This is a callout with three columns on the left (for the avatar) and nine columns here for the text. This row is inside the four column.
78 </div>
79 </div>
80 <div class="row">
81 <div class="three columns">
82 <img src="http://placehold.it/64x64" />
83 </div>
84 <div class="nine columns">
85 This is a callout with three columns on the left (for the avatar) and nine columns here for the text. This row is inside the four column.
86 </div>
87 </div>
88 <div class="row">
89 <div class="three columns">
90 <img src="http://placehold.it/64x64" />
91 </div>
92 <div class="nine columns">
93 This is a callout with three columns on the left (for the avatar) and nine columns here for the text. This row is inside the four column.
94 </div>
95 </div>
96 <div class="row">
97 <div class="three columns">
98 <img src="http://placehold.it/64x64" />
99 </div>
100 <div class="nine columns">
101 This is a callout with three columns on the left (for the avatar) and nine columns here for the text. This row is inside the four column.
102 </div>
103 </div>
104 </div>
105 </div>
106 </section>
107 </div>
108
109
110
111 <?php include("includes/_footer.php"); ?>
Something went wrong with that request. Please try again.