kentucky 0.1.2 → 0.1.3
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.
- checksums.yaml +4 -4
- data/app/assets/stylesheets/kentucky/_debug.scss +81 -81
- data/app/assets/stylesheets/kentucky/_defaults.scss +27 -27
- data/app/assets/stylesheets/kentucky/_helpers.scss +58 -68
- data/lib/kentucky/version.rb +1 -1
- data/readme.md +16 -24
- metadata +1 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 8282450ffd79d78b227d2c75f104af353b54348c
|
4
|
+
data.tar.gz: e6f7c1f22335df9bbb21aa9c9f819ed173ac0746
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 3c3db0b3352e7f53f7438b5582dca86dd2361d8de04c9e0652536c61f902ab800da010c8edfe2141786c8f47f3e6a549ed1fe01b29d01753d55edd1d2a567e15
|
7
|
+
data.tar.gz: 4949bae4408100423281432805b11b4d3b9e7524c2e71d628df8d3b84c22dcea0068c91bee8b29f5f6579f3df8cd05ceda171d6f95133475ecc7cb7043a0ecf9
|
@@ -9,85 +9,85 @@
|
|
9
9
|
|
10
10
|
@if $debug-mode == true{
|
11
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
|
-
|
12
|
+
// Empty page elements?
|
13
|
+
|
14
|
+
:empty{
|
15
|
+
outline: 5px solid yellow;
|
16
|
+
}
|
17
|
+
|
18
|
+
|
19
|
+
// Images require 'alt' attributes, empty 'alt's are fine
|
20
|
+
// No 'alt' is bad, flagged in red
|
21
|
+
|
22
|
+
img{
|
23
|
+
outline: 5px solid red;
|
24
|
+
|
25
|
+
&[alt]{
|
26
|
+
outline: none;
|
27
|
+
}
|
28
|
+
&[alt=""]{
|
29
|
+
outline: 5px solid yellow;
|
30
|
+
}
|
31
|
+
}
|
32
|
+
|
33
|
+
|
34
|
+
// Links benefit from 'title' attributes
|
35
|
+
// Not severe, but good to check
|
36
|
+
|
37
|
+
a{
|
38
|
+
outline: 5px solid yellow;
|
39
|
+
|
40
|
+
&[title]{
|
41
|
+
outline: none;
|
42
|
+
}
|
43
|
+
}
|
44
|
+
|
45
|
+
|
46
|
+
// Esnure lists only contain 'li's as children
|
47
|
+
|
48
|
+
ul,
|
49
|
+
ol{
|
50
|
+
> *:not(li){
|
51
|
+
outline: 5px solid red;
|
52
|
+
}
|
53
|
+
}
|
54
|
+
|
55
|
+
|
56
|
+
// 'tr's as children of 'table's isn't great, did you need 'thead'/'tbody'?
|
57
|
+
|
58
|
+
table > tr{
|
59
|
+
outline: 5px solid yellow;
|
60
|
+
}
|
61
|
+
|
62
|
+
|
63
|
+
// Various form-field types have required attributes
|
64
|
+
// 'input's need 'type'
|
65
|
+
// 'textarea's need 'rows' and 'cols'
|
66
|
+
// 'submit' buttons need 'value'
|
67
|
+
|
68
|
+
textarea,
|
69
|
+
input{
|
70
|
+
outline: 5px solid yellow;
|
71
|
+
}
|
72
|
+
input[type]{
|
73
|
+
outline: none;
|
74
|
+
}
|
75
|
+
textarea[rows][cols]{
|
76
|
+
outline: none;
|
77
|
+
}
|
78
|
+
input[type=submit]{
|
79
|
+
outline: 5px solid red;
|
80
|
+
|
81
|
+
&[value]{
|
82
|
+
outline: none;
|
83
|
+
}
|
84
|
+
}
|
85
|
+
|
86
|
+
|
87
|
+
// Avoid inline styles like the plague that they are
|
88
|
+
|
89
|
+
[style]{
|
90
|
+
outline: 5px solid red;
|
91
|
+
}
|
92
|
+
|
93
93
|
} // END if
|
@@ -62,68 +62,68 @@ $link-color: #bebebe !default;
|
|
62
62
|
// Customized to allow unitless line-height
|
63
63
|
|
64
64
|
@mixin font-size($font-size, $line-height:1){
|
65
|
-
|
66
|
-
|
65
|
+
font-size: $font-size;
|
66
|
+
line-height: $line-height;
|
67
67
|
}
|
68
68
|
|
69
69
|
html{
|
70
|
-
|
71
|
-
|
72
|
-
|
70
|
+
font-family: $base-font-family;
|
71
|
+
color: $base-font-color;
|
72
|
+
@include font-size($base-font-size);
|
73
73
|
}
|
74
74
|
|
75
75
|
%giga{
|
76
|
-
|
76
|
+
@include font-size($giga-size);
|
77
77
|
}
|
78
78
|
%mega{
|
79
|
-
|
79
|
+
@include font-size($mega-size);
|
80
80
|
}
|
81
81
|
%kilo{
|
82
|
-
|
82
|
+
@include font-size($kilo-size);
|
83
83
|
}
|
84
84
|
|
85
85
|
h1, h2, h3, h4, h5, h6{
|
86
|
-
|
86
|
+
font-family: $brand-font-family;
|
87
87
|
}
|
88
88
|
h1,
|
89
89
|
%alpha{
|
90
|
-
|
90
|
+
@include font-size($h1-size);
|
91
91
|
}
|
92
92
|
h2,
|
93
93
|
%bravo{
|
94
|
-
|
94
|
+
@include font-size($h2-size);
|
95
95
|
}
|
96
96
|
h3,
|
97
97
|
%charlie{
|
98
|
-
|
98
|
+
@include font-size($h3-size);
|
99
99
|
}
|
100
100
|
h4,
|
101
101
|
%delta{
|
102
|
-
|
102
|
+
@include font-size($h4-size);
|
103
103
|
}
|
104
104
|
h5,
|
105
105
|
%echo{
|
106
|
-
|
106
|
+
@include font-size($h5-size);
|
107
107
|
}
|
108
108
|
h6,
|
109
109
|
%foxtrot{
|
110
|
-
|
110
|
+
@include font-size($h6-size);
|
111
111
|
}
|
112
112
|
|
113
113
|
%milli{
|
114
|
-
|
114
|
+
@include font-size($milli-size);
|
115
115
|
}
|
116
116
|
%micro{
|
117
|
-
|
117
|
+
@include font-size($micro-size);
|
118
118
|
}
|
119
119
|
|
120
120
|
a{
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
121
|
+
color: $link-color;
|
122
|
+
@include transition(all .3s linear);
|
123
|
+
|
124
|
+
&:hover, &:focus{
|
125
|
+
color: lighten($link-color, 15%);
|
126
|
+
}
|
127
127
|
}
|
128
128
|
|
129
129
|
// ------------------------------------------------------------------- //
|
@@ -132,13 +132,13 @@ a{
|
|
132
132
|
|
133
133
|
::selection,
|
134
134
|
::-moz-selection {
|
135
|
-
|
136
|
-
|
135
|
+
background: $brand-color;
|
136
|
+
color: #fff;
|
137
137
|
}
|
138
138
|
img::selection,
|
139
139
|
img::moz-selection{
|
140
|
-
|
140
|
+
background: transparent;
|
141
141
|
}
|
142
142
|
body{
|
143
|
-
|
143
|
+
-webkit-tap-highlight-color: $brand-color;
|
144
144
|
}
|
@@ -6,20 +6,10 @@
|
|
6
6
|
// Use with jQuery
|
7
7
|
|
8
8
|
.is-shown{
|
9
|
-
|
9
|
+
display: block;
|
10
10
|
}
|
11
11
|
.is-hidden{
|
12
|
-
|
13
|
-
}
|
14
|
-
|
15
|
-
|
16
|
-
// Hide Text
|
17
|
-
// Use only as an extend
|
18
|
-
|
19
|
-
%hide-text{
|
20
|
-
text-indent: 100%;
|
21
|
-
white-space: nowrap;
|
22
|
-
overflow: hidden;
|
12
|
+
display: none;
|
23
13
|
}
|
24
14
|
|
25
15
|
|
@@ -28,34 +18,34 @@
|
|
28
18
|
// Ex: Buckets, nav-lists, etc.
|
29
19
|
|
30
20
|
%float-left{
|
31
|
-
|
21
|
+
float: left;
|
32
22
|
}
|
33
23
|
%float-right{
|
34
|
-
|
24
|
+
float: right;
|
35
25
|
}
|
36
26
|
%float-none{
|
37
|
-
|
27
|
+
float: none;
|
38
28
|
}
|
39
29
|
|
40
30
|
|
41
31
|
// Text Alignment
|
42
32
|
|
43
33
|
%text-left{
|
44
|
-
|
34
|
+
text-align: left;
|
45
35
|
}
|
46
36
|
%text-right{
|
47
|
-
|
37
|
+
text-align: right;
|
48
38
|
}
|
49
39
|
%text-center{
|
50
|
-
|
40
|
+
text-align: center;
|
51
41
|
}
|
52
42
|
|
53
43
|
|
54
44
|
// Non-standard border width specification
|
55
45
|
|
56
46
|
@mixin border($border-widths, $border-style, $border-color){
|
57
|
-
|
58
|
-
|
47
|
+
border: $border-style $border-color;
|
48
|
+
border-width: $border-widths;
|
59
49
|
}
|
60
50
|
|
61
51
|
|
@@ -63,8 +53,8 @@
|
|
63
53
|
// 100%-based percentage ($muted-opacity: 50 = 50%)
|
64
54
|
|
65
55
|
@mixin muted($muted-opacity){
|
66
|
-
|
67
|
-
|
56
|
+
opacity: ($muted-opacity / 100) !important;
|
57
|
+
filter: alpha(opacity = $muted-opacity) !important;
|
68
58
|
}
|
69
59
|
|
70
60
|
|
@@ -73,32 +63,32 @@
|
|
73
63
|
// immediately before the footer
|
74
64
|
|
75
65
|
@if $sticky-footer == true{
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
66
|
+
|
67
|
+
html,
|
68
|
+
body{
|
69
|
+
height: 100%;
|
70
|
+
}
|
71
|
+
|
72
|
+
.wrapper{
|
73
|
+
min-height: 100%;
|
74
|
+
height: auto !important;
|
75
|
+
height: 100%;
|
76
|
+
margin: 0 auto -$footer-height;
|
77
|
+
}
|
78
|
+
|
79
|
+
footer,
|
80
|
+
.footer,
|
81
|
+
.push{
|
82
|
+
height: $footer-height;
|
83
|
+
}
|
84
|
+
|
95
85
|
} // END if
|
96
86
|
|
97
87
|
|
98
88
|
// Sprite Sheet Mixin
|
99
89
|
|
100
90
|
@mixin sprite($col, $row){
|
101
|
-
|
91
|
+
background: url($sprite-shet-loc) no-repeat ($col * -$sprite-sheet-grid) ($row * -$sprite-sheet-grid);
|
102
92
|
}
|
103
93
|
|
104
94
|
|
@@ -112,28 +102,28 @@
|
|
112
102
|
|
113
103
|
@if $use-media == true{
|
114
104
|
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
105
|
+
.media{
|
106
|
+
display:block;
|
107
|
+
@include clearfix;
|
108
|
+
|
109
|
+
.media-img{
|
110
|
+
float: left;
|
111
|
+
margin-right: $base-spacing-unit;
|
112
|
+
}
|
113
|
+
.media-img-flipped{
|
114
|
+
float: right;
|
115
|
+
margin-left: $base-spacing-unit;
|
116
|
+
}
|
117
|
+
|
118
|
+
.media-body{
|
119
|
+
overflow: hidden;
|
120
|
+
|
121
|
+
&,
|
122
|
+
& > :last-child{
|
123
|
+
margin-bottom: 0;
|
124
|
+
}
|
125
|
+
} // END media-body
|
126
|
+
} // END media
|
137
127
|
|
138
128
|
} // END if
|
139
129
|
|
@@ -143,8 +133,8 @@
|
|
143
133
|
// If multi-line is required, use Badonkatrunc: http://badonkatrunc.com/
|
144
134
|
|
145
135
|
@mixin truncate($truncation-boundary){
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
136
|
+
max-width: $truncation-boundary;
|
137
|
+
white-space: nowrap;
|
138
|
+
overflow: hidden;
|
139
|
+
text-overflow: ellipsis;
|
150
140
|
}
|
data/lib/kentucky/version.rb
CHANGED
data/readme.md
CHANGED
@@ -20,36 +20,28 @@ Lastly, we've opened a Trello board for all feedback, issue / bug reporting, and
|
|
20
20
|
***
|
21
21
|
|
22
22
|
## How do I get Kentucky?
|
23
|
-
|
23
|
+
To install Kentucky:
|
24
24
|
|
25
|
-
|
25
|
+
+ Open Terminal.
|
26
|
+
+ Navigate to your project folder (`cd LookThink/Project`).
|
26
27
|
|
27
|
-
|
28
|
+
At this point there are two options - you may install Kentucky in an existing SCSS folder or, for static (non-CMS) projects, you may install a full project directory.
|
28
29
|
|
29
|
-
|
30
|
+
+ **For CMS or existing folder structures:**
|
31
|
+
+ Navigate to your SCSS/styles folder (`cd scss`).
|
32
|
+
+ Type `gem install kentucky`.
|
33
|
+
+ Type `kentucky install`.
|
30
34
|
|
31
|
-
|
35
|
+
+ **For static, non-CMS projects:**
|
36
|
+
+ Type `gem install kentucky`.
|
37
|
+
+ Type `kentucky install --dir`.
|
38
|
+
|
39
|
+
After installing Kentucky, you need to set SCSS to watch your stylesheets for changes and compile your usable CSS file.
|
32
40
|
|
33
|
-
|
41
|
+
+ Navigate to your project's home folder (if you are in the SCSS folder, type `cd ../`)
|
42
|
+
+ Type `sass --watch input:output` (i.e., `sass --watch scss/style.scss:css/style.css`)
|
34
43
|
|
35
|
-
|
36
|
-
|
37
|
-
$ kentucky install --dir
|
38
|
-
|
39
|
-
This will create **fonts**, **images**, **SCSS**, **style**, and **scripts** folders in your project folder. It then installs Kentucky inside of the created SCSS folder! Super easy, right?!
|
40
|
-
|
41
|
-
The last option is for you Terminal pro's. Kentucky includes the capability to create your project folder, tell Kentucky where it is, and install it there, *without* needing to `cd` there. To do this open Terminal:
|
42
|
-
|
43
|
-
$ mkdir -p projects-base/project/build
|
44
|
-
$ kentucky install --path=projects-base/project/build --dir
|
45
|
-
|
46
|
-
This creates your project folder, creates all required folders inside of that folder, and installs Kentucky! Boom! This is also runnable without the `--dir` option if all you need is to point Kentucky to the project from anywhere but the project folder, `$ kentucky install --patch=projects-base/project/build/scss`.
|
47
|
-
|
48
|
-
Once Kentucky is installed, navigate to the project folder, open Terminal and run:
|
49
|
-
|
50
|
-
$ sass --watch scss/style.scss:style/style.css
|
51
|
-
|
52
|
-
Leave Terminal open and whenever you make a change to your SCSS files, it will compile a new style.css for you.
|
44
|
+
Now, whenever a change is made to an SCSS file, your code will be compiled and exported to the location dictated.
|
53
45
|
|
54
46
|
***
|
55
47
|
|