1 | <!doctype html>
|
2 | <html class="no-js" lang="en" dir="ltr">
|
3 | <head>
|
4 | <meta charset="utf-8">
|
5 | <meta http-equiv="x-ua-compatible" content="ie=edge">
|
6 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
7 | <title>Foundation for Sites</title>
|
8 | <link rel="stylesheet" href="css/foundation.css">
|
9 | <link rel="stylesheet" href="css/app.css">
|
10 | </head>
|
11 | <body>
|
12 | <div class="grid-container">
|
13 | <div class="grid-x grid-padding-x">
|
14 | <div class="large-12 cell">
|
15 | <h1>Welcome to Foundation</h1>
|
16 | </div>
|
17 | </div>
|
18 |
|
19 | <div class="grid-x grid-padding-x">
|
20 | <div class="large-12 cell">
|
21 | <div class="callout">
|
22 | <h3>We’re stoked you want to try Foundation! </h3>
|
23 | <p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
|
24 | <p>Once you've exhausted the fun in this document, you should check out:</p>
|
25 | <div class="grid-x grid-padding-x">
|
26 | <div class="large-4 medium-4 cell">
|
27 | <p><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</p>
|
28 | </div>
|
29 | <div class="large-4 medium-4 cell">
|
30 | <p><a href="http://zurb.com/university/code-skills">Foundation Code Skills</a><br />These online courses offer you a chance to better understand how Foundation works and how you can master it to create awesome projects.</p>
|
31 | </div>
|
32 | <div class="large-4 medium-4 cell">
|
33 | <p><a href="http://foundation.zurb.com/forum">Foundation Forum</a><br />Join the Foundation community to ask a question or show off your knowlege.</p>
|
34 | </div>
|
35 | </div>
|
36 | <div class="grid-x grid-padding-x">
|
37 | <div class="large-4 medium-4 medium-push-2 cell">
|
38 | <p><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p>
|
39 | </div>
|
40 | <div class="large-4 medium-4 medium-pull-2 cell">
|
41 | <p><a href="https://twitter.com/ZURBfoundation">@zurbfoundation</a><br />Ping us on Twitter if you have questions. When you build something with this we'd love to see it (and send you a totally boss sticker).</p>
|
42 | </div>
|
43 | </div>
|
44 | </div>
|
45 | </div>
|
46 | </div>
|
47 |
|
48 | <div class="grid-x grid-padding-x">
|
49 | <div class="large-8 medium-8 cell">
|
50 | <h5>Here’s your basic grid:</h5>
|
51 |
|
52 |
|
53 | <div class="grid-x grid-padding-x">
|
54 | <div class="large-12 cell">
|
55 | <div class="primary callout">
|
56 | <p><strong>This is a twelve cell section in a grid-x.</strong> Each of these includes a div.callout element so you can see where the cell are - it's not required at all for the grid.</p>
|
57 | </div>
|
58 | </div>
|
59 | </div>
|
60 | <div class="grid-x grid-padding-x">
|
61 | <div class="large-6 medium-6 cell">
|
62 | <div class="primary callout">
|
63 | <p>Six cell</p>
|
64 | </div>
|
65 | </div>
|
66 | <div class="large-6 medium-6 cell">
|
67 | <div class="primary callout">
|
68 | <p>Six cell</p>
|
69 | </div>
|
70 | </div>
|
71 | </div>
|
72 | <div class="grid-x grid-padding-x">
|
73 | <div class="large-4 medium-4 small-4 cell">
|
74 | <div class="primary callout">
|
75 | <p>Four cell</p>
|
76 | </div>
|
77 | </div>
|
78 | <div class="large-4 medium-4 small-4 cell">
|
79 | <div class="primary callout">
|
80 | <p>Four cell</p>
|
81 | </div>
|
82 | </div>
|
83 | <div class="large-4 medium-4 small-4 cell">
|
84 | <div class="primary callout">
|
85 | <p>Four cell</p>
|
86 | </div>
|
87 | </div>
|
88 | </div>
|
89 |
|
90 | <hr />
|
91 |
|
92 | <h5>We bet you’ll need a form somewhere:</h5>
|
93 | <form>
|
94 | <div class="grid-x grid-padding-x">
|
95 | <div class="large-12 cell">
|
96 | <label>Input Label</label>
|
97 | <input type="text" placeholder="large-12.cell" />
|
98 | </div>
|
99 | </div>
|
100 | <div class="grid-x grid-padding-x">
|
101 | <div class="large-4 medium-4 cell">
|
102 | <label>Input Label</label>
|
103 | <input type="text" placeholder="large-4.cell" />
|
104 | </div>
|
105 | <div class="large-4 medium-4 cell">
|
106 | <label>Input Label</label>
|
107 | <input type="text" placeholder="large-4.cell" />
|
108 | </div>
|
109 | <div class="large-4 medium-4 cell">
|
110 | <div class="grid-x">
|
111 | <label>Input Label</label>
|
112 | <div class="input-group">
|
113 | <input type="text" placeholder="small-9.cell" class="input-group-field" />
|
114 | <span class="input-group-label">.com</span>
|
115 | </div>
|
116 | </div>
|
117 | </div>
|
118 | </div>
|
119 | <div class="grid-x grid-padding-x">
|
120 | <div class="large-12 cell">
|
121 | <label>Select Box</label>
|
122 | <select>
|
123 | <option value="husker">Husker</option>
|
124 | <option value="starbuck">Starbuck</option>
|
125 | <option value="hotdog">Hot Dog</option>
|
126 | <option value="apollo">Apollo</option>
|
127 | </select>
|
128 | </div>
|
129 | </div>
|
130 | <div class="grid-x grid-padding-x">
|
131 | <div class="large-6 medium-6 cell">
|
132 | <label>Choose Your Favorite</label>
|
133 | <input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Radio 1</label>
|
134 | <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Radio 2</label>
|
135 | </div>
|
136 | <div class="large-6 medium-6 cell">
|
137 | <label>Check these out</label>
|
138 | <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
|
139 | <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
|
140 | </div>
|
141 | </div>
|
142 | <div class="grid-x grid-padding-x">
|
143 | <div class="large-12 cell">
|
144 | <label>Textarea Label</label>
|
145 | <textarea placeholder="small-12.cell"></textarea>
|
146 | </div>
|
147 | </div>
|
148 | </form>
|
149 | </div>
|
150 |
|
151 | <div class="large-4 medium-4 cell">
|
152 | <h5>Try one of these buttons:</h5>
|
153 | <p><a href="#" class="button">Simple Button</a><br/>
|
154 | <a href="#" class="success button">Success Btn</a><br/>
|
155 | <a href="#" class="alert button">Alert Btn</a><br/>
|
156 | <a href="#" class="secondary button">Secondary Btn</a></p>
|
157 | <div class="callout">
|
158 | <h5>So many components, girl!</h5>
|
159 | <p>A whole kitchen sink of goodies comes with Foundation. Check out the docs to see them all, along with details on making them your own.</p>
|
160 | <a href="http://foundation.zurb.com/sites/docs/" class="small button">Go to Foundation Docs</a>
|
161 | </div>
|
162 | </div>
|
163 | </div>
|
164 | </div>
|
165 |
|
166 | <script src="js/vendor/jquery.js"></script>
|
167 | <script src="js/vendor/what-input.js"></script>
|
168 | <script src="js/vendor/foundation.js"></script>
|
169 | <script src="js/app.js"></script>
|
170 | </body>
|
171 | </html>
|