kentucky 0.5.2 → 1.0.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 (45) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +1 -0
  3. data/app/assets/stylesheets/kentucky/_debug.scss +70 -74
  4. data/app/assets/stylesheets/kentucky/_kentucky.scss +47 -16
  5. data/app/assets/stylesheets/kentucky/_project-settings.scss +80 -41
  6. data/app/assets/stylesheets/kentucky/base/_forms.scss +65 -0
  7. data/app/assets/stylesheets/kentucky/base/_normalize.scss +33 -7
  8. data/app/assets/stylesheets/kentucky/base/_typography.scss +38 -29
  9. data/app/assets/stylesheets/kentucky/functions/_gradient-functions.scss +214 -0
  10. data/app/assets/stylesheets/kentucky/functions/_remify.scss +39 -0
  11. data/app/assets/stylesheets/kentucky/{extends/_mute.scss → functions/_strip-units.scss} +3 -4
  12. data/app/assets/stylesheets/kentucky/functions/_tint-shade.scss +12 -0
  13. data/app/assets/stylesheets/kentucky/grid/_grid.scss +114 -0
  14. data/app/assets/stylesheets/kentucky/{extends → helpers}/_alignment.scss +0 -0
  15. data/app/assets/stylesheets/kentucky/helpers/_anti-aliased.scss +8 -0
  16. data/app/assets/stylesheets/kentucky/helpers/_border.scss +32 -0
  17. data/app/assets/stylesheets/kentucky/{extends → helpers}/_breadcrumbs.scss +0 -0
  18. data/app/assets/stylesheets/kentucky/{extends → helpers}/_capslock.scss +0 -0
  19. data/app/assets/stylesheets/kentucky/helpers/_clearfix.scss +14 -0
  20. data/app/assets/stylesheets/kentucky/{mixins → helpers}/_font-size.scss +4 -5
  21. data/app/assets/stylesheets/kentucky/{extends → helpers}/_go.scss +0 -0
  22. data/app/assets/stylesheets/kentucky/helpers/_headings.scss +11 -0
  23. data/app/assets/stylesheets/kentucky/helpers/_hide-text.scss +9 -0
  24. data/app/assets/stylesheets/kentucky/helpers/_html5-input-types.scss +30 -0
  25. data/app/assets/stylesheets/kentucky/helpers/_linear-gradient.scss +42 -0
  26. data/app/assets/stylesheets/kentucky/helpers/_mute.scss +15 -0
  27. data/app/assets/stylesheets/kentucky/helpers/_position.scss +42 -0
  28. data/app/assets/stylesheets/kentucky/helpers/_prefixer.scss +34 -0
  29. data/app/assets/stylesheets/kentucky/helpers/_radial-gradient.scss +24 -0
  30. data/app/assets/stylesheets/kentucky/{extends → helpers}/_show-hide.scss +0 -0
  31. data/app/assets/stylesheets/kentucky/helpers/_size.scss +44 -0
  32. data/app/assets/stylesheets/kentucky/helpers/_strip-unit.scss +7 -0
  33. data/app/assets/stylesheets/kentucky/helpers/_transitions.scss +34 -0
  34. data/app/assets/stylesheets/kentucky/helpers/_triangle.scss +49 -0
  35. data/app/assets/stylesheets/kentucky/helpers/_truncate.scss +19 -0
  36. data/kentucky.gemspec +3 -3
  37. data/lib/kentucky/version.rb +1 -1
  38. data/readme.md +14 -36
  39. metadata +34 -19
  40. data/Kentucky.sublime-workspace +0 -556
  41. data/app/assets/stylesheets/kentucky/mixins/_borders.scss +0 -10
  42. data/app/assets/stylesheets/kentucky/mixins/_headings.scss +0 -23
  43. data/app/assets/stylesheets/kentucky/mixins/_sprite.scss +0 -9
  44. data/app/assets/stylesheets/kentucky/mixins/_truncate.scss +0 -14
  45. data/app/assets/stylesheets/style.scss +0 -12
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 10211c900f7553c0c6a19dff96773a3598618ba8
4
- data.tar.gz: 1d7ca345d4f79bd6d597bd84d62fcb6ba529a6de
3
+ metadata.gz: 3a59924ca0a353eebbd78bb2e8a381fb5cc7e67e
4
+ data.tar.gz: 75b54aa5272e9022dd18dc46c6650fbc4e0add4c
5
5
  SHA512:
6
- metadata.gz: dd2414cf0997d6c055ed1bc0061df06bcb2ca1a25228a686ce1a2d1e14605390514f4d97fffa23b9e92128da638b46d1ea970e5ab81d9105324026fcd8ec12ef
7
- data.tar.gz: e3331bce0dbc33614bfda3a19ba4b069483d860bee2fa8ec85701ed52ceaa2c545325c26a7fee614241421b5bc9a58c816acccfca6a180bde9f4b3d999834dc7
6
+ metadata.gz: 130cf010f63bd348c6e4c0fcce45bcc612d79c2d9e61285ade8e4f2dd2587f674e5dbcd19015f885d24b2b5e4b83ad885e1ca1ed71ee952ffb252a35907a68fc
7
+ data.tar.gz: 726a114a22810464d3e6251b555e708df06fdea7eb04276d12fde99d6e74c17aaa723362d15db471fcc6b4a6481c72ecb68948496cff00c202708c2b5cf92cc9
data/.gitignore CHANGED
@@ -5,3 +5,4 @@
5
5
  demo/
6
6
  tmp/
7
7
  tags
8
+ app/assets/stylesheets/kentucky/config.codekit
@@ -7,87 +7,83 @@
7
7
  // Yellow == Double-check
8
8
  // None == Should be okiedokie
9
9
 
10
- @if $debug-mode == true{
10
+ // Empty page elements?
11
11
 
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
- }
12
+ :empty{
13
+ outline: 5px solid yellow;
14
+ }
15
+
16
+
17
+ // Images require 'alt' attributes, empty 'alt's are fine
18
+ // No 'alt' is bad, flagged in red
19
+
20
+ img{
21
+ outline: 5px solid red;
22
+
23
+ &[alt]{
24
+ outline: none;
53
25
  }
54
-
55
-
56
- // 'tr's as children of 'table's isn't great, did you need 'thead'/'tbody'?
57
-
58
- table > tr{
26
+ &[alt=""]{
59
27
  outline: 5px solid yellow;
60
28
  }
29
+ }
30
+
31
+
32
+ // Links benefit from 'title' attributes
33
+ // Not severe, but good to check
34
+
35
+ a{
36
+ outline: 5px solid yellow;
61
37
 
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]{
38
+ &[title]{
73
39
  outline: none;
74
40
  }
75
- textarea[rows][cols]{
76
- outline: none;
77
- }
78
- input[type=submit]{
41
+ }
42
+
43
+
44
+ // Esnure lists only contain 'li's as children
45
+
46
+ ul,
47
+ ol{
48
+ > *:not(li){
79
49
  outline: 5px solid red;
80
-
81
- &[value]{
82
- outline: none;
83
- }
84
50
  }
85
-
86
-
87
- // Avoid inline styles like the plague that they are
88
-
89
- [style]{
90
- outline: 5px solid red;
51
+ }
52
+
53
+
54
+ // 'tr's as children of 'table's isn't great, did you need 'thead'/'tbody'?
55
+
56
+ table > tr{
57
+ outline: 5px solid yellow;
58
+ }
59
+
60
+
61
+ // Various form-field types have required attributes
62
+ // 'input's need 'type'
63
+ // 'textarea's need 'rows' and 'cols'
64
+ // 'submit' buttons need 'value'
65
+
66
+ textarea,
67
+ input{
68
+ outline: 5px solid yellow;
69
+ }
70
+ input[type]{
71
+ outline: none;
72
+ }
73
+ textarea[rows][cols]{
74
+ outline: none;
75
+ }
76
+ input[type=submit]{
77
+ outline: 5px solid red;
78
+
79
+ &[value]{
80
+ outline: none;
91
81
  }
92
-
93
- } // END if
82
+ }
83
+
84
+
85
+ // Avoid inline styles like the plague that they are
86
+
87
+ [style]{
88
+ outline: 5px solid red;
89
+ }
@@ -1,35 +1,66 @@
1
1
  // ------------------------------------------------------------------- //
2
- // Kentucky Imports
2
+ // Kentucky Project Imports
3
+ // ------------------------------------------------------------------- //
4
+ // ------------------------------------------------------------------- //
5
+ // Helpers, Functions, Mixins, and Extends
3
6
  // ------------------------------------------------------------------- //
4
7
 
5
- @import "project-settings";
8
+ // Called first as these are used in other helpers/files
9
+ @import "helpers/html5-input-types";
10
+
11
+ // Functions
12
+ @import "functions/gradient-functions";
13
+ @import "functions/remify";
14
+ @import "functions/tint-shade";
15
+ @import "functions/strip-units";
16
+
17
+ // Mixins
18
+ @import "helpers/border";
19
+ @import "helpers/font-size";
20
+ @import "helpers/headings";
21
+ @import "helpers/linear-gradient";
22
+ @import "helpers/position";
23
+ @import "helpers/prefixer";
24
+ @import "helpers/radial-gradient";
25
+ @import "helpers/size";
26
+ @import "helpers/transitions";
27
+ @import "helpers/truncate";
28
+
29
+ // Extends
30
+ @import "helpers/alignment";
31
+ @import "helpers/breadcrumbs";
32
+ @import "helpers/capslock";
33
+ @import "helpers/go";
34
+ @import "helpers/mute";
35
+ @import "helpers/show-hide";
36
+
37
+ // Addons
38
+ @import "helpers/anti-aliased";
39
+ @import "helpers/clearfix";
40
+ @import "helpers/hide-text";
6
41
 
7
42
  // ------------------------------------------------------------------- //
8
- // Mixins & Extends
43
+ // Project Settings
9
44
  // ------------------------------------------------------------------- //
10
45
 
11
- @import "mixins/font-size";
12
- @import "mixins/headings";
13
- @import "mixins/sprite";
14
- @import "mixins/borders";
15
- @import "mixins/truncate";
46
+ @import "project-settings";
47
+
48
+ // ------------------------------------------------------------------- //
49
+ // Grid
50
+ // ------------------------------------------------------------------- //
16
51
 
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";
52
+ @import "grid/grid";
23
53
 
24
54
  // ------------------------------------------------------------------- //
25
55
  // Base
26
56
  // ------------------------------------------------------------------- //
27
57
 
28
58
  @import "base/normalize";
59
+ @import "base/forms";
29
60
  @import "base/typography";
30
61
 
31
62
  // ------------------------------------------------------------------- //
32
- // Debug
63
+ // Debug (If Required)
33
64
  // ------------------------------------------------------------------- //
34
65
 
35
- @import "debug";
66
+ // @import "debug";
@@ -2,68 +2,107 @@
2
2
  // Project Settings
3
3
  // ------------------------------------------------------------------- //
4
4
  // ------------------------------------------------------------------- //
5
- // Toggleable Helpers / Modules
5
+ // Typography
6
6
  // ------------------------------------------------------------------- //
7
7
 
8
- $debug-mode: false !default;
8
+ $base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
9
+ $brand-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
9
10
 
10
- // If using a sprite, set relevant variables:
11
- $sprite-sheet-location: "url/to/spritesheet.png";
12
- $sprite-sheet-gridsize: 36px;
13
11
 
14
12
  // ------------------------------------------------------------------- //
15
- // Typography
13
+ // Sizes
16
14
  // ------------------------------------------------------------------- //
17
15
 
18
- // Brand
16
+ $base-font-size: 16px;
17
+ $base-line-height: 24px;
19
18
 
20
- $brand-font-family: $helvetica !default;
21
- $brand-color: #333 !default;
22
- $brand-round: 5px !default; // Used for border-radius
19
+ $base-border-radius: 3px;
23
20
 
24
- // Base
21
+ // Heading Sizes
25
22
 
26
- $base-font-family: $helvetica !default;
27
- $base-font-size: 14px !default;
28
- $base-line-height: 1 !default;
29
- $base-font-color: #333 !default;
30
- $link-color: #bebebe !default;
23
+ $giga-size: 96px; // %giga
24
+ $mega-size: 72px; // %mega
25
+ $kilo-size: 48px; // %kilo
31
26
 
32
- // Heading Sizes
27
+ $h1-size: 42px; // %alpha
28
+ $h2-size: 36px; // %bravo
29
+ $h3-size: 24px; // %charlie
30
+ $h4-size: 20px; // %delta
31
+ $h5-size: 18px; // %echo
32
+ $h6-size: 16px; // %foxtrot
33
+
34
+ $milli-size: 12px; // %milli
35
+ $micro-size: 10px; // %micro
36
+
37
+
38
+ // ------------------------------------------------------------------- //
39
+ // Weights
40
+ // ------------------------------------------------------------------- //
41
+
42
+ $lightest: 100;
43
+ $light: 300;
44
+ $normal: 400;
45
+ $semibold: 600;
46
+ $bold: 700;
47
+ $black: 900;
48
+
49
+
50
+ // ------------------------------------------------------------------- //
51
+ // Colors
52
+ // ------------------------------------------------------------------- //
33
53
 
34
- $h1-size: 42px !default; // %alpha
35
- $h2-size: 36px !default; // %bravo
36
- $h3-size: 24px !default; // %charlie
37
- $h4-size: 20px !default; // %delta
38
- $h5-size: 18px !default; // %echo
39
- $h6-size: 16px !default; // %foxtrot
54
+ // Base colors
55
+ $base-body-color: #fff;
56
+ $base-font-color: #333;
57
+ $base-border-color: #ddd;
40
58
 
41
- $giga-size: 96px !default;
42
- $mega-size: 72px !default;
43
- $kilo-size: 48px !default;
59
+ // Brand colors
60
+ $brand-color: #477DCA; // Blue
44
61
 
45
- $milli-size: 12px !default;
46
- $micro-size: 10px !default;
62
+ // Link Colors
63
+ $base-link-color: $brand-color;
64
+ $hover-link-color: lighten($brand-color, 10%);
47
65
 
48
66
 
49
67
  // ------------------------------------------------------------------- //
50
- // Font Weights
68
+ // Form Variables
51
69
  // ------------------------------------------------------------------- //
52
70
 
53
- $lightest: 100 !default;
54
- $light: 300 !default;
55
- $normal: 400 !default;
56
- $semibold: 600 !default;
57
- $bold: 700 !default;
58
- $black: 900 !default;
71
+ $form-border-color: $base-border-color;
72
+ $form-border-color-hover: darken($base-border-color, 10%);
73
+ $form-border-color-focus: $brand-color;
74
+ $form-border-radius: $base-border-radius;
75
+
76
+ $form-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
77
+ $form-box-shadow-focus:
78
+ $form-box-shadow,
79
+ 0 0 5px rgba(darken($form-border-color-focus, 5%), 0.7);
80
+
81
+ $form-font-family: $base-font-family;
82
+ $form-font-size: $base-font-size;
83
+
84
+
85
+ // ------------------------------------------------------------------- //
86
+ // Grid Overrides
87
+ // ------------------------------------------------------------------- //
88
+
89
+ // $max-width: 960px;
90
+ // $grid-columns: 12;
91
+ // $grid-gutter: 15px;
92
+
59
93
 
60
94
  // ------------------------------------------------------------------- //
61
95
  // Media Query Widths
62
- //
63
- // [max-width] [in pixels] [columns]
64
96
  // ------------------------------------------------------------------- //
65
97
 
66
- $mobile: new-breakpoint(max-width 480px 4);
67
- $tablet: new-breakpoint(max-width 990px 8);
68
- $laptop: new-breakpoint(max-width 1440px 12);
69
- $desktop: new-breakpoint(max-width 1920px 12);
98
+ $mobile: 480px;
99
+ $tablet: 990px;
100
+ $laptop: 1440px;
101
+ $desktop: 1920px;
102
+
103
+
104
+ // ------------------------------------------------------------------- //
105
+ // Variables
106
+ //
107
+ // Any other global variables required should go below
108
+ // ------------------------------------------------------------------- //
@@ -0,0 +1,65 @@
1
+ // ------------------------------------------------------------------- //
2
+ // Form Normaliztion; akin to Formalize
3
+ // ------------------------------------------------------------------- //
4
+
5
+ fieldset{
6
+ margin: 0 0 ($base-line-height / 2) 0;
7
+ padding: $base-line-height;
8
+ background: ligthen($base-border-color, 10%);
9
+ border: 1px solid $base-border-color;
10
+ }
11
+
12
+ label{
13
+ margin-bottom: $base-line-height / 4;
14
+ font-weight: bold;
15
+
16
+ &.required:after{
17
+ content: "*";
18
+ }
19
+ }
20
+
21
+ #{$all-text-inputs},
22
+ textarea{
23
+ width: 100%;
24
+ margin-bottom: $base-line-height / 2;
25
+ padding: ($base-line-height / 3) ($base-line-height / 3);
26
+ background: #fff;
27
+ border: 1px solid $form-border-color;
28
+ border-radius: $form-border-radius;
29
+ box-shadow: $form-box-shadow;
30
+ font: $form-font-size / $base-line-height $form-font-family;
31
+ @include transition(border-color);
32
+
33
+ &:hover{
34
+ border-color: $form-border-color-hover;
35
+ }
36
+
37
+ &:focus{
38
+ border-color: $form-border-color-focus;
39
+ box-shadow: $form-box-shadow-focus;
40
+ outline: none;
41
+ }
42
+ }
43
+
44
+ textarea{
45
+ resize: vertical;
46
+ }
47
+
48
+ input[type="search"]{
49
+ appearance: none;
50
+ }
51
+
52
+ input[type="checkbox"],
53
+ input[type="radio"]{
54
+ display: inline;
55
+ margin-right: $base-line-height / 4;
56
+ }
57
+
58
+ button,
59
+ input[type="submit"]{
60
+ appearance: none;
61
+ vertical-align: middle;
62
+ cursor: pointer;
63
+ white-space: nowrap;
64
+ user-select: none;
65
+ }