edge_framework 0.6.1 → 0.8.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,113 @@
1
+ // ---------------------------------
2
+ // TILE
3
+ // Based on ZURB's Foundation 4
4
+ // ---------------------------------
5
+
6
+ $max-tiles : 12 !default;
7
+ $tile-gutter : 15px !default;
8
+
9
+ @mixin tile-calc (
10
+ $per-row : 0,
11
+ $gutter : $tile-gutter,
12
+ $collapse : false ) {
13
+
14
+ @if $per-row > 0 {
15
+ width : 100% / $per-row;
16
+
17
+ &:nth-of-type(#{$per-row}n+1) {
18
+ clear: both;
19
+ }
20
+ }
21
+ @else {
22
+ @if $collapse {
23
+ padding : 0;
24
+ } @else {
25
+ padding : 0 ($gutter / 2);
26
+ }
27
+ }
28
+ }
29
+
30
+ @mixin tile (
31
+ $large-tile : 0,
32
+ $small-tile : 0,
33
+ $gutter : $tile-gutter,
34
+ $collapse : false ) {
35
+
36
+
37
+ // For <ul> styling
38
+ @if $external-call or $large-tile == 0 {
39
+ display : block;
40
+ @if $collapse {
41
+ margin-right: 0;
42
+ margin-left: 0;
43
+ } @else {
44
+ margin-right: -(em($gutter) / 2);
45
+ margin-left: -(em($gutter) / 2);
46
+ }
47
+
48
+ @include clearfix;
49
+ }
50
+
51
+ // For <li> styling
52
+ > li {
53
+ @if $external-call or $large-tile == 0 {
54
+ display : block;
55
+ position : relative;
56
+ float : $default-float;
57
+ height : auto;
58
+ }
59
+
60
+ @include tile-calc($per-row:$large-tile, $gutter:$gutter, $collapse:$collapse);
61
+
62
+ @if $small-tile > 0 {
63
+ @include below(small) {
64
+ &:nth-of-type(n) {
65
+ clear: none;
66
+ }
67
+
68
+ @include tile-calc($per-row:$small-tile, $gutter:$gutter, $collapse:$collapse);
69
+ }
70
+ }
71
+ } // li
72
+ }
73
+
74
+ @if $include-tile {
75
+
76
+ /* ---------------
77
+ EDGE Block Grid
78
+ --------------- */
79
+
80
+ [class*="-tile-"] {
81
+ @include tile();
82
+
83
+ &.collapse {
84
+ @include tile($collapse:true);
85
+ }
86
+ }
87
+
88
+ @for $i from 2 through $max-tiles {
89
+ .large-tile-#{$i} {
90
+ @include tile($large-tile:$i);
91
+ }
92
+ }
93
+
94
+ @if $responsive {
95
+ @include below(small) {
96
+ // Make large-tie 100% width
97
+ [class*="large-tile-"] > li {
98
+ width: 100%;
99
+ }
100
+ [class*="small-tile-"] > li:nth-child(n) {
101
+ clear: none;
102
+ }
103
+ @for $i from 1 through $max-tiles {
104
+ .small-tile-#{$i} {
105
+ @include tile($large-tile:$i);
106
+ }
107
+ }
108
+ }
109
+ } // responsive
110
+
111
+
112
+
113
+ } // include-block-grid
@@ -36,14 +36,14 @@ EDGE Visibility
36
36
 
37
37
  /* Above small breakpoint (>#{$small-screen}) */
38
38
  .hide-for-large { display: none !important; }
39
- @include medium-up {
39
+ @include above(small) {
40
40
  .hide-for-small { display: inherit !important; }
41
41
  @include special-display(small);
42
42
  }
43
43
 
44
44
 
45
45
  /* Below small breakpoint (<=#{$small-screen}) */
46
- @include small {
46
+ @include below(small) {
47
47
  .hide-for-small { display: none !important; }
48
48
  .hide-for-large { display: inherit !important; }
49
49
  @include special-display(large);
@@ -13,9 +13,10 @@
13
13
  // -----------------------------------------------------
14
14
 
15
15
  // Generate standard sprites
16
- @mixin sprite($folder-name : 'sprites',
17
- $main-class : 'sprite',
18
- $prefix-class : '') {
16
+ @mixin sprite(
17
+ $folder-name : "sprites",
18
+ $main-class : "sprite",
19
+ $prefix-class : "") {
19
20
  $sprites: sprite-map("#{$folder-name}/*.png", $layout: smart);
20
21
  .#{$main-class}{
21
22
  background : $sprites;
@@ -0,0 +1,152 @@
1
+ @import "edge/base";
2
+ @import "edge/helpers";
3
+
4
+
5
+ .custom-grid {
6
+ @include grid-column($large:3);
7
+ }
8
+
9
+ .demo-grid {
10
+ @include transition($g-transition);
11
+ p {
12
+ text-align : center;
13
+ margin : 0;
14
+ }
15
+ .column,
16
+ .columns {
17
+ p {
18
+ margin-bottom : em(15px);
19
+ padding-top : em(10px);
20
+ padding-bottom : em(10px);
21
+ background : #eee;
22
+ text-align : center;
23
+ }
24
+
25
+ .column,
26
+ .columns {
27
+ p {
28
+ background : #ddd;
29
+ }
30
+
31
+ .column,
32
+ .columns {
33
+ p {
34
+ background : #ccc;
35
+ }
36
+ }
37
+ }
38
+ }
39
+ }
40
+
41
+ .demo-block-grid {
42
+ p {
43
+ background : #eee;
44
+ margin-bottom : em(15px);
45
+ padding-top : em(10px);
46
+ padding-bottom : em(10px);
47
+ text-align : center;
48
+ }
49
+ }
50
+
51
+ .custom-block-grid {
52
+ @include tile($large-tile:5, $small-tile:3, $collapse:true);
53
+ }
54
+
55
+ .media-query-wrapper {
56
+ @include below(small) {
57
+ background: $red-color;
58
+ }
59
+ @include above(small) {
60
+ background: $green-color;
61
+ }
62
+ }
63
+
64
+ [data-page="form"] {
65
+ input, textarea, select {
66
+ margin-bottom: 20px;
67
+ }
68
+ }
69
+
70
+ .blog-post {
71
+ @include baseline();
72
+ @include vertical-rhythm();
73
+ }
74
+
75
+ [data-page="triangle"] {
76
+ .triangle1 {
77
+ @include triangle($color:$main-color, $width:100px, $direction:right);
78
+ }
79
+ }
80
+
81
+ // [data-page="typography"] {
82
+ // @mixin adjust-image-leading-to($lines, $font-size: $base-font-size) {
83
+ // height: rhythm($lines, $font-size);
84
+ // }
85
+
86
+ // h1 {
87
+ // @include adjust-leading-to(2, $h1-font-size);
88
+ // }
89
+
90
+ // blockquote {
91
+ // padding-left: 20px;
92
+ // background: #eee;
93
+ // @include trailer(1);
94
+ // @include leader(1);
95
+ // @include padding-trailer(0.5);
96
+ // @include padding-leader(0.5);
97
+ // }
98
+
99
+ // table {
100
+ // @include trailer(1);
101
+ // }
102
+
103
+ // td, th {
104
+ // @include adjust-leading-to(1);
105
+
106
+ // padding-left: 20px;
107
+ // padding-right: 20px;
108
+
109
+ // // @include box-shadow(inset 1px 1px black);
110
+
111
+ // // &:last-child {
112
+ // // @include box-shadow(
113
+ // // inset 1px 1px black,
114
+ // // inset -1px 0 black
115
+ // // );
116
+ // // }
117
+ // }
118
+
119
+ // // tr:last-child {
120
+ // // td {
121
+ // // @include box-shadow(
122
+ // // inset 1px 1px black,
123
+ // // inset 0 -1px black
124
+ // // );
125
+
126
+ // // &:last-child {
127
+ // // @include box-shadow(
128
+ // // inset 1px 1px black,
129
+ // // inset -1px -1px black
130
+ // // );
131
+ // // }
132
+ // // }
133
+ // // }
134
+
135
+ // .sidebar {
136
+ // h2 {
137
+ // @include trailing-border(5px, 1, $h2-font-size);
138
+ // @include trailer(1, $h2-font-size);
139
+ // }
140
+
141
+ // h3 {
142
+ // @include trailer(1, $h3-font-size);
143
+ // }
144
+ // li {
145
+ // cursor: pointer;
146
+
147
+ // &:hover {
148
+ // color: tomato;
149
+ // }
150
+ // }
151
+ // }
152
+ // }
data/assets/test.html CHANGED
@@ -1,74 +1,452 @@
1
1
  <!doctype html>
2
2
  <html lang="en">
3
3
  <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width" />
6
- <title>Edge Framework</title>
7
-
8
- <!-- VENDOR -->
9
- <link rel="stylesheet" href="css/edge.css">
10
-
11
- <!-- APP Specific -->
12
- <link rel="stylesheet" href="css/for-test.css">
13
-
14
- <style>
15
- .bar1140 {
16
- width:1140px; margin:0 auto; background: #333; color: white; position:fixed; top:0;
17
- right:0; left:0; z-index: 2; padding: 10px 0;
18
- }
19
- </style>
20
-
21
- <style>
22
- .hide-for-small {
23
- color: red;
24
- }
25
- .hide-for-large {
26
- color: blue;
27
- }
28
- </style>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width" />
6
+ <title>Edge Framework</title>
7
+
8
+ <!-- VENDOR -->
9
+ <link rel="stylesheet" href="css/edge.css">
10
+
11
+ <!-- APP Specific -->
12
+ <link rel="stylesheet" href="css/for-test.css">
13
+ <!-- <link rel="stylesheet" href="css/prism.css"> -->
14
+
15
+ <style>
16
+ .bar1140 {
17
+ width:1140px; margin:0 auto; background: #333; color: white; position:fixed; top:0;
18
+ right:0; left:0; z-index: 2; padding: 10px 0;
19
+ }
20
+ </style>
21
+
22
+
23
+ <!--SYNTAX HIGHLIGHTER-->
24
+ <script type="text/javascript" src="js/edge/edge.prism.js"></script>
29
25
  </head>
30
26
  <body>
31
27
  <div id="main-wrapper">
32
- <header class="top-bar"></header>
33
-
34
- <div class="row">
35
- <div class="large-8 large-centered column">
36
- <p>
37
- Lorem ipsum <span class="hide-for-small">show on large</span>, <span class="hide-for-large">show on small</span>. Labore, non eaque dolor fugiat ex provident quis! Reprehenderit reiciendis eum maiores
38
- </p>
39
-
40
- <pre><code>
41
- <ul class="with-tab">
42
- <li>...</li>
43
- </ul>
44
- </code></pre>
45
-
46
- </div>
47
- </div>
48
- <div id="footer-push"></div>
28
+ <header class="top-bar">
29
+ </header>
30
+
31
+ <!-- <div class="row" data-page="typography">
32
+ <div class="large-12 columns">
33
+ <article class="blog-post baseline">
34
+ <div class="row">
35
+ <div class="large-6 columns">
36
+ <div class="typo-wrapper">
37
+ <h1>Unordered List</h1>
38
+ <ul class="bullet-list">
39
+ <li>Lorem ipsum dolor sit</li>
40
+ <li>
41
+ Consectetur adipisicing elit
42
+ <ul class="bullet-list">
43
+ <li>Necessitatibus, ex assumenda veniam ullam</li>
44
+ <li>Ametharum labore deserunt quidem</li>
45
+ </ul>
46
+ </li>
47
+ <li>Consequatur ipsum a aut iusto tempore</li>
48
+ <li>Impedit sint nulla nobis suscipit rem aspernatur</li>
49
+ </ul>
50
+ </div>
51
+ </div>
52
+ <div class="large-6 columns">
53
+ <div class="typo-wrapper">
54
+ <h1>Ordered List</h1>
55
+ <ol>
56
+ <li>Lorem ipsum dolor sit.</li>
57
+ <li> Eligendi, eos, voluptates, ducimus fugit
58
+ <ol>
59
+ <li>Tempora minus iusto veniam veritatis ea</li>
60
+ <li>Perspiciatis sequi et incidunt</li>
61
+ <li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
62
+ </ol>
63
+ </li>
64
+ <li>Consequuntur assumenda nesciunt</li>
65
+ <li>Consectetur adipisicing elit</li>
66
+ </ol>
67
+ </div>
68
+ </div>
69
+ </div>
70
+ <div class="row">
71
+ <div class="large-6 small-9 columns">
72
+ <h1>Lorem ipsum dolor sit amet.</h1>
73
+ <p>
74
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, eaque illum tempora mollitia magni omnis debitis quidem culpa dolores praesentium at veniam nobis! Iusto, excepturi, accusamus autem iure ab magnam!
75
+ </p>
76
+ <p>
77
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, quos hic praesentium sint impedit voluptate aliquid minus consequuntur assumenda quaerat voluptas vel corrupti ullam accusantium quo optio necessitatibus inventore molestias.
78
+ </p>
79
+ <blockquote>
80
+ Lorem ipsum dolor sit amet
81
+ </blockquote>
82
+ <p>
83
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, quidem repellendus at soluta vitae fuga ratione ad ullam? Placeat accusamus quam facere eveniet laboriosam praesentium accusantium. Fuga eum soluta molestiae?
84
+ </p>
85
+ <table>
86
+ <thead>
87
+ <tr>
88
+ <th>No</th>
89
+ <th>Product</th>
90
+ <th>Price</th>
91
+ </tr>
92
+ </thead>
93
+ <tbody>
94
+ <tr>
95
+ <td>1</td>
96
+ <td>Fried Rice</td>
97
+ <td>5.00</td>
98
+ </tr>
99
+ <tr>
100
+ <td>2</td>
101
+ <td>Ayam Penyet</td>
102
+ <td>7.0</td>
103
+ </tr>
104
+ <tr>
105
+ <td>3</td>
106
+ <td>Something random</td>
107
+ <td>9.0</td>
108
+ </tr>
109
+ </tbody>
110
+ </table>
111
+ <p>
112
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, maxime, soluta, perspiciatis ratione suscipit voluptate numquam dicta facere reiciendis saepe laboriosam molestias facilis officiis impedit sunt quo enim quaerat cum.
113
+ </p>
114
+ </div>
115
+ <div class="large-3 small-3 columns">
116
+ <div class="sidebar">
117
+ <h2>SIDEBAR</h2>
118
+ <p>
119
+ <em>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, autem.</em>
120
+ </p>
121
+ <h3>MENU</h3>
122
+ <p>Select your dishes</p>
123
+ <ul class="bullet-list">
124
+ <li>Dolorum, rerum, minima</li>
125
+ <li>Laboriosam in atque</li>
126
+ <li>Quo, provident</li>
127
+ <li>Consectetur adipisicing</li>
128
+ <li>Architecto excepturi</li>
129
+ </ul>
130
+ <p>
131
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, pariatur sunt ea adipisci eius dolorum aspernatur asperiores alias laudantium optio.
132
+ </p>
133
+ </div>
134
+
135
+ </div>
136
+ </div>
137
+ </article>
138
+ </div>
139
+ </div> -->
140
+
141
+ <!-- <div class="row">
142
+ <div class="large-12 columns">
143
+ <h1>EDGE Code</h1>
144
+ <h3>Markup</h3>
145
+ <pre class="line-numbers" data-lang="markup" data-line="7"><code>
146
+ <pre class="line-numbers" data-lang="markup" data-line="7"><code>
147
+ Unlike other code-highlighter, you don't need to escape < into &amp;lt;
148
+ <div> ... </div>
149
+
150
+ Add class ".line-numbers" to include numbering
151
+
152
+ Add attribute data-line to highlight specific lines
153
+ The value can be a range like "5-7"
154
+ </code></pre>
155
+ </code></pre>
156
+
157
+ <h3>Python</h3>
158
+ <pre data-lang="python"><code>
159
+ def do_something():
160
+ print("Hello World")
161
+ </code></pre>
162
+
163
+ <h3>CSS</h3>
164
+ <pre data-lang="css" class="line-numbers" data-line="1-3"><code>
165
+ *,
166
+ *:before,
167
+ *:after {
168
+ -webkit-box-sizing: border-box;
169
+ -moz-box-sizing: border-box;
170
+ box-sizing: border-box; }
171
+ </code></pre>
172
+
173
+ <h3>Javascript</h3>
174
+ <pre class="line-numbers" data-lang="javascript" data-line="2"><code>
175
+ $(document).ready(function() {
176
+ var text = "Hello World";
177
+ var num = 5 + 10;
178
+ });
179
+ </code></pre>
180
+
181
+ <h3>Ruby</h3>
182
+ <pre data-lang="ruby"><code>
183
+ def do_something():
184
+ puts "Hello World"
185
+ end
186
+ </code></pre>
187
+ </div>
188
+ </div> -->
189
+
190
+ <div class="row" data-page="block-grid">
191
+ <div class="large-12 columns">
192
+ <div class="demo-block-grid">
193
+ <h1>Block Grid</h1>
194
+ <ul class="large-tile-7 small-tile-5">
195
+ <li><p>1</p></li>
196
+ <li><p>1</p></li>
197
+ <li><p>1</p></li>
198
+ <li><p>1</p></li>
199
+ <li><p>1</p></li>
200
+ <li><p>1</p></li>
201
+ <li><p>1</p></li>
202
+ <li><p>1</p></li>
203
+ <li><p>1</p></li>
204
+ <li><p>1</p></li>
205
+ <li><p>1</p></li>
206
+ <li><p>1</p></li>
207
+ </ul>
208
+ <h2>Block Grid Collapsed</h2>
209
+ <ul class="large-tile-7 small-tile-5 collapse">
210
+ <li><p>1</p></li>
211
+ <li><p>1</p></li>
212
+ <li><p>1</p></li>
213
+ <li><p>1</p></li>
214
+ <li><p>1</p></li>
215
+ <li><p>1</p></li>
216
+ <li><p>1</p></li>
217
+ <li><p>1</p></li>
218
+ <li><p>1</p></li>
219
+ <li><p>1</p></li>
220
+ <li><p>1</p></li>
221
+ <li><p>1</p></li>
222
+ </ul>
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+
228
+ <!-- <div class="row" data-page="grid">
229
+ <div class="large-12 columns">
230
+ <div class="demo-grid">
231
+ <h1>Grid</h1>
232
+ <div class="row">
233
+ <div class="large-6 columns"><p>6</p></div>
234
+ <div class="large-6 columns"><p>6</p></div>
235
+ </div>
236
+ <div class="row">
237
+ <div class="large-8 columns"><p>8</p></div>
238
+ <div class="large-4 columns"><p>4</p></div>
239
+ </div>
240
+
241
+ <h1>Collapsed Grid</h1>
242
+ <div class="row collapse">
243
+ <div class="large-6 columns"><p>6</p></div>
244
+ <div class="large-6 columns"><p>6</p></div>
245
+ </div>
246
+ <div class="row collapse">
247
+ <div class="large-8 columns"><p>8</p></div>
248
+ <div class="large-4 columns"><p>4</p></div>
249
+ </div>
250
+
251
+ <h1>Responsive Grid</h1>
252
+ <div class="row">
253
+ <div class="large-4 small-4 columns"><p>large-4 small-4</p></div>
254
+ <div class="large-4 small-4 columns"><p>large-4 small-4</p></div>
255
+ <div class="large-4 small-4 columns"><p>large-4 small-4</p></div>
256
+ </div>
257
+ <div class="row">
258
+ <div class="large-6 small-9 columns"><p>large-6 small-9</p></div>
259
+ <div class="large-6 small-3 columns"><p>large-6 small-3</p></div>
260
+ </div>
261
+
262
+ <h1>Offset and Source Ordering</h1>
263
+ <div class="row">
264
+ <div class="large-3 small-5 columns">
265
+ <p>
266
+ <span class="hide-for-small">large-3</span><span class="hide-for-large">small-5</span>
267
+ </p>
268
+ </div>
269
+ <div class="large-6 large-offset-3 small-5 columns">
270
+ <p>
271
+ <span class="hide-for-small">large-6 offset-3</span><span class="hide-for-large">small-5</span>
272
+ </p>
273
+ </div>
274
+ </div>
275
+ <p>collapsed</p>
276
+ <div class="row collapse">
277
+ <div class="large-3 large-offset-3 small-5 columns">
278
+ <p>
279
+ <span class="hide-for-small">large-3 offset-3</span><span class="hide-for-large">small-5</span>
280
+ </p>
281
+ </div>
282
+ <div class="large-6 small-5 small-offset-2 columns">
283
+ <p>
284
+ <span class="hide-for-small">large-6</span><span class="hide-for-large">small-5 offset-2</span>
285
+ </p>
286
+ </div>
287
+ </div>
288
+ <div class="row">
289
+ <div class="large-3 push-9 columns"><p>push-9</p></div>
290
+ <div class="large-9 pull-3 columns"><p>pull-3, last-child</p></div>
291
+ </div>
292
+ <div class="row collapse">
293
+ <p>collapsed</p>
294
+ <div class="large-3 push-9 columns"><p>push-9</p></div>
295
+ <div class="large-9 pull-3 columns"><p>pull-3, last-child</p></div>
296
+ </div>
297
+
298
+ <h1>Nested Grid</h1>
299
+ <div class="row">
300
+ <div class="large-12 columns">
301
+ <p>12</p>
302
+ <div class="row">
303
+ <div class="large-8 columns">
304
+ <p>8</p>
305
+ <div class="row">
306
+ <div class="large-6 columns"><p>6</p></div>
307
+ <div class="large-6 columns"><p>6</p></div>
308
+ </div>
309
+
310
+ </div>
311
+ <div class="large-4 columns">
312
+ <p>4</p>
313
+ <div class="row">
314
+ <div class="large-7 columns"><p>7</p></div>
315
+ <div class="large-5 columns"><p>5</p></div>
316
+ </div>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ </div>
321
+
322
+ <h1>Responsive Nested Grid</h1>
323
+ <div class="row">
324
+ <div class="large-12 small-12 columns">
325
+ <p>12-12</p>
326
+ <div class="row">
327
+ <div class="large-8 small-8 columns">
328
+ <p>8-8</p>
329
+ <div class="row">
330
+ <div class="large-6 small-9 columns"><p>6-9</p></div>
331
+ <div class="large-6 small-3 columns"><p>6-3</p></div>
332
+ </div>
333
+ </div>
334
+ <div class="large-4 small-4 columns">
335
+ <p>4-4</p>
336
+ <div class="row">
337
+ <div class="large-7 small-7 columns"><p>7-7</p></div>
338
+ <div class="large-5 small-5 columns"><p>5-5</p></div>
339
+ </div>
340
+ </div>
341
+ </div>
342
+ </div>
343
+ </div>
344
+
345
+ <h1>Responsive offset and Centering</h1>
346
+ <div class="row">
347
+ <div class="large-8 large-offset-2 small-5 small-offset-3 columns">
348
+ <p>large-8 large-offset-2 small-5 off-3</p>
349
+ </div>
350
+ </div>
351
+ <div class="row">
352
+ <div class="large-6 large-centered small-8 columns">
353
+ <p>large-6 large-centered small-8 small-centered</p>
354
+ </div>
355
+ </div>
356
+
357
+ </div>
358
+ </div>
359
+ </div> -->
360
+
361
+ <!-- <div class="row" data-page="form">
362
+ <div class="large-6 columns">
363
+ <h1>Form Grid</h1>
364
+ <div class="form-row">
365
+ <label for="" class="large-4 small-12 form-columns">Label</label>
366
+ <input type="text" class="large-8 small-12 form-columns" placeholder="Normal input text">
367
+ </div>
368
+
369
+ <pre class="brush:xhtml;">
370
+ <div class="form-row">
371
+ <label class="large-4 small-12 form-columns"></label>
372
+ <input type="text" class="large-8 small-12 form-columns">
373
+ </div>
374
+ </pre>
375
+
376
+ <h1>Form Grid with Offset and Centered</h1>
377
+ <div class="form-row">
378
+ <input type="text" class="large-8 large-offset-4 form-columns" placeholder="Input with offset">
379
+ </div>
380
+ <div class="form-row">
381
+ <input type="text" class="large-8 large-centered form-columns" placeholder="Centered Input">
382
+ </div>
383
+
384
+ <pre class="brush:xhtml;">
385
+ <div class="form-row">
386
+ <input type="text" class="large-8 large-offset-4 form-columns" placeholder="Input with offset">
387
+ </div>
388
+ <div class="form-row">
389
+ <input type="text" class="large-8 large-centered form-columns" placeholder="Centered Input">
390
+ </div>
391
+ </pre>
392
+
393
+ <h1>Prefix and Postfix</h1>
394
+
395
+ <div class="form-row">
396
+ <label for="" class="prefix large-4 small-6 form-columns">Prefix Label</label>
397
+ <input type="text" class="large-8 small-6 form-columns" placeholder="Normal Input text">
398
+ <div class="form-row">
399
+ <input type="text" class="large-8 form-columns" placeholder="Your Blog name">
400
+ <label for="" class="postfix large-4 form-columns">.blogspot.com</label>
401
+ </div>
402
+
403
+ <pre class="brush:xhtml;">
404
+ <div class="form-row">
405
+ <label class="prefix large-4 small-6 form-columns"></label>
406
+ <input type="text" class="large-8 small-6 form-columns">
407
+ <div class="form-row">
408
+ <input type="text" class="large-8 form-columns">
409
+ <label class="postfix large-4 form-columns"></label>
410
+ </div>
411
+ </pre>
412
+
413
+ <h1>Textarea and Select</h1>
414
+ <div class="form-row">
415
+ <label for="" class="large-4 form-columns">Label</label>
416
+ <textarea placeholder="Normal Input text" class="large-8 form-columns" rows="5"></textarea>
417
+ </div>
418
+ <div class="form-row">
419
+ <label for="" class="large-4 form-columns">Select Dropdown</label>
420
+ <select name="" id="" class="large-8 form-columns">
421
+ <option value="">Asia</option>
422
+ <option value="">America</option>
423
+ <option value="">Europe</option>
424
+ <option value="">Australia</option>
425
+ <option value="">Africa</option>
426
+ <option value="">Antartica</option>
427
+ </select>
428
+ </div>
429
+
430
+ <pre>
431
+ <div class="form-row">
432
+ <label class="large-4 form-columns">Label</label>
433
+ <textarea class="large-8 form-columns"></textarea>
434
+ </div>
435
+ <div class="form-row">
436
+ <label class="large-4 form-columns">Select Dropdown</label>
437
+ <select class="large-8 form-columns">
438
+ <option>...</option>
439
+ </select>
440
+ </div>
441
+ </pre>
442
+
443
+ <input type="submit" value="Submit">
444
+ </div>
445
+ </div> -->
446
+
447
+ <div id="footer-push"></div>
49
448
  </div>
50
449
  <footer id="footer">
51
450
  </footer>
52
-
53
- <script src="js-docs/jquery.min.js"></script>
54
- <script>
55
- (function () {
56
- var htmlText = $("pre > code").html();
57
- // remove trailing and following line break
58
- var filteredText = htmlText.replace(/</g, "&lt;").replace(/^\n/, "").replace(/\n\s+$/, "");
59
-
60
- // split the lines and count the offset
61
- var lines = filteredText.split("\n");
62
- var offset = lines[0].match(/^\s*/)[ 0 ].length;
63
-
64
- // remove excess whitespace from each line
65
- lines = lines.map(function(line) {
66
- return line.slice(offset);
67
- });
68
-
69
- //.replace(/(\n)\s+/g, "$1").replace(/^\n/, "");
70
- $("pre > code").html(lines.join("\n") );
71
- }() );
72
- </script>
73
451
  </body>
74
452
  </html>