kentucky 2.2.2 → 3.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 (36) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +8 -0
  3. data/LICENSE +2 -2
  4. data/app/assets/stylesheets/base/_normalize.scss +322 -0
  5. data/app/assets/stylesheets/base/_typography.scss +62 -0
  6. data/app/assets/stylesheets/components/README +9 -0
  7. data/app/assets/stylesheets/layout/README +10 -0
  8. data/app/assets/stylesheets/pages/README +6 -0
  9. data/app/assets/stylesheets/project.scss +18 -0
  10. data/app/assets/stylesheets/utilities/_functions.scss +37 -0
  11. data/app/assets/stylesheets/utilities/_mixins.scss +306 -0
  12. data/app/assets/stylesheets/utilities/_variables.scss +122 -0
  13. data/app/assets/stylesheets/vendors/README +12 -0
  14. data/kentucky.gemspec +3 -3
  15. data/lib/kentucky/generator.rb +1 -1
  16. data/lib/kentucky/version.rb +1 -1
  17. data/readme.md +23 -116
  18. metadata +21 -29
  19. data/app/assets/stylesheets/kentucky/_kentucky.scss +0 -52
  20. data/app/assets/stylesheets/kentucky/addons/_border.scss +0 -30
  21. data/app/assets/stylesheets/kentucky/addons/_clearfix.scss +0 -14
  22. data/app/assets/stylesheets/kentucky/addons/_easings.scss +0 -37
  23. data/app/assets/stylesheets/kentucky/addons/_hide-text.scss +0 -9
  24. data/app/assets/stylesheets/kentucky/addons/_input-types.scss +0 -82
  25. data/app/assets/stylesheets/kentucky/addons/_position.scss +0 -42
  26. data/app/assets/stylesheets/kentucky/addons/_size.scss +0 -47
  27. data/app/assets/stylesheets/kentucky/addons/_truncate.scss +0 -10
  28. data/app/assets/stylesheets/kentucky/base/_buttons.scss +0 -40
  29. data/app/assets/stylesheets/kentucky/base/_forms.scss +0 -86
  30. data/app/assets/stylesheets/kentucky/base/_layouts.scss +0 -13
  31. data/app/assets/stylesheets/kentucky/base/_lists.scss +0 -35
  32. data/app/assets/stylesheets/kentucky/base/_project-settings.scss +0 -112
  33. data/app/assets/stylesheets/kentucky/base/_tables.scss +0 -28
  34. data/app/assets/stylesheets/kentucky/base/_typography.scss +0 -84
  35. data/app/assets/stylesheets/kentucky/functions/_assign.scss +0 -17
  36. data/app/assets/stylesheets/kentucky/functions/_tint-shade.scss +0 -11
@@ -1,9 +0,0 @@
1
- // ------------------------------------------------------------------- //
2
- // Image Replacement - Hide Text
3
- // ------------------------------------------------------------------- //
4
-
5
- @mixin hide-text {
6
- text-indent: 101%;
7
- overflow: hidden;
8
- white-space: nowrap;
9
- }
@@ -1,82 +0,0 @@
1
- // ------------------------------------------------------------------- //
2
- // HTML 5 Input Types
3
- //
4
- // Generate a variable ($all-text-inputs) with a list of each HTML5
5
- // input type with text-based input, excluding textarea.
6
- //
7
- // To use these you must use SCSS interpolation on the variable:
8
- // #{$all-text-inputs}
9
- // #{$all-text-inputs-hover}
10
- // #{$all-text-inputs-focus}
11
- // #{$all-text-inputs-active}
12
- //
13
- // Example:
14
- // #{$all-text-inputs}, textarea {
15
- // border: 1px solid red;
16
- // }
17
- // ------------------------------------------------------------------- //
18
-
19
- $inputs-list: 'input[type="email"]',
20
- 'input[type="number"]',
21
- 'input[type="password"]',
22
- 'input[type="search"]',
23
- 'input[type="tel"]',
24
- 'input[type="text"]',
25
- 'input[type="url"]',
26
-
27
- // Webkit & Gecko may change the display of these in the future
28
- 'input[type="color"]',
29
- 'input[type="date"]',
30
- 'input[type="datetime"]',
31
- 'input[type="datetime-local"]',
32
- 'input[type="month"]',
33
- 'input[type="time"]',
34
- 'input[type="week"]';
35
-
36
- // Bare Inputs
37
- $all-text-inputs: assign-inputs($inputs-list);
38
-
39
- // Hover Pseudo-class
40
- $all-text-inputs-hover: assign-inputs($inputs-list, hover);
41
-
42
- // Focus Pseudo-class
43
- $all-text-inputs-focus: assign-inputs($inputs-list, focus);
44
-
45
- // Active Pseudo-class
46
- $all-text-inputs-active: assign-inputs($inputs-list, active);
47
-
48
-
49
-
50
- // ------------------------------------------------------------------- //
51
- // HTML 5 Button Types
52
- //
53
- // Generate a variable ($all-button-inputs) with a list of each HTML5
54
- // input type with button-based input, excluding button.
55
- //
56
- // To use these you must use SCSS interpolation on the variable:
57
- // #{$all-button-inputs}
58
- // #{$all-button-inputs-hover}
59
- // #{$all-button-inputs-focus}
60
- // #{$all-button-inputs-active}
61
- //
62
- // Example:
63
- // #{$all-button-inputs}, button {
64
- // border: 1px solid red;
65
- // }
66
- // ------------------------------------------------------------------- //
67
-
68
- $inputs-button-list: 'input[type="button"]',
69
- 'input[type="reset"]',
70
- 'input[type="submit"]';
71
-
72
- // Bare inputs
73
- $all-button-inputs: assign-inputs($inputs-button-list);
74
-
75
- // Hover Pseudo-class
76
- $all-button-inputs-hover: assign-inputs($inputs-button-list, hover);
77
-
78
- // Focus Pseudo-class
79
- $all-button-inputs-focus: assign-inputs($inputs-button-list, focus);
80
-
81
- // Active Pseudo-class
82
- $all-button-inputs-active: assign-inputs($inputs-button-list, active);
@@ -1,42 +0,0 @@
1
- // ------------------------------------------------------------------- //
2
- // Basic Positioning (Type + T/L/B/R Values)
3
- //
4
- // @include position(absolute, 10px 0 0 10px);
5
- // ------------------------------------------------------------------- //
6
-
7
- @mixin position($pos-type: relative, $pos-vals: 0 0 0 0) {
8
-
9
- // If no position type designated, default to "relative"
10
- @if type-of($pos-type) == list{
11
- $pos-vals: $pos-type;
12
- $pos-type: relative;
13
- }
14
-
15
- // Separate values into top, right, bottom, left
16
- $top: nth($pos-vals, 1);
17
- $right: nth($pos-vals, 2);
18
- $bottom: nth($pos-vals, 3);
19
- $left: nth($pos-vals, 4);
20
-
21
- // Return position
22
- position: $pos-type;
23
-
24
- // Return values
25
- // If value is a number and has a unit type, print value
26
- // otherwise ignore
27
- @if (type-of($top) == number and not unitless($top)){
28
- top: $top;
29
- }
30
-
31
- @if (type-of($right) == number and not unitless($right)){
32
- right: $right;
33
- }
34
-
35
- @if (type-of($bottom) == number and not unitless($bottom)){
36
- bottom: $bottom;
37
- }
38
-
39
- @if (type-of($left) == number and not unitless($left)){
40
- left: $left;
41
- }
42
- }
@@ -1,47 +0,0 @@
1
- // Sizing mixin
2
- @mixin size($size) {
3
-
4
- // If only one value is present
5
- @if length($size) == 1 {
6
-
7
- @if $size == auto{
8
- width: auto;
9
- height: auto;
10
- }
11
- @else if unitless($size) {
12
- width: $size + px;
13
- height: $size + px;
14
- }
15
- @else if not(unitless($size)) {
16
- width: $size;
17
- height: $size;
18
- }
19
- }
20
-
21
- // If both values are present
22
- @if length($size) == 2 {
23
-
24
- $width: nth($size, 1);
25
- $height: nth($size, 2);
26
-
27
- @if $width == auto {
28
- width: $width;
29
- }
30
- @else if unitless($width){
31
- width: $width + px;
32
- }
33
- @else if not(unitless($width)) {
34
- width: $width;
35
- }
36
-
37
- @if $height == auto{
38
- height: $height;
39
- }
40
- @else if unitless($height) {
41
- height: $height + px;
42
- }
43
- @else if not(unitless($height)) {
44
- height: $height;
45
- }
46
- }
47
- }
@@ -1,10 +0,0 @@
1
- // Truncate single-lined elements
2
-
3
- @mixin truncate($truncate-width: 100%) {
4
- display: inline-block;
5
- max-width: $truncate-width;
6
- overflow: hidden;
7
- text-overflow: ellipsis;
8
- white-space: nowrap;
9
- word-wrap: normal;
10
- }
@@ -1,40 +0,0 @@
1
- // ------------------------------------------------------------------- //
2
- // Button Normalization
3
- //
4
- // General styles to better standardize / simplify default <button>
5
- // elements.
6
- // ------------------------------------------------------------------- //
7
-
8
- #{$all-button-inputs} {
9
- -webkit-font-smoothing: antialiased;
10
- -webkit-appearance: none;
11
- -moz-appearance: none;
12
- -ms-appearance: none;
13
- appearance: none;
14
- display: inline-block;
15
- padding: ($base-spacing / 2) $base-spacing;
16
- background-color: $base-button-color;
17
- border: 0;
18
- border-radius: $base-border-radius;
19
- color: white;
20
- font-family: $base-font-family;
21
- font-size: $base-font-size;
22
- font-weight: bold;
23
- line-height: 1;
24
- text-decoration: none;
25
- vertical-align: middle;
26
- white-space: nowrap;
27
- user-select: none;
28
- cursor: pointer;
29
-
30
- &:hover,
31
- &:focus {
32
- background-color: $hover-button-color;
33
- color: white;
34
- }
35
-
36
- &:disabled {
37
- cursor: not-allowed;
38
- opacity: .5;
39
- }
40
- }
@@ -1,86 +0,0 @@
1
- // ------------------------------------------------------------------- //
2
- // Form Element Normalization
3
- //
4
- // General styles to better standardize / simplify default form
5
- // elements.
6
- // ------------------------------------------------------------------- //
7
-
8
- fieldset {
9
- margin: 0 0 ($base-spacing / 2);
10
- padding: $base-spacing;
11
- background: lighten($base-border-color, 10);
12
- border: $base-border;
13
- }
14
-
15
- input,
16
- label,
17
- select {
18
- display: block;
19
- font-family: $form-font-family;
20
- font-size: $form-font-size;
21
- }
22
-
23
- label {
24
- margin-bottom: $base-spacing / 4;
25
- font-weight: bold;
26
-
27
- &.required:after {
28
- content: "*";
29
- }
30
-
31
- abbr {
32
- display: none;
33
- }
34
- }
35
-
36
- textarea,
37
- #{$all-text-inputs},
38
- select[multiple=multiple] {
39
- width: 100%;
40
- margin-bottom: $base-spacing / 2;
41
- padding: ($base-spacing / 3);
42
- background-color: white;
43
- border: 1px solid $form-border-color;
44
- border-radius: $form-border-radius;
45
- font-family: $form-font-family;
46
- font-size: $form-font-size;
47
- box-shadow: $form-box-shadow;
48
- transition: border-color, .3s;
49
-
50
- &:hover {
51
- border-color: $form-border-color-hover;
52
- }
53
-
54
- &:focus {
55
- border-color: $form-border-color-focus;
56
- box-shadow: $form-box-shadow-focus;
57
- outline: none;
58
- }
59
- }
60
-
61
- textarea {
62
- resize: vertical;
63
- }
64
-
65
- input[type="search"] {
66
- -webkit-appearance: none;
67
- -moz-appearance: none;
68
- -ms-appearance: none;
69
- }
70
-
71
- input[type="checkbox"],
72
- input[type="radio"] {
73
- display: inline;
74
- margin-right: $base-spacing / 4;
75
- }
76
-
77
- input[type="file"] {
78
- width: 100%;
79
- padding-bottom: $base-spacing / 2;
80
- }
81
-
82
- select {
83
- width: auto;
84
- max-width: 100%;
85
- margin-bottom: $base-spacing;
86
- }
@@ -1,13 +0,0 @@
1
- // ------------------------------------------------------------------- //
2
- // Layouts Normalization
3
- // ------------------------------------------------------------------- //
4
-
5
- * {
6
- box-sizing: border-box;
7
- }
8
-
9
- html,
10
- body {
11
- margin: 0;
12
- padding: 0;
13
- }
@@ -1,35 +0,0 @@
1
- // ------------------------------------------------------------------- //
2
- // List Normalization
3
- // ------------------------------------------------------------------- //
4
-
5
- ul,
6
- ol {
7
- margin: 0;
8
- padding: 0;
9
- list-style-type: none;
10
-
11
- &%default-ul {
12
- margin-bottom: $base-spacing / 2;
13
- padding-left: $base-spacing;
14
- list-style-type: disc;
15
- }
16
-
17
- &%default-ol {
18
- margin-bottom: $base-spacing / 2;
19
- padding-left: $base-spacing;
20
- list-style-type: decimal;
21
- }
22
- }
23
-
24
- dl {
25
- margin-bottom: $base-spacing / 2;
26
-
27
- dt {
28
- margin-top: $base-spacing / 2;
29
- font-weight: bold;
30
- }
31
-
32
- dd {
33
- margin: 0;
34
- }
35
- }
@@ -1,112 +0,0 @@
1
- // ------------------------------------------------------------------- //
2
- // Project Settings
3
- //
4
- // This file houses variables related to brand and overall stylistic
5
- // elements (fonts, sizes, colors, etc.) that should be used across
6
- // the site.
7
- //
8
- // This is a basic set for initial functionality but any project-
9
- // related variables that need to be global should exist in this file.
10
- //
11
- // Local variables should still exist in the file in which they are
12
- // required.
13
- // ------------------------------------------------------------------- //
14
-
15
-
16
- // ------------------------------------------------------------------- //
17
- // Typography
18
-
19
- $base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
20
- $header-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
21
-
22
-
23
-
24
- // ------------------------------------------------------------------- //
25
- // Font Sizes
26
-
27
- $base-font-size: 16px;
28
-
29
- $h1-font-size: 42px;
30
- $h2-font-size: 36px;
31
- $h3-font-size: 24px;
32
- $h4-font-size: 20px;
33
- $h5-font-size: 18px;
34
- $h6-font-size: 16px;
35
-
36
-
37
-
38
- // ------------------------------------------------------------------- //
39
- // Line Height
40
-
41
- $base-line-height: 1.5;
42
- $header-line-height: 1.2;
43
-
44
-
45
-
46
- // ------------------------------------------------------------------- //
47
- // Other Sizes
48
-
49
- $base-border-radius: 3px;
50
-
51
- $base-spacing: 20px;
52
-
53
-
54
-
55
- // ------------------------------------------------------------------- //
56
- // Colors
57
-
58
- // Background Color
59
- $base-background-color: white;
60
-
61
- // Font Colors
62
- $base-font-color: #333;
63
- $base-accent-color: #b4d455;
64
-
65
- // Link Colors
66
- $base-link-color: $base-accent-color;
67
- $hover-link-color: shade($base-link-color, 15%);
68
-
69
- // Button Colors
70
- $base-button-color: $base-link-color;
71
- $hover-button-color: $hover-link-color;
72
-
73
- // Border Colors
74
- $base-border-color: #ddd;
75
- $base-border: 1px solid $base-border-color;
76
-
77
-
78
-
79
- // ------------------------------------------------------------------- //
80
- // Forms
81
-
82
- $form-border-color: $base-border-color;
83
- $form-border-color-hover: shade($base-border-color, 10%);
84
- $form-border-color-focus: $base-accent-color;
85
- $form-border-radius: $base-border-radius;
86
-
87
- $form-box-shadow: inset 0 1px 3px rgba(black, .1);
88
- $form-box-shadow-focus: $form-box-shadow,
89
- 0 0 5px rgba($form-border-color-focus, .5);
90
-
91
- $form-font-family: $base-font-family;
92
- $form-font-size: $base-font-size;
93
-
94
-
95
-
96
- // ------------------------------------------------------------------- //
97
- // Media Queries
98
-
99
- $mobile: 480px;
100
- $tablet: 990px;
101
- $laptop: 1440px;
102
- $desktop: 1920px;
103
-
104
-
105
-
106
- // ------------------------------------------------------------------- //
107
- // Z-Index Map
108
-
109
- $z-map: ("base": 0,
110
- "nav": 10,
111
- "overlay": 20,
112
- "modal": 30);