kentucky 0.1.2 → 0.1.3
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
|