forked from bootstrapfoundationfive/bff
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
168 lines (155 loc) · 12.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!doctype html>
<html class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatibleno-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BFF | Welcome</title>
<link rel="stylesheet" href="css/bff.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblerow">
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblelarge-12 col-xs-12 col-md-12 columns">
<h1 class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblecenter large lrg ">Welcome to BootstrapFoundationFive (BFF)</h1>
</div>
</div>
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblerow">
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblelarge-8 medium-8 col-md-8 col-cs-12 columns">
<h5>Here’s your basic grid:</h5>
<!-- Grid Example -->
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblerow">
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblelarge-12 columns">
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblecallout panel">
<p><strong>This is a twelve column section in a row.</strong> Each of these includes a div.panel element so you can see where the columns are - it's not required at all for the grid.</p>
</div>
</div>
</div>
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblerow">
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblelarge-6 medium-6 columns">
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblecallout panel">
<p>Six columns</p>
</div>
</div>
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblelarge-6 medium-6 columns">
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblecallout panel">
<p>Six columns</p>
</div>
</div>
</div>
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblerow">
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblelarge-4 medium-4 small-4 columns">
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblecallout panel">
<p>Four columns</p>
</div>
</div>
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblelarge-4 medium-4 small-4 columns">
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblecallout panel">
<p>Four columns</p>
</div>
</div>
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblelarge-4 medium-4 small-4 columns">
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblecallout panel">
<p>Four columns</p>
</div>
</div>
</div>
<hr />
<h5>We bet you’ll need forms somewhere:</h5>
<form>
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblerow">
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblelarge-12 columns">
<label>Input Label</label>
<input type="text" placeholder="large-12.columns large-4.columns col-md-12 col-xs-12 bootstrap-2-large-12" />
</div>
</div>
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblerow">
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblelarge-4 medium-4 columns">
<label>Input Label</label>
<input type="text" placeholder="large-4.columns col-md-4 col-xs-6 bootstrap-2-large-4" />
</div>
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblelarge-4 medium-4 columns">
<label>Input Label</label>
<input type="text" placeholder="large-4.columns col-md-4 col-xs-6 bootstrap-2-large-4" />
</div>
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblelarge-4 medium-4 columns">
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblerow collapse">
<label>Input Label</label>
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblesmall-9 columns">
<input type="text" placeholder="small-9.columns large-4.columns col-md-4 col-xs-6 bootstrap-2-large-4" />
</div>
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblesmall-3 columns">
<span class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblepostfix">.com</span>
</div>
</div>
</div>
</div>
<!-- Forms
================================================== -->
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblebs-docs-section">
<h1 id="forms" class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblepage-header">Forms</h1>
<h2 id="forms-example">Basic example</h2>
<p>Individual form controls automatically receive some global styling. All textual <code><input></code>, <code><textarea></code>, and <code><select></code> elements with <code>.form-control</code> are set to <code>width: 100%;</code> by default. Wrap labels and controls in <code>.form-group</code> for optimum spacing.</p>
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblebs-example">
<form role="form">
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatibleform-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatibleform-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatibleform-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatibleform-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatibleform-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblehelp-block">Example block-level help text here.</p>
</div>
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblecheckbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblebtn btn-default">Submit</button>
</form>
</div><!-- /example -->
</form>
</div>
</div>
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblelarge-4 medium-4 columns">
<h4>Sidebar HTML</h4>
<ul class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatibleside-nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
<h3>Unordered</h3>
<p>A list of items in which the order does <em>not</em> explicitly matter.</p>
<div class="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatiblebs-example">
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/bff.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>