UNPKG

7.62 kBHTMLView Raw
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&rsquo;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&rsquo;s your basic grid:</h5>
51 <!-- Grid Example -->
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&rsquo;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>