trio 1.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. checksums.yaml +7 -0
  2. data/.DS_Store +0 -0
  3. data/.gitignore +2 -0
  4. data/Gemfile +3 -0
  5. data/README.md +49 -0
  6. data/bin/trio +8 -0
  7. data/lib/trio/cli.rb +127 -0
  8. data/lib/trio/framework/_images/icons/compass-icon.png +0 -0
  9. data/lib/trio/framework/_sass/fonts/_fonts.scss +0 -0
  10. data/lib/trio/framework/_sass/global/_global.scss +16 -0
  11. data/lib/trio/framework/_sass/global/_variables.scss +111 -0
  12. data/lib/trio/framework/_sass/ie.scss +39 -0
  13. data/lib/trio/framework/_sass/modules/.gitkeep +0 -0
  14. data/lib/trio/framework/_sass/pages/_home.scss +2 -0
  15. data/lib/trio/framework/_sass/partials/_sidebar.scss +0 -0
  16. data/lib/trio/framework/_sass/print.scss +3 -0
  17. data/lib/trio/framework/_sass/screen.scss +50 -0
  18. data/lib/trio/framework/_sass/trio/PIE.htc +96 -0
  19. data/lib/trio/framework/_sass/trio/PIE.php +19 -0
  20. data/lib/trio/framework/_sass/trio/_trio.scss +555 -0
  21. data/lib/trio/framework/_sass/trio/_typography.scss +156 -0
  22. data/lib/trio/framework/_sass/trio/_variables.scss +111 -0
  23. data/lib/trio/framework/_sass/trio/boxsizing.htc +399 -0
  24. data/lib/trio/framework/_sass/vendors/_flexslider.scss +118 -0
  25. data/lib/trio/framework/_scripts/browser/modernizr.custom.85380.js +4 -0
  26. data/lib/trio/framework/_scripts/browser/respond.min.js +6 -0
  27. data/lib/trio/framework/_scripts/browser/script-ie.js +2 -0
  28. data/lib/trio/framework/_scripts/modules/.gitkeep +0 -0
  29. data/lib/trio/framework/_scripts/pages/.gitkeep +0 -0
  30. data/lib/trio/framework/_scripts/pages/home.js +4 -0
  31. data/lib/trio/framework/_scripts/script.js +6 -0
  32. data/lib/trio/framework/_scripts/vendors/.gitkeep +0 -0
  33. data/lib/trio/helpers.rb +29 -0
  34. data/lib/trio/project/bower.json +27 -0
  35. data/lib/trio/project/gulpfile.js +62 -0
  36. data/lib/trio/project/package.json +39 -0
  37. data/lib/trio/version.rb +3 -0
  38. data/trio.gemspec +55 -0
  39. metadata +138 -0
@@ -0,0 +1,555 @@
1
+ @import "variables";
2
+ /*
3
+ HTML5 Reset ::style.css - via https://github.com/murtaugh/HTML5-Reset/blob/master/_/css/style.css
4
+ -------------------------------------------------------------------------------
5
+
6
+ We have learned much from/been inspired by/taken code where offered from:Eric Meyer ::http://ericmeyer.com
7
+ HTML5 Doctor ::http://html5doctor.com
8
+ and the HTML5 Boilerplate ::http://html5boilerplate.com
9
+
10
+ -------------------------------------------------------------------------------
11
+ Table of Contents
12
+ -------------------------------------------------------------------------------
13
+
14
+ 01: Resets - line :16
15
+ 02: Mixins - line :326
16
+ 03: Squishygrid - line :461
17
+
18
+ -------------------------------------------------------------------------------
19
+ Resets: Let's default this puppy out
20
+ -------------------------------------------------------------------------------
21
+ */
22
+
23
+ html {
24
+ margin: 0;
25
+ padding: 0;
26
+ border: 0;
27
+ outline: 0;
28
+ font-size: 100%;
29
+ font-style: normal;
30
+ font-weight: normal;
31
+ vertical-align: baseline;
32
+ background: transparent;
33
+ }
34
+
35
+ body {
36
+ margin: 0;
37
+ padding: 0;
38
+ border: 0;
39
+ outline: 0;
40
+ font-size: 100%;
41
+ font-style: normal;
42
+ font-weight: normal;
43
+ vertical-align: baseline;
44
+ background: transparent;
45
+ div {
46
+ margin: 0;
47
+ padding: 0;
48
+ border: 0;
49
+ outline: 0;
50
+ font-size: 100%;
51
+ font-style: normal;
52
+ font-weight: normal;
53
+ vertical-align: baseline;
54
+ background: transparent;
55
+ }
56
+ }
57
+
58
+ span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
59
+ margin: 0;
60
+ padding: 0;
61
+ border: 0;
62
+ outline: 0;
63
+ font-size: 100%;
64
+ font-style: normal;
65
+ font-weight: normal;
66
+ vertical-align: baseline;
67
+ background: transparent;
68
+ }
69
+
70
+ article, aside, figure, footer, header, hgroup, img, nav, section {
71
+ display: block;
72
+ }
73
+
74
+ /* Responsive images and other embedded objects
75
+ Note:keeping IMG here will cause problems if you're using foreground images as sprites.
76
+ If this default setting for images is causing issues,you might want to replace it with a .responsive class instead. */
77
+
78
+ img, object, embed {
79
+ max-width: 100%;
80
+ height: auto;
81
+ }
82
+
83
+ /* force a vertical scrollbar to prevent a jumpy page */
84
+
85
+ html {
86
+ overflow-y: scroll;
87
+ }
88
+
89
+ /* we use a lot of ULs that aren't bulleted.
90
+ don't forget to restore the bullets within content. */
91
+
92
+ ul {
93
+ list-style: none;
94
+ }
95
+
96
+ blockquote, q {
97
+ quotes: none;
98
+ }
99
+
100
+ blockquote {
101
+ &:before, &:after {
102
+ content: '';
103
+ content: none;
104
+ }
105
+ }
106
+
107
+ q {
108
+ &:before, &:after {
109
+ content: '';
110
+ content: none;
111
+ }
112
+ }
113
+
114
+ a {
115
+ margin: 0;
116
+ padding: 0;
117
+ font-size: 100%;
118
+ vertical-align: baseline;
119
+ background: transparent;
120
+ }
121
+
122
+ del {
123
+ text-decoration: line-through;
124
+ }
125
+
126
+ abbr[title], dfn[title] {
127
+ border-bottom: 1px dotted #000;
128
+ cursor: help;
129
+ }
130
+
131
+ /* tables still need cellspacing="0" in the markup */
132
+
133
+ table {
134
+ border-collapse: collapse;
135
+ border-spacing: 0;
136
+ }
137
+
138
+ th {
139
+ font-weight: bold;
140
+ vertical-align: bottom;
141
+ }
142
+
143
+ td {
144
+ font-weight: normal;
145
+ vertical-align: top;
146
+ }
147
+
148
+ hr {
149
+ display: block;
150
+ height: 1px;
151
+ border: 0;
152
+ border-top: 1px solid #ccc;
153
+ margin: 1em 0;
154
+ padding: 0;
155
+ }
156
+
157
+ input, select {
158
+ vertical-align: middle;
159
+ }
160
+
161
+ pre {
162
+ white-space: pre;
163
+ /* CSS2 */
164
+ white-space: pre-wrap;
165
+ /* CSS 2.1 */
166
+ white-space: pre-line;
167
+ /* CSS 3 (and 2.1 as well,actually) */
168
+ word-wrap: break-word;
169
+ /* IE */
170
+ }
171
+
172
+ input {
173
+ &[type="radio"] {
174
+ vertical-align: text-bottom;
175
+ }
176
+ &[type="checkbox"] {
177
+ vertical-align: bottom;
178
+ *vertical-align: baseline;
179
+ }
180
+ }
181
+
182
+ textarea, input, select, button {
183
+ outline: none;
184
+ }
185
+
186
+ .ie6 input {
187
+ vertical-align: text-bottom;
188
+ }
189
+
190
+ select, input, textarea {
191
+ font: 99% sans-serif;
192
+ }
193
+
194
+ table {
195
+ font-size: inherit;
196
+ font: 100%;
197
+ }
198
+
199
+ /* Accessible focus treatment
200
+ people.opera.com/patrickl/experiments/keyboard/test */
201
+
202
+ a {
203
+ &:hover, &:active {
204
+ outline: none;
205
+ }
206
+ }
207
+
208
+ small {
209
+ font-size: 85%;
210
+ }
211
+
212
+ em, i {
213
+ font-style: italic;
214
+ }
215
+
216
+ strong, th, b {
217
+ font-weight: bold;
218
+ }
219
+
220
+ td {
221
+ vertical-align: top;
222
+ img {
223
+ vertical-align: top;
224
+ }
225
+ }
226
+
227
+ /* Make sure sup and sub don't screw with your line-heights
228
+ gist.github.com/413930 */
229
+
230
+ sub {
231
+ font-size: 60%;
232
+ line-height: 0;
233
+ position: relative;
234
+ }
235
+
236
+ sup {
237
+ font-size: 60%;
238
+ line-height: 0;
239
+ position: relative;
240
+ top: -0.75em;
241
+ }
242
+
243
+ sub {
244
+ bottom: -0.5em;
245
+ }
246
+
247
+ /* standardize any monospaced elements */
248
+
249
+ pre, code, kbd, samp {
250
+ font-family: monospace,sans-serif;
251
+ }
252
+
253
+ /* hand cursor on clickable elements */
254
+
255
+ .clickable, label {
256
+ cursor: pointer;
257
+ }
258
+
259
+ input {
260
+ &[type=button], &[type=submit] {
261
+ cursor: pointer;
262
+ }
263
+ }
264
+
265
+ button {
266
+ cursor: pointer;
267
+ margin: 0;
268
+ }
269
+
270
+ /* Webkit browsers add a 2px margin outside the chrome of form elements */
271
+
272
+ input, select, textarea {
273
+ margin: 0;
274
+ }
275
+
276
+ /* make buttons play nice in IE */
277
+
278
+ button {
279
+ width: auto;
280
+ overflow: visible;
281
+ }
282
+
283
+ /* scale images in IE7 more attractively */
284
+
285
+ .lt-ie8 img {
286
+ -ms-interpolation-mode: bicubic;
287
+ }
288
+
289
+ /* prevent BG image flicker upon hover */
290
+
291
+ .lt-ie7 html {
292
+ filter: expression(document.execCommand("BackgroundImageCache",false,true));
293
+ }
294
+
295
+ /* let's clear some floats */
296
+
297
+ .clearfix {
298
+ &:before {
299
+ content: "\0020";
300
+ display: block;
301
+ height: 0;
302
+ overflow: hidden;
303
+ }
304
+ &:after {
305
+ content: "\0020";
306
+ display: block;
307
+ height: 0;
308
+ overflow: hidden;
309
+ clear: both;
310
+ }
311
+ zoom: 1;
312
+ }
313
+ /* gotta use border-box */
314
+
315
+ * { box-sizing: border-box; }
316
+
317
+ // /* iOS fixes */
318
+ html { -webkit-text-size-adjust: none; }
319
+ input[type=submit] { -webkit-appearance: none; -moz-appearance: none; }
320
+
321
+ /* Media Queries for determining javascript events, via http://adactio.com/journal/5429/ */
322
+ body:after { content: 'mobile'; position: fixed; height: 0; visibility: hidden; z-index: -999999}
323
+ @media only screen and (min-width: $width-tablet) and (max-width: $width-desktop - 1px) {
324
+ body:after { content: 'tablet'; position: fixed; height: 0; visibility: hidden; z-index: -999999}
325
+ }
326
+ @media only screen and (min-width: $width-desktop) {
327
+ body:after { content: 'desktop'; position: fixed; height: 0; visibility: hidden; z-index: -999999}
328
+ }
329
+
330
+ /*
331
+ -------------------------------------------------------------------------------
332
+ Mixins
333
+ -------------------------------------------------------------------------------
334
+ */
335
+
336
+ // media query
337
+ @mixin at($min: null, $max: null, $unit: null) {
338
+
339
+ @if $unit == null {
340
+ $unit: em;
341
+ }
342
+ @if $max != null {
343
+ @media (min-width: $min / 16 + $unit) and (max-width: $max /16 + $unit) { @content; }
344
+ }
345
+ @else {
346
+ $unit: em;
347
+ @media (min-width: ($min / 16) + $unit) { @content; }
348
+ }
349
+ }
350
+
351
+ @mixin mobile($operator: eq) {
352
+
353
+ @if $operator == gt {
354
+ @media (min-width: $width-tablet + 'px') { @content; }
355
+ }
356
+ @else if ( $operator == eq ) {
357
+ @media (max-width: $width-tablet - 1 + 'px'){ @content; }
358
+ }
359
+ }
360
+
361
+ @mixin tablet($operator: eq) {
362
+
363
+ @if ( $operator == gt ) {
364
+ @media (min-width: $width-desktop + 'px'){ @content; }
365
+ }
366
+ @else if ( $operator == lt ) {
367
+ @media (max-width: $width-tablet - 1 + 'px'){ @content; }
368
+ }
369
+ @else if ( $operator == eq ) {
370
+ @media (min-width: $width-tablet + 'px') and (max-width: $width-desktop - 1 + 'px') { @content; }
371
+ }
372
+ @else if ( $operator == ge ) {
373
+ @media (min-width: $width-tablet + 'px'){ @content; }
374
+ }
375
+ @else if ( $operator == le ) {
376
+ @media (max-width: $width-tablet - 1 + 'px'){ @content; }
377
+ }
378
+ }
379
+
380
+ @mixin desktop($operator: eq) {
381
+
382
+ @if ( $operator == lt ) {
383
+ @media (max-width: $width-desktop - 1 + 'px'){ @content; }
384
+ }
385
+ @else if ( $operator == eq ) {
386
+ @media (min-width: $width-desktop + 'px') { @content; }
387
+ }
388
+ }
389
+
390
+ @mixin font-rem($size) {
391
+ font-size: $size + px;
392
+ font-size: ($size / 10) + rem;
393
+ }
394
+ @mixin font-em($size){
395
+ font-size: $size + px;
396
+ font-size: ($size / 1.6)/ 10 + em;
397
+ }
398
+
399
+ // input placeholers
400
+ @mixin input-placeholder() {
401
+ ::-webkit-input-placeholder { @content; }
402
+ :-moz-placeholder { @content; }
403
+ ::-moz-placeholder { @content; }
404
+ :-ms-input-placeholder { @content; }
405
+ }
406
+
407
+ // custom text selection treatment, developed from http://stackoverflow.com/a/10372599/136018
408
+ @mixin selection($color, $background) {
409
+ $prefixes: ("-webkit-","-moz-", "-o-", "");
410
+ @each $prefix in $prefixes {
411
+ ::#{$prefix}selection {
412
+ color: $color;
413
+ background: $background;
414
+ text-shadow:none; // remove any text shadows:twitter.com/miketaylr/status/12228805301)
415
+ }
416
+ }
417
+ /* j.mp/webkit-tap-highlight-color */
418
+ a:link{-webkit-tap-highlight-color:$background;}
419
+ ins{background-color:$background;color:$color;text-decoration:none;}
420
+ }
421
+
422
+ // control font-smoothing
423
+ @mixin font-smoothing($value: on) {
424
+ @if $value == on {
425
+ -webkit-font-smoothing: antialiased;
426
+ -moz-osx-font-smoothing: grayscale;
427
+ }
428
+ @else {
429
+ -webkit-font-smoothing: subpixel-antialiased;
430
+ -moz-osx-font-smoothing: auto;
431
+ }
432
+ }
433
+
434
+ // inline-block the right way
435
+ @mixin inline-block($percent: auto) {
436
+ display: inline-block;
437
+ width: $percent;
438
+ padding-right: 2%;
439
+ box-sizing: border-box;
440
+ vertical-align: top;
441
+ zoom: 1;
442
+
443
+ .lt-ie8 & {
444
+ display: inline;
445
+ }
446
+
447
+ &.last {
448
+ padding-right: 0;
449
+ }
450
+ }
451
+
452
+ // remove ul styling
453
+ @mixin ul-reset {
454
+ list-style: none;
455
+ margin: 0;
456
+ padding-bottom: 0;
457
+ }
458
+
459
+ @mixin areas-text-style-nav {
460
+ font-size: .875em;
461
+ text-transform: uppercase;
462
+ letter-spacing: .15em;
463
+ }
464
+
465
+ @mixin hyphenate {
466
+ -ms-word-break: break-all;
467
+ word-break: break-all;
468
+ // Non standard for webkit
469
+ word-break: break-word;
470
+ -webkit-hyphens: auto;
471
+ -moz-hyphens: auto;
472
+ hyphens: auto;
473
+ }
474
+
475
+ @mixin trans-fade-hidden {
476
+ @include transition(opacity $speed linear 0ms, visibility $speed linear 0ms);
477
+ visibility: hidden;
478
+ opacity: 0;
479
+ }
480
+
481
+ @mixin trans-fade-visible {
482
+ visibility: visible;
483
+ opacity: 1;
484
+ }
485
+ .no-mobile {
486
+ display: none;
487
+ @include at(768) {
488
+ display: inherit;
489
+ }
490
+ }
491
+ .no-tablet {
492
+ display: none;
493
+ @include at($width-desktop) {
494
+ display: inherit;
495
+ }
496
+ }
497
+
498
+ /* -------------------------------------------------
499
+ ** Squishygrid Sass Mixins
500
+ ** ---------------------------------------------- */
501
+
502
+ // Generated at http://squishygrid.com
503
+
504
+ $span : 12 !default;
505
+ $columns: 12 !default;
506
+ $gutter : 2.5 !default;
507
+ $at : 420 !default;
508
+
509
+ @mixin grid($gutter: $gutter) {
510
+
511
+ @if $gutter == 0 {
512
+ width: 100%;
513
+ margin-left: 0;
514
+ }
515
+ @else {
516
+ width: 100 + $gutter * 1%;
517
+ margin-left: -$gutter * 1%;
518
+ > * {
519
+ margin-left: $gutter * 1%;
520
+ }
521
+ }
522
+ }
523
+
524
+ @mixin span($span: $span, $columns: $columns, $gutter: $gutter, $at: $at) {
525
+
526
+ display: inline-block;
527
+ vertical-align: top;
528
+ *zoom: 1;
529
+ overflow: hidden;
530
+ *overflow: visible;
531
+ width: 100 - $gutter * 1%;
532
+ margin-right: -.273em;
533
+
534
+ @media (min-width: ($at / 16) + em) {
535
+ @if $gutter == 0 {
536
+ width: $span * (100.0% / $columns);
537
+ margin-left: 0;
538
+ }
539
+ @else {
540
+ width: (100 - ($columns * ($gutter * 1%))) / $columns * $span + (($span - 1) * ($gutter * 1%));
541
+ margin-left: ($gutter * 1%);
542
+ }
543
+ }
544
+ }
545
+
546
+ @mixin offset($offset: 0, $columns: $columns, $gutter: $gutter, $at: $at) {
547
+
548
+ margin-left: 0;
549
+
550
+ @media (min-width: ($at / 16) + em) {
551
+ margin-left: (100.0 / $columns) * $offset + ($gutter * 1%);
552
+ }
553
+ }
554
+
555
+ @import "typography";
@@ -0,0 +1,156 @@
1
+ * {
2
+ @include selection($color-selection, $color-selection-backgound);
3
+ }
4
+
5
+ html {
6
+ font-size: $font-size-html;
7
+ line-height: $line-height-html;
8
+ }
9
+
10
+ body {
11
+ color: $color-body;
12
+ @include font-rem(16);
13
+ font-family: $font-body;
14
+ }
15
+
16
+ h1 {
17
+ color: $color-h1;
18
+ margin-bottom: $margin-bottom-h1;
19
+ font-family: $font-h1;
20
+ font-weight: $font-weight-h1;
21
+ line-height: $line-height-h1;
22
+ text-align: $text-align-h1;
23
+ text-transform: $text-transform-h1;
24
+ @include font-em($font-size-h1);
25
+ @include mobile() {
26
+ margin: 0 0 10px 0;
27
+ }
28
+
29
+ }
30
+ h2 {
31
+ margin-bottom: $margin-bottom-h2;
32
+ color: $color-h2;
33
+ font-family: $font-h2;
34
+ font-weight: $font-weight-h2;
35
+ line-height: $line-height-h2;
36
+ text-align: $text-align-h2;
37
+ text-transform: $text-transform-h2;
38
+ @include font-em($font-size-h2);
39
+ }
40
+ h3 {
41
+ margin-bottom: $margin-bottom-h3;
42
+ color: $color-h3;
43
+ font-family: $font-h3;
44
+ font-weight: $font-weight-h3;
45
+ line-height: $line-height-h3;
46
+ text-align: $text-align-h3;
47
+ text-transform: $text-transform-h3;
48
+ @include font-em($font-size-h3);
49
+ }
50
+ h4 {
51
+ margin-bottom: $margin-bottom-h4;
52
+ color: $color-h4;
53
+ font-family: $font-h4;
54
+ font-weight: $font-weight-h4;
55
+ line-height: $line-height-h4;
56
+ text-align: $text-align-h4;
57
+ text-transform: $text-transform-h4;
58
+ @include font-em($font-size-h4);
59
+ }
60
+
61
+ h5 {
62
+ margin-bottom: $margin-bottom-h5;
63
+ color: $color-h5;
64
+ font-family: $font-h5;
65
+ font-weight: $font-weight-h5;
66
+ line-height: $line-height-h5;
67
+ text-align: $text-align-h5;
68
+ text-transform: $text-transform-h5;
69
+ @include font-em($font-size-h5);
70
+ }
71
+
72
+ h6 {
73
+ margin-bottom: $margin-bottom-h6;
74
+ color: $color-h6;
75
+ font-family: $font-h5;
76
+ font-weight: $font-weight-h6;
77
+ text-align: $text-align-h6;
78
+ text-transform: $text-transform-h6;
79
+ @include font-em($font-size-h6);
80
+ }
81
+
82
+ p {
83
+ margin-bottom: $margin-bottom-p;
84
+ color: $color-p;
85
+ font-weight: $font-weight-p;
86
+ line-height: $line-height-p;
87
+ text-align: $text-align-p;
88
+ text-transform: $text-transform-p;
89
+ @include font-em($font-size-p);
90
+ @include font-smoothing();
91
+ }
92
+
93
+ a {
94
+ color: $color-a;
95
+ font-family: $font-a;
96
+ text-decoration: $text-decoration-a;
97
+ @include font-em($font-size-a);
98
+ &:link{
99
+ -webkit-tap-highlight-color: transparent;
100
+ }
101
+ ins{
102
+ background-color: transparent;
103
+ color: $color-a;
104
+ text-decoration: $text-decoration-a;
105
+ }
106
+ &:hover{
107
+ color: $color-a-hover;
108
+ }
109
+ }
110
+
111
+ ul {
112
+ list-style: $list-style-ul ;
113
+ margin: $margin-ul;
114
+ nav & { // emove styling for nav ul's
115
+ list-style: $list-style-nav-ul;
116
+ margin: $margin-ul-nav ;
117
+ a { text-decoration: $text-decoration-nav-a; }
118
+ }
119
+ }
120
+
121
+ ol {
122
+ list-style: $list-style-ol ;
123
+ margin: $margin-ol;
124
+ li { margin: $margin-ol-li; }
125
+ ol { list-style: $list-style-ol-ol ; }
126
+ }
127
+
128
+ blockquote {
129
+ margin-bottom: $margin-bottom-blockquote;
130
+ @include font-em($font-size-blockquote);
131
+ }
132
+
133
+ select,
134
+ input,
135
+ textarea{
136
+ color: $color-inputs;
137
+ }
138
+
139
+ pre {
140
+ line-height: 1.6;
141
+ @include font-em(16);
142
+ }
143
+
144
+ .#{$font-awesome-class} {
145
+ position: relative;
146
+ padding-left: 12%;
147
+ vertical-align: top;
148
+ @include font-smoothing();
149
+ &:before {
150
+ font-family: 'FontAwesome';
151
+ position: absolute;
152
+ left: 2%;
153
+ color: $color-font-awesome;
154
+ transition: all .2s;
155
+ }
156
+ }