Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Updated demos and tests inline with new work on the extension itself

  • Loading branch information...
commit 7aceaa86240b07b8aac4a9917ed1849ab3526e7f 1 parent c41fe61
Adam Stacoviak authored

Showing 27 changed files with 7,171 additions and 1 deletion. Show diff stats Hide diff stats

  1. 5  content/pages/demo-classes.haml
  2. 629  themes/grid-coordinates/public/grid-coordinates/css/demo-classes-overflow-false.css
  3. 636  themes/grid-coordinates/public/grid-coordinates/css/demo-classes-overflow-true.css
  4. 629  themes/grid-coordinates/public/grid-coordinates/css/demo-extends-overflow-false.css
  5. 636  themes/grid-coordinates/public/grid-coordinates/css/demo-extends-overflow-true.css
  6. 205  themes/grid-coordinates/public/grid-coordinates/css/demo-mixins-overflow-false.css
  7. 261  themes/grid-coordinates/public/grid-coordinates/css/demo-mixins-overflow-true.css
  8. 491  themes/grid-coordinates/public/grid-coordinates/css/test/classes-overflow-false.css
  9. 498  themes/grid-coordinates/public/grid-coordinates/css/test/classes-overflow-true.css
  10. 491  themes/grid-coordinates/public/grid-coordinates/css/test/extends-overflow-false.css
  11. 498  themes/grid-coordinates/public/grid-coordinates/css/test/extends-overflow-true.css
  12. 639  themes/grid-coordinates/public/grid-coordinates/css/test/mixins-overflow-false.css
  13. 821  themes/grid-coordinates/public/grid-coordinates/css/test/mixins-overflow-true.css
  14. 103  themes/grid-coordinates/sass/demo-classes-overflow-false.sass
  15. 81  themes/grid-coordinates/sass/demo-classes-overflow-true.sass
  16. 102  themes/grid-coordinates/sass/demo-extends-overflow-false.sass
  17. 101  themes/grid-coordinates/sass/demo-extends-overflow-true.sass
  18. 100  themes/grid-coordinates/sass/demo-mixins-overflow-false.sass
  19. 99  themes/grid-coordinates/sass/demo-mixins-overflow-true.sass
  20. 12  themes/grid-coordinates/sass/test/classes-overflow-false.sass
  21. 11  themes/grid-coordinates/sass/test/classes-overflow-true.sass
  22. 11  themes/grid-coordinates/sass/test/extends-overflow-false.sass
  23. 11  themes/grid-coordinates/sass/test/extends-overflow-true.sass
  24. 35  themes/grid-coordinates/sass/test/mixins-overflow-false.sass
  25. 34  themes/grid-coordinates/sass/test/mixins-overflow-true.sass
  26. 27  themes/grid-coordinates/views/demo-classes.haml
  27. 6  themes/grid-coordinates/views/demo.haml
5  content/pages/demo-classes.haml
... ...
@@ -0,0 +1,5 @@
  1
+Layout: demo-classes
  2
+
  3
+%h1 Demo
  4
+
  5
+%p This is the demo page
629  themes/grid-coordinates/public/grid-coordinates/css/demo-classes-overflow-false.css
... ...
@@ -0,0 +1,629 @@
  1
+@charset "UTF-8";
  2
+html, body, div, span, applet, object, iframe,
  3
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  4
+a, abbr, acronym, address, big, cite, code,
  5
+del, dfn, em, font, img, ins, kbd, q, s, samp,
  6
+small, strike, strong, sub, sup, tt, var,
  7
+dl, dt, dd, ol, ul, li,
  8
+fieldset, form, label, legend,
  9
+table, caption, tbody, tfoot, thead, tr, th, td {
  10
+  margin: 0;
  11
+  padding: 0;
  12
+  border: 0;
  13
+  outline: 0;
  14
+  font-weight: inherit;
  15
+  font-style: inherit;
  16
+  font-size: 100%;
  17
+  font-family: inherit;
  18
+  vertical-align: baseline;
  19
+}
  20
+
  21
+body {
  22
+  line-height: 1;
  23
+  color: black;
  24
+  background: white;
  25
+}
  26
+
  27
+ol, ul {
  28
+  list-style: none;
  29
+}
  30
+
  31
+table {
  32
+  border-collapse: separate;
  33
+  border-spacing: 0;
  34
+  vertical-align: middle;
  35
+}
  36
+
  37
+caption, th, td {
  38
+  text-align: left;
  39
+  font-weight: normal;
  40
+  vertical-align: middle;
  41
+}
  42
+
  43
+q, blockquote {
  44
+  quotes: "" "";
  45
+}
  46
+q:before, q:after, blockquote:before, blockquote:after {
  47
+  content: "";
  48
+}
  49
+
  50
+a img {
  51
+  border: none;
  52
+}
  53
+
  54
+.font-helvetica, body {
  55
+  font-family: "Helvetica-Neue", Helvetica, Arial, sans-serif;
  56
+}
  57
+
  58
+.grid-clearfix, .grid-container, #header, #page, #footer, .nested-grid-container, .grid-block, .grid-full, #footer-content, .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, #branding, #page-sidebar, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16, #navigation, #page-body, .grid-17, .grid-18, .grid-19, .grid-20, .grid-21, .grid-22, .grid-23, .grid-24 {
  59
+  overflow: hidden;
  60
+  *zoom: 1;
  61
+}
  62
+
  63
+.grid-container, #header, #page, #footer {
  64
+  margin: 0 auto;
  65
+  width: 960px;
  66
+}
  67
+
  68
+.nested-grid-container {
  69
+  display: inline-block;
  70
+  margin-left: -5px;
  71
+  margin-right: -5px;
  72
+  width: auto;
  73
+}
  74
+
  75
+.grid-block, .grid-full, #footer-content, .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, #branding, #page-sidebar, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16, #navigation, #page-body, .grid-17, .grid-18, .grid-19, .grid-20, .grid-21, .grid-22, .grid-23, .grid-24 {
  76
+  display: inline;
  77
+  float: left;
  78
+  position: relative;
  79
+  margin: 0 5px;
  80
+}
  81
+
  82
+.grid-full, #footer-content {
  83
+  width: 950px;
  84
+}
  85
+
  86
+.grid-1 {
  87
+  width: 30px;
  88
+}
  89
+
  90
+.grid-2 {
  91
+  width: 70px;
  92
+}
  93
+
  94
+.grid-3 {
  95
+  width: 110px;
  96
+}
  97
+
  98
+.grid-4 {
  99
+  width: 150px;
  100
+}
  101
+
  102
+.grid-5 {
  103
+  width: 190px;
  104
+}
  105
+
  106
+.grid-6 {
  107
+  width: 230px;
  108
+}
  109
+
  110
+.grid-7 {
  111
+  width: 270px;
  112
+}
  113
+
  114
+.grid-8, #branding, #page-sidebar {
  115
+  width: 310px;
  116
+}
  117
+
  118
+.grid-9 {
  119
+  width: 350px;
  120
+}
  121
+
  122
+.grid-10 {
  123
+  width: 390px;
  124
+}
  125
+
  126
+.grid-11 {
  127
+  width: 430px;
  128
+}
  129
+
  130
+.grid-12 {
  131
+  width: 470px;
  132
+}
  133
+
  134
+.grid-13 {
  135
+  width: 510px;
  136
+}
  137
+
  138
+.grid-14 {
  139
+  width: 550px;
  140
+}
  141
+
  142
+.grid-15 {
  143
+  width: 590px;
  144
+}
  145
+
  146
+.grid-16, #navigation, #page-body {
  147
+  width: 630px;
  148
+}
  149
+
  150
+.grid-17 {
  151
+  width: 670px;
  152
+}
  153
+
  154
+.grid-18 {
  155
+  width: 710px;
  156
+}
  157
+
  158
+.grid-19 {
  159
+  width: 750px;
  160
+}
  161
+
  162
+.grid-20 {
  163
+  width: 790px;
  164
+}
  165
+
  166
+.grid-21 {
  167
+  width: 830px;
  168
+}
  169
+
  170
+.grid-22 {
  171
+  width: 870px;
  172
+}
  173
+
  174
+.grid-23 {
  175
+  width: 910px;
  176
+}
  177
+
  178
+.grid-24 {
  179
+  width: 950px;
  180
+}
  181
+
  182
+.grid-prefix-1 {
  183
+  padding-left: 40px;
  184
+}
  185
+
  186
+.grid-prefix-2 {
  187
+  padding-left: 80px;
  188
+}
  189
+
  190
+.grid-prefix-3 {
  191
+  padding-left: 120px;
  192
+}
  193
+
  194
+.grid-prefix-4 {
  195
+  padding-left: 160px;
  196
+}
  197
+
  198
+.grid-prefix-5 {
  199
+  padding-left: 200px;
  200
+}
  201
+
  202
+.grid-prefix-6 {
  203
+  padding-left: 240px;
  204
+}
  205
+
  206
+.grid-prefix-7 {
  207
+  padding-left: 280px;
  208
+}
  209
+
  210
+.grid-prefix-8 {
  211
+  padding-left: 320px;
  212
+}
  213
+
  214
+.grid-prefix-9 {
  215
+  padding-left: 360px;
  216
+}
  217
+
  218
+.grid-prefix-10 {
  219
+  padding-left: 400px;
  220
+}
  221
+
  222
+.grid-prefix-11 {
  223
+  padding-left: 440px;
  224
+}
  225
+
  226
+.grid-prefix-12 {
  227
+  padding-left: 480px;
  228
+}
  229
+
  230
+.grid-prefix-13 {
  231
+  padding-left: 520px;
  232
+}
  233
+
  234
+.grid-prefix-14 {
  235
+  padding-left: 560px;
  236
+}
  237
+
  238
+.grid-prefix-15 {
  239
+  padding-left: 600px;
  240
+}
  241
+
  242
+.grid-prefix-16 {
  243
+  padding-left: 640px;
  244
+}
  245
+
  246
+.grid-prefix-17 {
  247
+  padding-left: 680px;
  248
+}
  249
+
  250
+.grid-prefix-18 {
  251
+  padding-left: 720px;
  252
+}
  253
+
  254
+.grid-prefix-19 {
  255
+  padding-left: 760px;
  256
+}
  257
+
  258
+.grid-prefix-20 {
  259
+  padding-left: 800px;
  260
+}
  261
+
  262
+.grid-prefix-21 {
  263
+  padding-left: 840px;
  264
+}
  265
+
  266
+.grid-prefix-22 {
  267
+  padding-left: 880px;
  268
+}
  269
+
  270
+.grid-prefix-23 {
  271
+  padding-left: 920px;
  272
+}
  273
+
  274
+.grid-suffix-1 {
  275
+  padding-right: 40px;
  276
+}
  277
+
  278
+.grid-suffix-2 {
  279
+  padding-right: 80px;
  280
+}
  281
+
  282
+.grid-suffix-3 {
  283
+  padding-right: 120px;
  284
+}
  285
+
  286
+.grid-suffix-4 {
  287
+  padding-right: 160px;
  288
+}
  289
+
  290
+.grid-suffix-5 {
  291
+  padding-right: 200px;
  292
+}
  293
+
  294
+.grid-suffix-6 {
  295
+  padding-right: 240px;
  296
+}
  297
+
  298
+.grid-suffix-7 {
  299
+  padding-right: 280px;
  300
+}
  301
+
  302
+.grid-suffix-8 {
  303
+  padding-right: 320px;
  304
+}
  305
+
  306
+.grid-suffix-9 {
  307
+  padding-right: 360px;
  308
+}
  309
+
  310
+.grid-suffix-10 {
  311
+  padding-right: 400px;
  312
+}
  313
+
  314
+.grid-suffix-11 {
  315
+  padding-right: 440px;
  316
+}
  317
+
  318
+.grid-suffix-12 {
  319
+  padding-right: 480px;
  320
+}
  321
+
  322
+.grid-suffix-13 {
  323
+  padding-right: 520px;
  324
+}
  325
+
  326
+.grid-suffix-14 {
  327
+  padding-right: 560px;
  328
+}
  329
+
  330
+.grid-suffix-15 {
  331
+  padding-right: 600px;
  332
+}
  333
+
  334
+.grid-suffix-16 {
  335
+  padding-right: 640px;
  336
+}
  337
+
  338
+.grid-suffix-17 {
  339
+  padding-right: 680px;
  340
+}
  341
+
  342
+.grid-suffix-18 {
  343
+  padding-right: 720px;
  344
+}
  345
+
  346
+.grid-suffix-19 {
  347
+  padding-right: 760px;
  348
+}
  349
+
  350
+.grid-suffix-20 {
  351
+  padding-right: 800px;
  352
+}
  353
+
  354
+.grid-suffix-21 {
  355
+  padding-right: 840px;
  356
+}
  357
+
  358
+.grid-suffix-22 {
  359
+  padding-right: 880px;
  360
+}
  361
+
  362
+.grid-suffix-23 {
  363
+  padding-right: 920px;
  364
+}
  365
+
  366
+.grid-push-1 {
  367
+  left: 40px;
  368
+}
  369
+
  370
+.grid-push-2 {
  371
+  left: 80px;
  372
+}
  373
+
  374
+.grid-push-3 {
  375
+  left: 120px;
  376
+}
  377
+
  378
+.grid-push-4 {
  379
+  left: 160px;
  380
+}
  381
+
  382
+.grid-push-5 {
  383
+  left: 200px;
  384
+}
  385
+
  386
+.grid-push-6 {
  387
+  left: 240px;
  388
+}
  389
+
  390
+.grid-push-7 {
  391
+  left: 280px;
  392
+}
  393
+
  394
+.grid-push-8 {
  395
+  left: 320px;
  396
+}
  397
+
  398
+.grid-push-9 {
  399
+  left: 360px;
  400
+}
  401
+
  402
+.grid-push-10 {
  403
+  left: 400px;
  404
+}
  405
+
  406
+.grid-push-11 {
  407
+  left: 440px;
  408
+}
  409
+
  410
+.grid-push-12 {
  411
+  left: 480px;
  412
+}
  413
+
  414
+.grid-push-13 {
  415
+  left: 520px;
  416
+}
  417
+
  418
+.grid-push-14 {
  419
+  left: 560px;
  420
+}
  421
+
  422
+.grid-push-15 {
  423
+  left: 600px;
  424
+}
  425
+
  426
+.grid-push-16 {
  427
+  left: 640px;
  428
+}
  429
+
  430
+.grid-push-17 {
  431
+  left: 680px;
  432
+}
  433
+
  434
+.grid-push-18 {
  435
+  left: 720px;
  436
+}
  437
+
  438
+.grid-push-19 {
  439
+  left: 760px;
  440
+}
  441
+
  442
+.grid-push-20 {
  443
+  left: 800px;
  444
+}
  445
+
  446
+.grid-push-21 {
  447
+  left: 840px;
  448
+}
  449
+
  450
+.grid-push-22 {
  451
+  left: 880px;
  452
+}
  453
+
  454
+.grid-push-23 {
  455
+  left: 920px;
  456
+}
  457
+
  458
+.grid-pull-1 {
  459
+  left: -20px;
  460
+}
  461
+
  462
+.grid-pull-2 {
  463
+  left: -40px;
  464
+}
  465
+
  466
+.grid-pull-3 {
  467
+  left: -60px;
  468
+}
  469
+
  470
+.grid-pull-4 {
  471
+  left: -80px;
  472
+}
  473
+
  474
+.grid-pull-5 {
  475
+  left: -100px;
  476
+}
  477
+
  478
+.grid-pull-6 {
  479
+  left: -120px;
  480
+}
  481
+
  482
+.grid-pull-7 {
  483
+  left: -140px;
  484
+}
  485
+
  486
+.grid-pull-8 {
  487
+  left: -160px;
  488
+}
  489
+
  490
+.grid-pull-9 {
  491
+  left: -180px;
  492
+}
  493
+
  494
+.grid-pull-10 {
  495
+  left: -200px;
  496
+}
  497
+
  498
+.grid-pull-11 {
  499
+  left: -220px;
  500
+}
  501
+
  502
+.grid-pull-12 {
  503
+  left: -240px;
  504
+}
  505
+
  506
+.grid-pull-13 {
  507
+  left: -260px;
  508
+}
  509
+
  510
+.grid-pull-14 {
  511
+  left: -280px;
  512
+}
  513
+
  514
+.grid-pull-15 {
  515
+  left: -300px;
  516
+}
  517
+
  518
+.grid-pull-16 {
  519
+  left: -320px;
  520
+}
  521
+
  522
+.grid-pull-17 {
  523
+  left: -340px;
  524
+}
  525
+
  526
+.grid-pull-18 {
  527
+  left: -360px;
  528
+}
  529
+
  530
+.grid-pull-19 {
  531
+  left: -380px;
  532
+}
  533
+
  534
+.grid-pull-20 {
  535
+  left: -400px;
  536
+}
  537
+
  538
+.grid-pull-21 {
  539
+  left: -420px;
  540
+}
  541
+
  542
+.grid-pull-22 {
  543
+  left: -440px;
  544
+}
  545
+
  546
+.grid-pull-23 {
  547
+  left: -460px;
  548
+}
  549
+
  550
+#grid {
  551
+  display: none;
  552
+  position: fixed;
  553
+  top: 0;
  554
+  left: 50%;
  555
+  background: url(/grid-coordinates/images/grid-24.png) repeat-y 50% 0;
  556
+  height: 100%;
  557
+  margin: 0 auto;
  558
+  margin-left: -480px;
  559
+  width: 960px;
  560
+}
  561
+
  562
+.toggle-grid {
  563
+  -moz-transition-property: color;
  564
+  -webkit-transition-property: color;
  565
+  -o-transition-property: color;
  566
+  transition-property: color;
  567
+  -moz-transition-duration: 0.5s;
  568
+  -webkit-transition-duration: 0.5s;
  569
+  -o-transition-duration: 0.5s;
  570
+  transition-duration: 0.5s;
  571
+  position: absolute;
  572
+  top: 10px;
  573
+  right: 10px;
  574
+  color: white;
  575
+  display: block;
  576
+  background: url(/grid-coordinates/images/toggle-grid.png) no-repeat right 50%;
  577
+  font-size: 12px;
  578
+  line-height: 16px;
  579
+  padding-right: 22px;
  580
+  text-decoration: none;
  581
+}
  582
+.toggle-grid:hover {
  583
+  color: #999999;
  584
+}
  585
+.toggle-grid .hide {
  586
+  display: none;
  587
+}
  588
+
  589
+body {
  590
+  background: white;
  591
+}
  592
+
  593
+#branding, #navigation, #page-body, #page-sidebar, #footer-content {
  594
+  -moz-transition-property: background;
  595
+  -webkit-transition-property: background;
  596
+  -o-transition-property: background;
  597
+  transition-property: background;
  598
+  -moz-transition-duration: 0.75s;
  599
+  -webkit-transition-duration: 0.75s;
  600
+  -o-transition-duration: 0.75s;
  601
+  transition-duration: 0.75s;
  602
+  background: #e7e7e7;
  603
+  color: #999999;
  604
+  font-size: 13px;
  605
+  text-align: center;
  606
+}
  607
+#branding:hover, #navigation:hover, #page-body:hover, #page-sidebar:hover, #footer-content:hover {
  608
+  background: #dddddd;
  609
+}
  610
+
  611
+#branding, #navigation {
  612
+  line-height: 50px;
  613
+}
  614
+
  615
+#page-body, #page-sidebar {
  616
+  line-height: 600px;
  617
+}
  618
+
  619
+#footer-content {
  620
+  line-height: 50px;
  621
+}
  622
+
  623
+#header, #page {
  624
+  margin-bottom: 10px;
  625
+}
  626
+
  627
+#header {
  628
+  margin-top: 10px;
  629
+}
636  themes/grid-coordinates/public/grid-coordinates/css/demo-classes-overflow-true.css
... ...
@@ -0,0 +1,636 @@
  1
+@charset "UTF-8";
  2
+html, body, div, span, applet, object, iframe,
  3
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  4
+a, abbr, acronym, address, big, cite, code,
  5
+del, dfn, em, font, img, ins, kbd, q, s, samp,
  6
+small, strike, strong, sub, sup, tt, var,
  7
+dl, dt, dd, ol, ul, li,
  8
+fieldset, form, label, legend,
  9
+table, caption, tbody, tfoot, thead, tr, th, td {
  10
+  margin: 0;
  11
+  padding: 0;
  12
+  border: 0;
  13
+  outline: 0;
  14
+  font-weight: inherit;
  15
+  font-style: inherit;
  16
+  font-size: 100%;
  17
+  font-family: inherit;
  18
+  vertical-align: baseline;
  19
+}
  20
+
  21
+body {
  22
+  line-height: 1;
  23
+  color: black;
  24
+  background: white;
  25
+}
  26
+
  27
+ol, ul {
  28
+  list-style: none;
  29
+}
  30
+
  31
+table {
  32
+  border-collapse: separate;
  33
+  border-spacing: 0;
  34
+  vertical-align: middle;
  35
+}
  36
+
  37
+caption, th, td {
  38
+  text-align: left;
  39
+  font-weight: normal;
  40
+  vertical-align: middle;
  41
+}
  42
+
  43
+q, blockquote {
  44
+  quotes: "" "";
  45
+}
  46
+q:before, q:after, blockquote:before, blockquote:after {
  47
+  content: "";
  48
+}
  49
+
  50
+a img {
  51
+  border: none;
  52
+}
  53
+
  54
+.font-helvetica, body {
  55
+  font-family: "Helvetica-Neue", Helvetica, Arial, sans-serif;
  56
+}
  57
+
  58
+.grid-pie-clearfix, .grid-container, .nested-grid-container, .grid-block, .grid-full, .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17, .grid-18, .grid-19, .grid-20, .grid-21, .grid-22, .grid-23, .grid-24 {
  59
+  *zoom: 1;
  60
+}
  61
+.grid-pie-clearfix:after, .grid-container:after, .nested-grid-container:after, .grid-block:after, .grid-full:after, .grid-1:after, .grid-2:after, .grid-3:after, .grid-4:after, .grid-5:after, .grid-6:after, .grid-7:after, .grid-8:after, .grid-9:after, .grid-10:after, .grid-11:after, .grid-12:after, .grid-13:after, .grid-14:after, .grid-15:after, .grid-16:after, .grid-17:after, .grid-18:after, .grid-19:after, .grid-20:after, .grid-21:after, .grid-22:after, .grid-23:after, .grid-24:after {
  62
+  content: "\0020";
  63
+  display: block;
  64
+  height: 0;
  65
+  clear: both;
  66
+  overflow: hidden;
  67
+  visibility: hidden;
  68
+}
  69
+
  70
+.grid-container {
  71
+  margin: 0 auto;
  72
+  width: 960px;
  73
+}
  74
+
  75
+.nested-grid-container {
  76
+  display: inline-block;
  77
+  margin-left: -5px;
  78
+  margin-right: -5px;
  79
+  width: auto;
  80
+}
  81
+
  82
+.grid-block, .grid-full, .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17, .grid-18, .grid-19, .grid-20, .grid-21, .grid-22, .grid-23, .grid-24 {
  83
+  display: inline;
  84
+  float: left;
  85
+  position: relative;
  86
+  margin: 0 5px;
  87
+}
  88
+
  89
+.grid-full {
  90
+  width: 950px;
  91
+}
  92
+
  93
+.grid-1 {
  94
+  width: 30px;
  95
+}
  96
+
  97
+.grid-2 {
  98
+  width: 70px;
  99
+}
  100
+
  101
+.grid-3 {
  102
+  width: 110px;
  103
+}
  104
+
  105
+.grid-4 {
  106
+  width: 150px;
  107
+}
  108
+
  109
+.grid-5 {
  110
+  width: 190px;
  111
+}
  112
+
  113
+.grid-6 {
  114
+  width: 230px;
  115
+}
  116
+
  117
+.grid-7 {
  118
+  width: 270px;
  119
+}
  120
+
  121
+.grid-8 {
  122
+  width: 310px;
  123
+}
  124
+
  125
+.grid-9 {
  126
+  width: 350px;
  127
+}
  128
+
  129
+.grid-10 {
  130
+  width: 390px;
  131
+}
  132
+
  133
+.grid-11 {
  134
+  width: 430px;
  135
+}
  136
+
  137
+.grid-12 {
  138
+  width: 470px;
  139
+}
  140
+
  141
+.grid-13 {
  142
+  width: 510px;
  143
+}
  144
+
  145
+.grid-14 {
  146
+  width: 550px;
  147
+}
  148
+
  149
+.grid-15 {
  150
+  width: 590px;
  151
+}
  152
+
  153
+.grid-16 {
  154
+  width: 630px;
  155
+}
  156
+
  157
+.grid-17 {
  158
+  width: 670px;
  159
+}
  160
+
  161
+.grid-18 {
  162
+  width: 710px;
  163
+}
  164
+
  165
+.grid-19 {
  166
+  width: 750px;
  167
+}
  168
+
  169
+.grid-20 {
  170
+  width: 790px;
  171
+}
  172
+
  173
+.grid-21 {
  174
+  width: 830px;
  175
+}
  176
+
  177
+.grid-22 {
  178
+  width: 870px;
  179
+}
  180
+
  181
+.grid-23 {
  182
+  width: 910px;
  183
+}
  184
+
  185
+.grid-24 {
  186
+  width: 950px;
  187
+}
  188
+
  189
+.grid-prefix-1 {
  190
+  padding-left: 40px;
  191
+}
  192
+
  193
+.grid-prefix-2 {
  194
+  padding-left: 80px;
  195
+}
  196
+
  197
+.grid-prefix-3 {
  198
+  padding-left: 120px;
  199
+}
  200
+
  201
+.grid-prefix-4 {
  202
+  padding-left: 160px;
  203
+}
  204
+
  205
+.grid-prefix-5 {
  206
+  padding-left: 200px;
  207
+}
  208
+
  209
+.grid-prefix-6 {
  210
+  padding-left: 240px;
  211
+}
  212
+
  213
+.grid-prefix-7 {
  214
+  padding-left: 280px;
  215
+}
  216
+
  217
+.grid-prefix-8 {
  218
+  padding-left: 320px;
  219
+}
  220
+
  221
+.grid-prefix-9 {
  222
+  padding-left: 360px;
  223
+}
  224
+
  225
+.grid-prefix-10 {
  226
+  padding-left: 400px;
  227
+}
  228
+
  229
+.grid-prefix-11 {
  230
+  padding-left: 440px;
  231
+}
  232
+
  233
+.grid-prefix-12 {
  234
+  padding-left: 480px;
  235
+}
  236
+
  237
+.grid-prefix-13 {
  238
+  padding-left: 520px;
  239
+}
  240
+
  241
+.grid-prefix-14 {
  242
+  padding-left: 560px;
  243
+}
  244
+
  245
+.grid-prefix-15 {
  246
+  padding-left: 600px;
  247
+}
  248
+
  249
+.grid-prefix-16 {
  250
+  padding-left: 640px;
  251
+}
  252
+
  253
+.grid-prefix-17 {
  254
+  padding-left: 680px;
  255
+}
  256
+
  257
+.grid-prefix-18 {
  258
+  padding-left: 720px;
  259
+}
  260
+
  261
+.grid-prefix-19 {
  262
+  padding-left: 760px;
  263
+}
  264
+
  265
+.grid-prefix-20 {
  266
+  padding-left: 800px;
  267
+}
  268
+
  269
+.grid-prefix-21 {
  270
+  padding-left: 840px;
  271
+}
  272
+
  273
+.grid-prefix-22 {
  274
+  padding-left: 880px;
  275
+}
  276
+
  277
+.grid-prefix-23 {
  278
+  padding-left: 920px;
  279
+}
  280
+
  281
+.grid-suffix-1 {
  282
+  padding-right: 40px;
  283
+}
  284
+
  285
+.grid-suffix-2 {
  286
+  padding-right: 80px;
  287
+}
  288
+
  289
+.grid-suffix-3 {
  290
+  padding-right: 120px;
  291
+}
  292
+
  293
+.grid-suffix-4 {
  294
+  padding-right: 160px;
  295
+}
  296
+
  297
+.grid-suffix-5 {
  298
+  padding-right: 200px;
  299
+}
  300
+
  301
+.grid-suffix-6 {
  302
+  padding-right: 240px;
  303
+}
  304
+
  305
+.grid-suffix-7 {
  306
+  padding-right: 280px;
  307
+}
  308
+
  309
+.grid-suffix-8 {
  310
+  padding-right: 320px;
  311
+}
  312
+
  313
+.grid-suffix-9 {
  314
+  padding-right: 360px;
  315
+}
  316
+
  317
+.grid-suffix-10 {
  318
+  padding-right: 400px;
  319
+}
  320
+
  321
+.grid-suffix-11 {
  322
+  padding-right: 440px;
  323
+}
  324
+
  325
+.grid-suffix-12 {
  326
+  padding-right: 480px;
  327
+}
  328
+
  329
+.grid-suffix-13 {
  330
+  padding-right: 520px;
  331
+}
  332
+
  333
+.grid-suffix-14 {
  334
+  padding-right: 560px;
  335
+}
  336
+
  337
+.grid-suffix-15 {
  338
+  padding-right: 600px;
  339
+}
  340
+