kentucky 0.4.3 → 0.5.0

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