kentucky 0.4.3 → 0.5.0

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 (24) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/stylesheets/kentucky/{setup/_debug.scss → _debug.scss} +3 -3
  3. data/app/assets/stylesheets/kentucky/_kentucky.scss +19 -65
  4. data/app/assets/stylesheets/kentucky/{_defaults.scss → _project-settings.scss} +26 -52
  5. data/app/assets/stylesheets/kentucky/{setup → base}/_normalize.scss +95 -123
  6. data/app/assets/stylesheets/kentucky/{main/_main.scss → base/_typography.scss} +40 -37
  7. data/app/assets/stylesheets/kentucky/extends/_alignment.scss +13 -0
  8. data/app/assets/stylesheets/kentucky/extends/_breadcrumbs.scss +24 -0
  9. data/app/assets/stylesheets/kentucky/extends/_capslock.scss +7 -0
  10. data/app/assets/stylesheets/kentucky/extends/_go.scss +11 -0
  11. data/app/assets/stylesheets/kentucky/{_shame.scss → extends/_mute.scss} +6 -1
  12. data/app/assets/stylesheets/kentucky/extends/_show-hide.scss +11 -0
  13. data/app/assets/stylesheets/kentucky/mixins/_borders.scss +10 -0
  14. data/app/assets/stylesheets/kentucky/mixins/_font-size.scss +12 -0
  15. data/app/assets/stylesheets/kentucky/mixins/_headings.scss +23 -0
  16. data/app/assets/stylesheets/kentucky/mixins/_sprite.scss +9 -0
  17. data/app/assets/stylesheets/kentucky/mixins/_truncate.scss +14 -0
  18. data/lib/kentucky/version.rb +1 -1
  19. metadata +18 -13
  20. data/app/assets/stylesheets/kentucky/helpers/_extends.scss +0 -102
  21. data/app/assets/stylesheets/kentucky/helpers/_mixins.scss +0 -77
  22. data/app/assets/stylesheets/kentucky/main/_brand.scss +0 -16
  23. data/app/assets/stylesheets/kentucky/objects/_media.scss +0 -30
  24. data/app/assets/stylesheets/kentucky/objects/_split.scss +0 -18
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 0b3804df1b60494d9dc666aa6c5af289e3e434eb
4
- data.tar.gz: 53bfdadf0d15b76f975429f48da63c3899f223f2
3
+ metadata.gz: 32565bc4ad2ed1c912768f6b2d43eead4e28426a
4
+ data.tar.gz: 9933658c3f148f07c1ba7e1f8cc989709cd4400c
5
5
  SHA512:
6
- metadata.gz: 919d8536943f7cc1990c0fd0c06249050a86ed88465ad90a0e344fdf84ac24ba57372d512690389fb2f4648250d06caf2ec11215a8cd1e7459d7ba2663c8c9f4
7
- data.tar.gz: 584daac07f71113870da5951efa0e80e54d01d5e8fd643bb7193a9fb6441f16edc8522f298816cf36ba339fe57e6af3f05a48905d5452c0304661adcf801158f
6
+ metadata.gz: a7b0e1c0ff9a069c57b21855a0dad6e3f93dfcc71d940aa700db4ea5ce33a5b773844a1b328f84d9f1922321a35ae6a3437ed73939b6e01f66e485bcd8221bb1
7
+ data.tar.gz: 9aa02b0f8aa0794a02f247e4e4c83fcc520dd153e73e3c7cad53681a4f9fd03919e9886b0afac5e82bedd6b2a2b7ff1d46ba9e3e6dc664785c7bdbd2dfa2994d
@@ -1,6 +1,6 @@
1
1
  // ------------------------------------------------------------------- //
2
- // Debug - Only active if variable set to TRUE in _defaults.scss
3
- // Use to determine CSS issues within the site
2
+ // Debug - Only active if variable set to TRUE in _project-settings.scss
3
+ // Use to determine CSS issues within the site
4
4
  // ------------------------------------------------------------------- //
5
5
 
6
6
  // Red == Definite Error
@@ -90,4 +90,4 @@
90
90
  outline: 5px solid red;
91
91
  }
92
92
 
93
- } // END if
93
+ } // END if
@@ -1,81 +1,35 @@
1
1
  // ------------------------------------------------------------------- //
2
- // Kentucky.scss
3
- //
4
- // The goal of Kentucky is to do a majority of the heavy lifting
5
- // for you at the very start of a project. The styles and organization
6
- // required at the beginning of every project is done for you, just
7
- // fill in the variables!
8
- //
9
- // The table of contents below explains, briefly, what each import
10
- // does.
11
- //
12
- // Kentucky aims to be heavily documented to help you learn why or how
13
- // it's pieces work. More complex portions come with implemenation
14
- // examples.
15
- //
16
- // Copyright 2013 LookThink
17
- // Developed in part by:
18
- // Greg Bruening, Aaron Clemmer, and Chris Brinson
19
- //
20
- // WARNING: Variables set now are being used throughout the entirety
21
- // of Kentucky. Any custom, project-related styles SHOULD NOT be added
22
- // or modified in Kentucky diretcly, but added via a separate theme
23
- // folder/files.
24
- //
2
+ // Kentucky Imports
25
3
  // ------------------------------------------------------------------- //
26
- // Contents
27
- // ------------------------------------------------------------------- //
28
-
29
- // Imports Begin importing the sections below
30
-
31
- // Defaults All variable values set here
32
- // Normalize Nicolas Gallagher's normalize.css, sassy style
33
- // Clearfix Set some defaults
34
- // Mixins Super-simple SCSS stuff
35
-
36
- // Main High-level elements like `html`, `body`, etc.
37
- // Headings Double-stranded heading hierarchy
38
- // Smallprint Smaller text elements like `small`
39
- // Lists Basic list styles and extends
40
-
41
- // Abstraction details here
42
-
43
- // Brand Helper class to apply brand treatment to elements
44
- // Helpers A series of helper classes to use arbitrarily
45
- // Debug Enable to add visual flags for debugging purposes
46
4
 
5
+ @import "project-settings";
47
6
 
48
7
  // ------------------------------------------------------------------- //
49
- // Initial Setup
8
+ // Mixins & Extends
50
9
  // ------------------------------------------------------------------- //
51
10
 
52
- @import "setup/normalize";
53
- @import "defaults";
54
-
55
- // ------------------------------------------------------------------- //
56
- // Kentucky's Core
57
- // ------------------------------------------------------------------- //
58
-
59
- @import "helpers/extends";
60
- @import "helpers/mixins";
61
- @import "objects/media";
62
- @import "objects/split";
63
-
64
- // ------------------------------------------------------------------- //
65
- // Main (Type, Brand, etc.)
66
- // ------------------------------------------------------------------- //
11
+ @import "mixins/font-size";
12
+ @import "mixins/headings";
13
+ @import "mixins/sprite";
14
+ @import "mixins/borders";
15
+ @import "mixins/truncate";
67
16
 
68
- @import "main/brand";
69
- @import "main/main";
17
+ @import "extends/alignment";
18
+ @import "extends/breadcrumbs";
19
+ @import "extends/capslock";
20
+ @import "extends/go";
21
+ @import "extends/mute";
22
+ @import "extends/show-hide";
70
23
 
71
24
  // ------------------------------------------------------------------- //
72
- // Load that hacky cuss last...
25
+ // Base
73
26
  // ------------------------------------------------------------------- //
74
27
 
75
- @import "shame";
28
+ @import "base/normalize";
29
+ @import "base/typography";
76
30
 
77
31
  // ------------------------------------------------------------------- //
78
- // And if required, load debugging styles
32
+ // Debug
79
33
  // ------------------------------------------------------------------- //
80
34
 
81
- @import "setup/debug";
35
+ @import "debug";
@@ -1,32 +1,35 @@
1
1
  // ------------------------------------------------------------------- //
2
- // Default Kentucky Variables
2
+ // Project Settings
3
3
  // ------------------------------------------------------------------- //
4
- // Project Settings
4
+ // ------------------------------------------------------------------- //
5
+ // Toggleable Helpers / Modules
5
6
  // ------------------------------------------------------------------- //
6
7
 
7
- $debug-mode: false !default;
8
- $use-media: false !default;
9
- $use-sprite: false !default;
10
- $use-breadcrumb: false !default;
11
- $use-split: false !default;
12
-
13
- // If use-sprite is set to true, input relevant values
14
- $sprite-sheet-loc: "sprite sheet url.png";
15
- $sprite-sheet-grid: 36px;
8
+ $debug-mode: false !default;
16
9
 
10
+ // If using a sprite, set relevant variables:
11
+ $sprite-sheet-location: "url/to/spritesheet.png";
12
+ $sprite-sheet-gridsize: 36px;
17
13
 
18
14
  // ------------------------------------------------------------------- //
19
- // Typographic Variables
15
+ // Typography
20
16
  // ------------------------------------------------------------------- //
21
17
 
18
+ // Brand
19
+
20
+ $brand-font-family: $helvetica !default;
21
+ $brand-color: #333 !default;
22
+ $brand-round: 5px !default; // Used for border-radius
23
+
24
+ // Base
25
+
22
26
  $base-font-family: $helvetica !default;
23
27
  $base-font-size: 14px !default;
24
28
  $base-line-height: 1 !default;
25
29
  $base-font-color: #333 !default;
30
+ $link-color: #bebebe !default;
26
31
 
27
- $giga-size: 96px !default;
28
- $mega-size: 72px !default;
29
- $kilo-size: 48px !default;
32
+ // Heading Sizes
30
33
 
31
34
  $h1-size: 42px !default; // %alpha
32
35
  $h2-size: 36px !default; // %bravo
@@ -35,49 +38,20 @@ $h4-size: 20px !default; // %delta
35
38
  $h5-size: 18px !default; // %echo
36
39
  $h6-size: 16px !default; // %foxtrot
37
40
 
41
+ $giga-size: 96px !default;
42
+ $mega-size: 72px !default;
43
+ $kilo-size: 48px !default;
44
+
38
45
  $milli-size: 12px !default;
39
46
  $micro-size: 10px !default;
40
47
 
41
-
42
- // ------------------------------------------------------------------- //
43
- // Brand Variables
44
- // ------------------------------------------------------------------- //
45
-
46
- $brand-font-family: $helvetica !default;
47
- $brand-color: #333 !default;
48
- $brand-round: 3px !default; // Used for rounded corners
49
-
50
- $link-color: #bebebe !default;
51
-
52
-
53
- // ------------------------------------------------------------------- //
54
- // Base Spacing Units
55
- // ------------------------------------------------------------------- //
56
-
57
- $base-spacing-unit: $base-line-height !default;
58
- $half-spacing-unit: $base-spacing-unit / 2 !default;
59
-
60
-
61
48
  // ------------------------------------------------------------------- //
62
- // Media Query Widths
49
+ // Media Query Widths
50
+ //
51
+ // [max-width] [in pixels] [columns]
63
52
  // ------------------------------------------------------------------- //
64
53
 
65
54
  $mobile: new-breakpoint(max-width 480px 4);
66
55
  $tablet: new-breakpoint(max-width 990px 8);
67
56
  $laptop: new-breakpoint(max-width 1440px 12);
68
-
69
- // ------------------------------------------------------------------- //
70
- // Single Direction Margins
71
- //
72
- // Any block level elements should be added to this list as well.
73
- // Keeping the margins in one direction will avoid margin collapse
74
- // issues and keep spacing consistant.
75
- // ------------------------------------------------------------------- //
76
-
77
- h1, h2, h3, h4, h5, h6,
78
- ul, ol, dd,
79
- section, article, p,
80
- pre, table, fieldset, hr{
81
- margin-bottom: ($base-font-size / $base-line-height); // IE8 Fallback
82
- margin-bottom: 1rem;
83
- }
57
+ $desktop: new-breakpoint(max-width 1920px 12);
@@ -1,16 +1,9 @@
1
1
  // ------------------------------------------------------------------- //
2
- // Normalize by Nicolas Gallagher
3
- // http://necolas.github.io/normalize.css/
4
- //
5
- // Edited for use with Kentucky
2
+ // LookThink Normalization Sassified
6
3
  // ------------------------------------------------------------------- //
7
- // Base Reset
8
- // Allows for better control over spacing from the start
9
4
  // ------------------------------------------------------------------- //
10
-
11
- *{
12
- @include box-sizing(border-box);
13
- }
5
+ // Meyer's Style Reset
6
+ // ------------------------------------------------------------------- //
14
7
 
15
8
  html, body, div, span, iframe,
16
9
  h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr,
@@ -22,10 +15,14 @@ table, caption, tbody, tfoot, thead, tr, th, td,
22
15
  article, aside, canvas, details, figcaption, figure,
23
16
  footer, header, menu, nav, section, summary,
24
17
  time, mark, audio, video{
25
- margin: 0;
26
- padding: 0;
18
+ margin: 0;
19
+ padding: 0;
27
20
  }
28
21
 
22
+ // ------------------------------------------------------------------- //
23
+ // Display Definitions
24
+ // ------------------------------------------------------------------- //
25
+
29
26
  article,
30
27
  aside,
31
28
  details,
@@ -38,218 +35,193 @@ main,
38
35
  nav,
39
36
  section,
40
37
  summary {
41
- display: block;
38
+ display: block;
42
39
  }
43
40
 
44
41
  audio,
45
42
  canvas,
46
43
  video {
47
- display: inline-block;
44
+ display: inline-block;
48
45
  }
49
46
 
50
47
  audio:not([controls]) {
51
- display: none;
52
- height: 0;
48
+ display: none;
49
+ height: 0;
53
50
  }
54
51
 
55
- [hidden] {
56
- display: none;
52
+ [hidden],
53
+ template {
54
+ display: none;
57
55
  }
58
56
 
59
57
  // ------------------------------------------------------------------- //
60
- // Base
58
+ // Base Level
61
59
  // ------------------------------------------------------------------- //
62
60
 
63
61
  html {
64
- font-family: sans-serif;
65
- -ms-text-size-adjust: 100%;
66
- -webkit-text-size-adjust: 100%;
62
+ font-family: sans-serif;
63
+ -ms-text-size-adjust: 100%;
64
+ -webkit-text-size-adjust: 100%;
67
65
  }
68
66
 
69
- body {
70
- margin: 0;
67
+ body{
68
+ margin: 0;
71
69
  }
72
70
 
73
71
  // ------------------------------------------------------------------- //
74
- // Links
72
+ // Links
75
73
  // ------------------------------------------------------------------- //
76
74
 
77
- a:focus {
78
- outline: thin dotted;
79
- }
75
+ a{
76
+ background: transparent;
80
77
 
81
- a:active {
82
- outline: 0;
78
+ &:focus{
79
+ outline: thin dotted;
80
+ }
81
+ &:hover,
82
+ &:active{
83
+ outline: 0;
84
+ }
83
85
  }
84
86
 
85
87
  // ------------------------------------------------------------------- //
86
- // Typography
88
+ // Typography
87
89
  // ------------------------------------------------------------------- //
88
90
 
89
- abbr[title] {
90
- border-bottom: 1px dotted;
91
- }
92
-
93
- b,
94
- strong {
95
- font-weight: bold;
91
+ abbr[title]{
92
+ border-bottom: 1px dotted;
96
93
  }
97
94
 
98
- dfn {
99
- font-style: italic;
95
+ strong{
96
+ font-weight: bold;
100
97
  }
101
98
 
102
- hr {
103
- display: block;
104
- height: 1px;
105
- background: #ccc;
106
- border: none;
107
- }
108
-
109
- mark {
110
- background: #ff0;
111
- color: #000;
99
+ hr{
100
+ @include prefixer(box-sizing, content-box, moz spec);
101
+ height: 0;
112
102
  }
113
103
 
114
104
  code,
115
- kbd,
116
- pre,
117
- samp {
118
- font-family: monospace,serif;
119
- font-size: 1em;
105
+ pre{
106
+ font-family: $monospace; // "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
107
+ font-size: 1em;
120
108
  }
121
109
 
122
- pre {
123
- white-space: pre-wrap;
110
+ pre{
111
+ white-space: pre-wrap;
124
112
  }
125
113
 
126
- q {
127
- quotes: "\201C" "\201D" "\2018" "\2019";
128
- }
129
-
130
- small {
131
- font-size: 80%;
114
+ small{
115
+ font-size: 75%;
132
116
  }
133
117
 
134
118
  sub,
135
- sup {
136
- position: relative;
137
- font-size: 75%;
138
- line-height: 0;
139
- vertical-align: baseline;
119
+ sup{
120
+ position: relative;
121
+ font-size: 75%;
122
+ line-height: 0;
123
+ vertical-align: baseline;
140
124
  }
141
125
 
142
- sup {
143
- top: -.5em;
126
+ sub{
127
+ bottom: -0.25em;
144
128
  }
145
-
146
- sub {
147
- bottom: -.25em;
129
+ sup{
130
+ top: -0.5em;
148
131
  }
149
132
 
150
133
  // ------------------------------------------------------------------- //
151
- // Embedded Content
134
+ // Embedded Content
152
135
  // ------------------------------------------------------------------- //
153
136
 
154
- img {
155
- border: 0;
137
+ img{
138
+ border: 0;
156
139
  }
157
140
 
158
- svg:not(:root) {
159
- overflow: hidden;
141
+ svg:not(:root){
142
+ overflow: hidden;
160
143
  }
161
144
 
162
145
  // ------------------------------------------------------------------- //
163
- // Forms
146
+ // Forms
164
147
  // ------------------------------------------------------------------- //
165
148
 
166
- fieldset {
167
- border: 1px solid #ccc;
168
- }
169
-
170
- legend {
171
- border: 0;
172
- }
173
-
149
+ #{$all-text-inputs}, // http://bourbon.io/docs/#html5-input-types
174
150
  button,
175
- input,
176
151
  select,
177
- textarea {
178
- margin: 0;
179
- font-family: inherit;
180
- font-size: 100%;
152
+ textarea{
153
+ margin: 0;
154
+ font-family: $base-font-family;
155
+ font-size: 100%;
156
+ line-height: 1;
181
157
  }
182
158
 
183
159
  button,
184
- input {
185
- line-height: normal;
186
- }
187
-
188
- button,
189
- select {
190
- text-transform: none;
160
+ select{
161
+ text-transform: none;
191
162
  }
192
163
 
193
164
  button,
194
165
  html input[type="button"],
195
166
  input[type="reset"],
196
- input[type="submit"] {
197
- -webkit-appearance: button;
198
- cursor: pointer;
167
+ input[type="submit"]{
168
+ @include prefixer(appearance, button, webkit);
169
+ cursor: pointer;
199
170
  }
200
171
 
201
172
  button[disabled],
202
- html input[disabled] {
203
- cursor: default;
173
+ html input[disabled]{
174
+ cursor: default;
204
175
  }
205
176
 
206
177
  input[type="checkbox"],
207
- input[type="radio"] {
208
- padding: 0;
178
+ input[type="radio"]{
179
+ box-sizing: border-box;
180
+ padding: 0;
209
181
  }
210
182
 
211
183
  input[type="search"] {
212
- -webkit-appearance: textfield;
184
+ -webkit-appearance: textfield;
185
+ @include prefixer(appearance, content-box, moz webkit spec);
213
186
  }
214
187
 
215
188
  input[type="search"]::-webkit-search-cancel-button,
216
189
  input[type="search"]::-webkit-search-decoration {
217
- -webkit-appearance: none;
190
+ -webkit-appearance: none;
218
191
  }
219
192
 
220
193
  button::-moz-focus-inner,
221
194
  input::-moz-focus-inner {
222
- border: 0;
195
+ border: 0;
196
+ padding: 0;
223
197
  }
224
198
 
225
- textarea {
226
- overflow: auto;
227
- vertical-align:top;
199
+ textarea{
200
+ overflow: auto;
201
+ vertical-align: top;
228
202
  }
229
203
 
230
-
231
204
  // ------------------------------------------------------------------- //
232
- // Lists
205
+ // Lists
233
206
  // ------------------------------------------------------------------- //
234
207
 
235
208
  ul,
236
209
  ol,
237
- dl {
238
- margin-left: 1.5em;
210
+ dl{
211
+ margin-left: 1rem;
239
212
  }
240
213
 
241
214
  li > ul,
242
215
  li > ol{
243
- margin-bottom: 0;
244
- padding-bottom: 0;
216
+ margin-bottom: 0;
217
+ padding-bottom: 0;
245
218
  }
246
219
 
247
-
248
220
  // ------------------------------------------------------------------- //
249
- // Tables
221
+ // Tables
250
222
  // ------------------------------------------------------------------- //
251
223
 
252
- table {
253
- border-collapse: collapse;
254
- border-spacing: 0;
224
+ table{
225
+ border-collapse: collapse;
226
+ border-spacing: 0;
255
227
  }
@@ -1,17 +1,23 @@
1
1
  // ------------------------------------------------------------------- //
2
- // Main
2
+ // Base Typographic Rules
3
3
  // ------------------------------------------------------------------- //
4
- // Kentucky Headings
4
+
5
+ html{
6
+ font: #{($base-font-size/16px)*1em} / #{$base-line-height} $base-font-family;
7
+ }
8
+
9
+ // ------------------------------------------------------------------- //
10
+ // Headings
5
11
  //
6
- // The goal here is to define headings and establish practical
7
- // font-sizing from the get go.
12
+ // The goal here is to define headings and establish practical
13
+ // font-sizing from the get go.
8
14
  //
9
- // Also includes a "double-stranded hierarchy" allowing you to use HTML
10
- // heading elements or the alternate extend included (based on the
11
- // military alphabet).
15
+ // Also includes a "double-stranded hierarchy" allowing you to use HTML
16
+ // heading elements or the alternate extend included (based on the
17
+ // military alphabet).
12
18
  // ------------------------------------------------------------------- //
13
19
 
14
- @include headings(1,6){
20
+ h1, h2, h3, h4, h5, h6{
15
21
  font-family: $brand-font-family;
16
22
  }
17
23
 
@@ -45,11 +51,10 @@ h6,
45
51
  @include font-size($h6-size);
46
52
  }
47
53
 
48
-
49
54
  // ------------------------------------------------------------------- //
50
- // Heading Groups
51
- //
52
- // Target a group of headers stacked together (such as title/subtitle)
55
+ // Heading Groups
56
+ //
57
+ // Target a group of headings stacked together (such as title/subtitle)
53
58
  // ------------------------------------------------------------------- //
54
59
 
55
60
  %hgroup{
@@ -58,26 +63,22 @@ h6,
58
63
  }
59
64
  }
60
65
 
61
-
62
66
  // ------------------------------------------------------------------- //
63
- // A set of extends for massive type (heroes, mastheads, etc.)
67
+ // Extra Large / Small Extends
64
68
  // ------------------------------------------------------------------- //
65
69
 
66
70
  %giga{
67
71
  @include font-size($giga-size);
68
72
  }
73
+
69
74
  %mega{
70
75
  @include font-size($mega-size);
71
76
  }
77
+
72
78
  %kilo{
73
79
  @include font-size($kilo-size);
74
80
  }
75
81
 
76
-
77
- // ------------------------------------------------------------------- //
78
- // What is this? Type for ants?!
79
- // ------------------------------------------------------------------- //
80
-
81
82
  %milli{
82
83
  @include font-size($milli-size);
83
84
  }
@@ -86,26 +87,28 @@ h6,
86
87
  @include font-size($micro-size);
87
88
  }
88
89
 
89
-
90
90
  // ------------------------------------------------------------------- //
91
- // Basic Page Setup
91
+ // Links
92
92
  // ------------------------------------------------------------------- //
93
93
 
94
- html{
95
- font: #{($base-font-size/16px)*1em} / #{$base-line-height} $base-font-family;
96
- min-height: 100%;
97
- overflow-y: scroll;
98
- } // END html
99
-
100
- body{
101
- background: #fff;
102
- } // END body
103
-
104
94
  a{
105
95
  color: $link-color;
106
- @include transition(all .3s linear);
107
-
108
- &:hover, &:focus{
109
- color: lighten($link-color, 15%);
110
- }
111
- } // END a
96
+ text-decoration: none;
97
+ }
98
+
99
+ // ------------------------------------------------------------------- //
100
+ // Single-direction Margins
101
+ // ------------------------------------------------------------------- //
102
+
103
+ h1, h2, h3, h4, h5, h6,
104
+ ul, ol, dl,
105
+ p,
106
+ pre, table, fieldset{
107
+ margin-bottom: ($base-font-size / $base-line-height); // IE8 Fallback
108
+ margin-bottom: 1rem;
109
+ }
110
+
111
+ hr{
112
+ margin: ($base-font-size / $base-line-height) 0;
113
+ margin: 1rem 0;
114
+ }
@@ -0,0 +1,13 @@
1
+ // ------------------------------------------------------------------- //
2
+ // Text Alignment
3
+ // ------------------------------------------------------------------- //
4
+
5
+ %text-left{
6
+ text-align: left;
7
+ }
8
+ %text-right{
9
+ text-align: right;
10
+ }
11
+ %text-center{
12
+ text-align: center;
13
+ }
@@ -0,0 +1,24 @@
1
+ // ------------------------------------------------------------------- //
2
+ // Breadcrumbs
3
+ //
4
+ // Must be extended in the ul of the breadcrumbs
5
+ // Adds auto-magical separators
6
+ // ------------------------------------------------------------------- //
7
+
8
+ // Simple breadcrumb ">"
9
+ %breadcrumb{
10
+ & > li + li:before{
11
+ content:"\00BB" "\00A0";
12
+ }
13
+ }
14
+
15
+ // Path breadcrumb "/"
16
+ %breadcrumb--path{
17
+ & > li + li:before{
18
+ content:"\002F" "\00A0";
19
+ }
20
+ }
21
+
22
+ %breadcrumb__root{
23
+ font-weight:bold;
24
+ }
@@ -0,0 +1,7 @@
1
+ // ------------------------------------------------------------------- //
2
+ // Caps Lock - Calm down there, champ...
3
+ // ------------------------------------------------------------------- //
4
+
5
+ %caps{
6
+ text-transform: uppercase;
7
+ }
@@ -0,0 +1,11 @@
1
+ // ------------------------------------------------------------------- //
2
+ // "Go"
3
+ //
4
+ // Add right-facing arrow, indicating movement through site
5
+ // ------------------------------------------------------------------- //
6
+
7
+ %go{
8
+ &:after{
9
+ content: "\00A0" "\OOBB";
10
+ }
11
+ }
@@ -1,3 +1,8 @@
1
1
  // ------------------------------------------------------------------- //
2
- // We're up all night to get hacky...
2
+ // Muted
3
3
  // ------------------------------------------------------------------- //
4
+
5
+ %muted{
6
+ opacity: .5;
7
+ filter: alpha(opacity=50);
8
+ }
@@ -0,0 +1,11 @@
1
+ // ------------------------------------------------------------------- //
2
+ // Show / Hide Elements
3
+ // To be used in jQuery as a toggle class
4
+ // ------------------------------------------------------------------- //
5
+
6
+ .is-shown{
7
+ display: block;
8
+ }
9
+ .is-hidden{
10
+ display: none;
11
+ }
@@ -0,0 +1,10 @@
1
+ // ------------------------------------------------------------------- //
2
+ // Custom Borders / Widths
3
+ //
4
+ // @include border(2px 0 5px 3px, solid, #B4DA55);
5
+ // ------------------------------------------------------------------- //
6
+
7
+ @mixin border($border-widths, $border-style, $border-color){
8
+ border: $border-style $border-color;
9
+ border-width: $border-widths;
10
+ }
@@ -0,0 +1,12 @@
1
+ // ------------------------------------------------------------------- //
2
+ // Font Size / Line Height
3
+ // ------------------------------------------------------------------- //
4
+
5
+ @mixin font-size($font-size, $line-height: true){
6
+ font-size: $font-size;
7
+ font-size: ($font-size / $base-font-size) * 1rem;
8
+
9
+ @if $line-height == true{
10
+ line-height: ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
11
+ }
12
+ }
@@ -0,0 +1,23 @@
1
+ // ------------------------------------------------------------------- //
2
+ // Style any number of headings at once
3
+ //
4
+ // .foo{
5
+ // @include headings(1,3){
6
+ // color: #B4DA55;
7
+ // }
8
+ // }
9
+ // ------------------------------------------------------------------- //
10
+
11
+ @mixin headings($from: 1, $to: 6){
12
+ %base-heading{
13
+ @content
14
+ }
15
+
16
+ @if $from >= 1 and $to <= 6{
17
+ @for $i from $from through $to{
18
+ h#{$i}{
19
+ @extend %base-heading;
20
+ }
21
+ }
22
+ }
23
+ }
@@ -0,0 +1,9 @@
1
+ // ------------------------------------------------------------------- //
2
+ // Sprite Sheet
3
+ //
4
+ // @include sprite(0,0);
5
+ // ------------------------------------------------------------------- //
6
+
7
+ @mixin sprite($col, $row){
8
+ background: url($sprite-sheet-loc) no-repeat ($col * -$sprite-sheet-grid) ($row * -$sprite-sheet-grid);
9
+ }
@@ -0,0 +1,14 @@
1
+ // ------------------------------------------------------------------- //
2
+ // Text Truncation
3
+ //
4
+ // @include truncate(450px);
5
+ // Only works for single-line truncation
6
+ // ------------------------------------------------------------------- //
7
+
8
+ @mixin truncate($truncation-boundary){
9
+ display: inline-block;
10
+ max-width: $truncation-boundary;
11
+ white-space: nowrap;
12
+ overflow: hidden;
13
+ text-overflow: ellipsis;
14
+ }
@@ -1,3 +1,3 @@
1
1
  module Kentucky
2
- VERSION = "0.4.3"
2
+ VERSION = "0.5.0"
3
3
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: kentucky
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.4.3
4
+ version: 0.5.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Aaron Clemmer
@@ -10,7 +10,7 @@ authors:
10
10
  autorequire:
11
11
  bindir: bin
12
12
  cert_chain: []
13
- date: 2013-10-15 00:00:00.000000000 Z
13
+ date: 2013-11-08 00:00:00.000000000 Z
14
14
  dependencies:
15
15
  - !ruby/object:Gem::Dependency
16
16
  name: sass
@@ -111,17 +111,22 @@ files:
111
111
  - Kentucky.sublime-workspace
112
112
  - LICENSE
113
113
  - Rakefile
114
- - app/assets/stylesheets/kentucky/_defaults.scss
114
+ - app/assets/stylesheets/kentucky/_debug.scss
115
115
  - app/assets/stylesheets/kentucky/_kentucky.scss
116
- - app/assets/stylesheets/kentucky/_shame.scss
117
- - app/assets/stylesheets/kentucky/helpers/_extends.scss
118
- - app/assets/stylesheets/kentucky/helpers/_mixins.scss
119
- - app/assets/stylesheets/kentucky/main/_brand.scss
120
- - app/assets/stylesheets/kentucky/main/_main.scss
121
- - app/assets/stylesheets/kentucky/objects/_media.scss
122
- - app/assets/stylesheets/kentucky/objects/_split.scss
123
- - app/assets/stylesheets/kentucky/setup/_debug.scss
124
- - app/assets/stylesheets/kentucky/setup/_normalize.scss
116
+ - app/assets/stylesheets/kentucky/_project-settings.scss
117
+ - app/assets/stylesheets/kentucky/base/_normalize.scss
118
+ - app/assets/stylesheets/kentucky/base/_typography.scss
119
+ - app/assets/stylesheets/kentucky/extends/_alignment.scss
120
+ - app/assets/stylesheets/kentucky/extends/_breadcrumbs.scss
121
+ - app/assets/stylesheets/kentucky/extends/_capslock.scss
122
+ - app/assets/stylesheets/kentucky/extends/_go.scss
123
+ - app/assets/stylesheets/kentucky/extends/_mute.scss
124
+ - app/assets/stylesheets/kentucky/extends/_show-hide.scss
125
+ - app/assets/stylesheets/kentucky/mixins/_borders.scss
126
+ - app/assets/stylesheets/kentucky/mixins/_font-size.scss
127
+ - app/assets/stylesheets/kentucky/mixins/_headings.scss
128
+ - app/assets/stylesheets/kentucky/mixins/_sprite.scss
129
+ - app/assets/stylesheets/kentucky/mixins/_truncate.scss
125
130
  - app/assets/stylesheets/style.scss
126
131
  - bin/kentucky
127
132
  - features/install.feature
@@ -157,7 +162,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
157
162
  version: '0'
158
163
  requirements: []
159
164
  rubyforge_project:
160
- rubygems_version: 2.1.9
165
+ rubygems_version: 2.1.10
161
166
  signing_key:
162
167
  specification_version: 4
163
168
  summary: Kentucky Bourbon, Neat Grid System and SCSS Mixins
@@ -1,102 +0,0 @@
1
- // ------------------------------------------------------------------- //
2
- // Kentucky Extends
3
- // ------------------------------------------------------------------- //
4
- // Show / Hide Elements
5
- // To be used in jQuery as a toggle class
6
- // ------------------------------------------------------------------- //
7
-
8
- .is-shown{
9
- display: block;
10
- }
11
- .is-hidden{
12
- display: none;
13
- }
14
-
15
-
16
- // ------------------------------------------------------------------- //
17
- // Add / Remove Floats
18
- // ------------------------------------------------------------------- //
19
-
20
- %float-left{
21
- float: left;
22
- }
23
- %float-right{
24
- float: right;
25
- }
26
- %float-none{
27
- float: none;
28
- }
29
-
30
-
31
- // ------------------------------------------------------------------- //
32
- // Text Alignment
33
- // ------------------------------------------------------------------- //
34
-
35
- %text-left{
36
- text-align: left;
37
- }
38
- %text-right{
39
- text-align: right;
40
- }
41
- %text-center{
42
- text-align: center;
43
- }
44
-
45
-
46
- // ------------------------------------------------------------------- //
47
- // Muted
48
- // ------------------------------------------------------------------- //
49
-
50
- %muted{
51
- opacity: .5;
52
- filter: alpha(opacity=50);
53
- }
54
-
55
-
56
- // ------------------------------------------------------------------- //
57
- // "Go"
58
- //
59
- // Add right-facing arrow, indicating movement through site
60
- // ------------------------------------------------------------------- //
61
-
62
- %go{
63
- &:after{
64
- content: "\00A0" "\OOBB";
65
- }
66
- }
67
-
68
-
69
- // ------------------------------------------------------------------- //
70
- // Breadcrumbs
71
- //
72
- // Must be extended in the ul of the breadcrumbs
73
- // Adds auto-magical separators
74
- // ------------------------------------------------------------------- //
75
-
76
- // Simple breadcrumb ">"
77
- %breadcrumb{
78
- & > li + li:before{
79
- content:"\00BB" "\00A0";
80
- }
81
- }
82
-
83
- // Path breadcrumb "/"
84
- %breadcrumb--path{
85
- & > li + li:before{
86
- content:"\002F" "\00A0";
87
- }
88
- }
89
-
90
- %breadcrumb__root{
91
- font-weight:bold;
92
- }
93
-
94
-
95
-
96
- // ------------------------------------------------------------------- //
97
- // Caps Lock - Calm down there, champ...
98
- // ------------------------------------------------------------------- //
99
-
100
- %caps{
101
- text-transform: uppercase;
102
- }
@@ -1,77 +0,0 @@
1
- // ------------------------------------------------------------------- //
2
- // Kentucky Mixins
3
- // ------------------------------------------------------------------- //
4
- // Font Size / Line Height
5
- // ------------------------------------------------------------------- //
6
-
7
- @mixin font-size($font-size, $line-height: true){
8
- font-size: $font-size;
9
- font-size: ($font-size / $base-font-size) * 1rem;
10
-
11
- @if $line-height == true{
12
- line-height: ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
13
- }
14
- }
15
-
16
-
17
- // ------------------------------------------------------------------- //
18
- // Style any number of headings at once
19
- //
20
- // .foo{
21
- // @include headings(1,3){
22
- // color: #B4DA55;
23
- // }
24
- // }
25
- // ------------------------------------------------------------------- //
26
-
27
- @mixin headings($from: 1, $to: 6){
28
- %base-heading{
29
- @content
30
- }
31
-
32
- @if $from >= 1 and $to <= 6{
33
- @for $i from $from through $to{
34
- h#{$i}{
35
- @extend %base-heading;
36
- }
37
- }
38
- }
39
- }
40
-
41
-
42
- // ------------------------------------------------------------------- //
43
- // Text Truncation
44
- //
45
- // @include truncate(450px);
46
- // Only works for single-line truncation
47
- // ------------------------------------------------------------------- //
48
-
49
- @mixin truncate($truncation-boundary){
50
- max-width: $truncation-boundary;
51
- white-space: nowrap;
52
- overflow: hidden;
53
- text-overflow: ellipsis;
54
- }
55
-
56
-
57
- // ------------------------------------------------------------------- //
58
- // Sprite Sheet
59
- //
60
- // @include sprite(0,0);
61
- // ------------------------------------------------------------------- //
62
-
63
- @mixin sprite($col, $row){
64
- background: url($sprite-sheet-loc) no-repeat ($col * -$sprite-sheet-grid) ($row * -$sprite-sheet-grid);
65
- }
66
-
67
-
68
- // ------------------------------------------------------------------- //
69
- // Custom Borders / Widths
70
- //
71
- // @include border(2px 0 5px 3px, solid, #B4DA55);
72
- // ------------------------------------------------------------------- //
73
-
74
- @mixin border($border-widths, $border-style, $border-color){
75
- border: $border-style $border-color;
76
- border-width: $border-widths;
77
- }
@@ -1,16 +0,0 @@
1
- // ------------------------------------------------------------------- //
2
- // Brand extensions
3
- // ------------------------------------------------------------------- //
4
-
5
- %brand{
6
- font-family: $brand-font-family !important;
7
- color: $brand-color !important;
8
- }
9
-
10
- %brand-type{
11
- font-family: $brand-font-family !important;
12
- }
13
-
14
- %brand-color{
15
- color: $brand-color !important;
16
- }
@@ -1,30 +0,0 @@
1
- // ------------------------------------------------------------------- //
2
- // Media Objects
3
- // ------------------------------------------------------------------- //
4
-
5
- @if $use-media == true{
6
-
7
- .media{
8
- display:block;
9
- @extend %cf;
10
-
11
- .media__img{
12
- float: left;
13
- margin-right: $base-spacing-unit;
14
- }
15
- .media__img-rev{
16
- float: right;
17
- margin-left: $base-spacing-unit;
18
- }
19
-
20
- .media__body{
21
- overflow: hidden;
22
-
23
- &,
24
- & > :last-child{
25
- margin-bottom: 0;
26
- }
27
- } // END media-body
28
- } // END media
29
-
30
- } // END if
@@ -1,18 +0,0 @@
1
- // ------------------------------------------------------------------- //
2
- // Split
3
- // ------------------------------------------------------------------- //
4
-
5
- @if $use-split == true{
6
-
7
- %split{
8
- margin-left: 0;
9
- text-align: right;
10
-
11
- .split__title{
12
- float: left;
13
- clear: both;
14
- text-align: left;
15
- }
16
- }
17
-
18
- } // END if