kentucky 2.2.2 → 3.0.0

Sign up to get free protection for your applications and to get access to all the features.
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
@@ -0,0 +1,12 @@
1
+ From sass-guidelin.es:
2
+
3
+ And last but not least, most projects will have a vendors/ folder containing all the CSS files from external libraries and frameworks – Normalize, Bootstrap, jQueryUI, FancyCarouselSliderjQueryPowered, and so on. Putting those aside in the same folder is a good way to say “Hey, this is not from me, not my code, not my responsibility”.
4
+
5
+ _normalize.scss
6
+ _bootstrap.scss
7
+ _jquery-ui.scss
8
+ _select2.scss
9
+
10
+ If you have to override a section of any vendor, I recommend you have an 8th folder called vendors-extensions/ in which you may have files named exactly after the vendors they overwrite.
11
+
12
+ For instance, vendors-extensions/_bootstrap.scss is a file containing all CSS rules intended to re-declare some of Bootstrap’s default CSS. This is to avoid editing the vendor files themselves, which is generally not a good idea.
data/kentucky.gemspec CHANGED
@@ -23,8 +23,8 @@ Kentucky is a class-independent front-end framework built as a standard project
23
23
  s.require_paths = ["lib"]
24
24
 
25
25
  s.add_dependency('sass', '~> 3.4')
26
- s.add_dependency('thor', '>= 0')
26
+ s.add_dependency('thor', '~> 0')
27
27
 
28
- s.add_development_dependency('aruba', '>= 0')
29
- s.add_development_dependency('rake', '>= 0')
28
+ s.add_development_dependency('aruba', '= 0.4.11')
29
+ s.add_development_dependency('rake', '~> 0')
30
30
  end
@@ -45,7 +45,7 @@ module Kentucky
45
45
  def create_site_structure
46
46
  make_install_directory
47
47
  if options[:dir]
48
- dirs = %w(images scripts scss css)
48
+ dirs = %w(fonts images scripts scss style)
49
49
  dirs.each do |dir|
50
50
  FileUtils.mkdir(install_path + Pathname.new(dir))
51
51
  end
@@ -1,3 +1,3 @@
1
1
  module Kentucky
2
- VERSION = "2.2.2"
2
+ VERSION = "3.0.0"
3
3
  end
data/readme.md CHANGED
@@ -3,140 +3,47 @@
3
3
 
4
4
  [![Gem Version](https://badge.fury.io/rb/kentucky.png)](http://badge.fury.io/rb/kentucky)
5
5
 
6
- ###### CHANGELOG
6
+ **Kentucky is a front-end project kickstart system to allow for rapidly beginning CSS development on a myriad of projects.**
7
7
 
8
- *2.2.2* - Update generated folders when using `-dir` option
9
- *2.2.0* - Update dependencies and code styles
10
- *2.1.0* - Update file semantics to match custom LookThink linter
8
+ At its core, Kentucky itself provides no initial CSS other than a slightly modified [Normalize.css](https://necolas.github.io/normalize.css/) and typographic styles dictated by the `utilities/variables` file.
11
9
 
12
- ***
10
+ It's meant to provide SCSS structure and guidance to ensure projects remain clean and well-organized from the beginning while allowing developers full freedom to use whatever naming conventions, methodologies, and HTML structure required for the project.
13
11
 
14
- Kentucky was originally an additional library to use with Bourbon as our developers ventured into the realm of front-end frameworks. As time progressed and more frameworks emerged from all corners of the internet it became clear we needed to create our own.
12
+ ---
15
13
 
16
- Kentucky is meant to serve as a leaping point for front-end projects. It has no grid system (flexbox is simple enough without complicated DOM cluttering of classes) and is based entirely on the SCSS side of projects. Our framework is invisible to the end user inspecting elements on your site. This leaves developers completely open to use any form of semantics for classes as they're comfortable with.
14
+ # Core structure
15
+ ## Base
17
16
 
18
- Below is some base documentation into what is included in Kentucky.
17
+ The `base/` folder includes two files to start with: `normalize` for increasing expected results and `typography` to apply the variables set in `utilities/variables` to typographic elements. Once created, the files in this folder should rarely be edited unless a fundamental shift in the project design is required.
19
18
 
20
- ***
19
+ Additional files to be added to this folder could include: `forms`, `tables`, etc.
21
20
 
22
- ### Base
21
+ ## Components
23
22
 
24
- ##### Project Settings
25
- This file serves as the starting point for all projects. Full of default values for typography, spacing, colors, etc. it's the perfect place to store global, project-specific variables to use throughout your project.
23
+ The `components/` folder may contain specific modules like a slider, a loader, a widget, or anything along those lines. There should typically be a lot of files in `components` since the whole site/application should be mostly composed of tiny modules.
26
24
 
27
- ##### Layouts
28
- A very barebones file meant to serve as a place to keep global layout-related styles.
25
+ Example files to be included in this folder could include: `buttons`, `dropdown`, `media`, `thumbnails`, etc.
29
26
 
30
- ##### Typography
31
- Slightly deceiving in name, but houses general typography / main content styles and normalization. This is where a majority of the variables (related to typography) in *_project-settings.scss* are called.
27
+ ## Layout
32
28
 
33
- ##### Buttons
34
- Normalization of all button-style inputs and serves as a location where project-wide button styles can live.
29
+ The `layout/` folder contains everything that takes part in laying out the site or application. This folder could have stylesheets for the main parts of the site (header, footer, navigation, sidebar) and/or the site grid system (if custom; vendor grid systems should be included in `vendors/`).
35
30
 
36
- ##### Forms
37
- Normalization of form elements.
31
+ Example files to be included in this folder could include: `header`, `footer`, `hero`, `grid`, etc.
38
32
 
39
- ##### Lists
40
- Normalization of unordered / ordered lists as well as definition lists. Also includes placeholder extends `%default-ul` and `%default-ol` that can applied to `ul` and `ol` elements that re-add the default list-styles for both as well as some margin/padding.
33
+ ## Pages
41
34
 
42
- ##### Tables
43
- Normalization of table elements.
35
+ The `pages/` folder is for page-specific styles. Each file in this folder should be named after the page it relates to.
44
36
 
37
+ Example files to be included in this folder could include: `home`, `blog`, `about`, `contact`, etc.
45
38
 
46
- ### Addons
39
+ ## Utilities
47
40
 
48
- ##### Border
49
- A simple mixin that allows users to define unequal border widths inline with border style and color.
41
+ The `utilities/` folder gathers all Sass tools and helpers used across the project. Every global variable, function, mixin and placeholder should be put in here. It already includes `functions`, `mixins`, and `variables` to help jumpstart the process.
50
42
 
51
- *Usage Example:*
43
+ Example files to be included in this folder could include: `fonts`, `icons`, `media-queries`, etc.
52
44
 
53
- ```SCSS
54
- @include border(1px 2px 5px, solid, #b4d455);
55
- ```
45
+ ## Vendors
56
46
 
57
- ##### Clearfix
58
- Simple mixin to call the super-micro clearfix snippet based on Theirry Koblentz's minification of Nicolas Gallagher's micro clearfix.
47
+ The `vendors/` folder is to ensure any external libraries or frameworks remain separated from the core site styles. If you require vendor overrides, it's encouraged to make another folder (within the root SCSS folder) called `vendor-extensions` to keep vendor files intact should they release updates.
59
48
 
60
- *Usage Example:*
61
-
62
- ```SCSS
63
- @include clearfix;
64
- ```
65
-
66
- ##### Easings
67
- Variable-based timing functions to be used in transition / animation styles.
68
-
69
- *Usage Example:*
70
-
71
- ```SCSS
72
- .selector {
73
- transition: all .5s #{$ease-in-quad};
74
- }
75
- ```
76
-
77
- ##### Hide Text
78
- Simple mixin to "hide text" in a new method, akin to the old -9999px hack to move text off of image replaced objects.
79
-
80
- *Usage Example:*
81
-
82
- ```SCSS
83
- @include hide-text;
84
- ```
85
-
86
- ##### Input Types
87
- Primarily created for usage in the button / form normalization files but these can be used to target all button / text inputs at once without having to list each individually.
88
-
89
- *Usage Example:*
90
-
91
- ```SCSS
92
- #{$all-button-inputs} {
93
- margin-bottom: 20px;
94
- }
95
- ```
96
-
97
- ##### Position
98
- Akin to the border mixin, this allows users to include the type of positioning and coordinates in a single line.
99
-
100
- ```SCSS
101
- @include position(absolute, 10px 20px 0 0);
102
- ```
103
-
104
- *Note that all four values are required.*
105
-
106
-
107
- ##### Size
108
- A dead simple mixin allowing users to set the width / height on a single line.
109
-
110
- ```SCSS
111
- @include size(15px 20px);
112
- ```
113
-
114
- *A single value will print the same value for width and height.*
115
-
116
- ```SCSS
117
- @include size(20px);
118
- ```
119
-
120
-
121
- ##### Truncate
122
- Mixin that allows single-line, CSS-based truncation with an ellipsis. Requires a width value.
123
-
124
- ```SCSS
125
- @include truncate(300px);
126
- ```
127
-
128
-
129
- ### Functions
130
-
131
- ##### Assign
132
- Used in the input types addon. Usage is fairly minimal outside of that.
133
-
134
- ##### Tint / Shade
135
- An improvement to the typical `darken` / `lighten` abilities of SCSS. Tint and shade add white / black respectively to create richer colors.
136
-
137
- ```SCSS
138
- .selector {
139
- background-color: tint(#b4d455, 5%);
140
- color: shade($brand-color, 10%);
141
- }
142
- ```
49
+ Example folders and files to be included in this folder include: `bootstrap/files`, `susy/files`, `js-plugin/files`, etc.
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: 2.2.2
4
+ version: 3.0.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: 2015-03-02 00:00:00.000000000 Z
13
+ date: 2015-11-11 00:00:00.000000000 Z
14
14
  dependencies:
15
15
  - !ruby/object:Gem::Dependency
16
16
  name: sass
@@ -30,42 +30,42 @@ dependencies:
30
30
  name: thor
31
31
  requirement: !ruby/object:Gem::Requirement
32
32
  requirements:
33
- - - ">="
33
+ - - "~>"
34
34
  - !ruby/object:Gem::Version
35
35
  version: '0'
36
36
  type: :runtime
37
37
  prerelease: false
38
38
  version_requirements: !ruby/object:Gem::Requirement
39
39
  requirements:
40
- - - ">="
40
+ - - "~>"
41
41
  - !ruby/object:Gem::Version
42
42
  version: '0'
43
43
  - !ruby/object:Gem::Dependency
44
44
  name: aruba
45
45
  requirement: !ruby/object:Gem::Requirement
46
46
  requirements:
47
- - - ">="
47
+ - - '='
48
48
  - !ruby/object:Gem::Version
49
- version: '0'
49
+ version: 0.4.11
50
50
  type: :development
51
51
  prerelease: false
52
52
  version_requirements: !ruby/object:Gem::Requirement
53
53
  requirements:
54
- - - ">="
54
+ - - '='
55
55
  - !ruby/object:Gem::Version
56
- version: '0'
56
+ version: 0.4.11
57
57
  - !ruby/object:Gem::Dependency
58
58
  name: rake
59
59
  requirement: !ruby/object:Gem::Requirement
60
60
  requirements:
61
- - - ">="
61
+ - - "~>"
62
62
  - !ruby/object:Gem::Version
63
63
  version: '0'
64
64
  type: :development
65
65
  prerelease: false
66
66
  version_requirements: !ruby/object:Gem::Requirement
67
67
  requirements:
68
- - - ">="
68
+ - - "~>"
69
69
  - !ruby/object:Gem::Version
70
70
  version: '0'
71
71
  description: 'Kentucky is a class-independent front-end framework built as a standard
@@ -85,24 +85,16 @@ files:
85
85
  - Gemfile.lock
86
86
  - LICENSE
87
87
  - Rakefile
88
- - app/assets/stylesheets/kentucky/_kentucky.scss
89
- - app/assets/stylesheets/kentucky/addons/_border.scss
90
- - app/assets/stylesheets/kentucky/addons/_clearfix.scss
91
- - app/assets/stylesheets/kentucky/addons/_easings.scss
92
- - app/assets/stylesheets/kentucky/addons/_hide-text.scss
93
- - app/assets/stylesheets/kentucky/addons/_input-types.scss
94
- - app/assets/stylesheets/kentucky/addons/_position.scss
95
- - app/assets/stylesheets/kentucky/addons/_size.scss
96
- - app/assets/stylesheets/kentucky/addons/_truncate.scss
97
- - app/assets/stylesheets/kentucky/base/_buttons.scss
98
- - app/assets/stylesheets/kentucky/base/_forms.scss
99
- - app/assets/stylesheets/kentucky/base/_layouts.scss
100
- - app/assets/stylesheets/kentucky/base/_lists.scss
101
- - app/assets/stylesheets/kentucky/base/_project-settings.scss
102
- - app/assets/stylesheets/kentucky/base/_tables.scss
103
- - app/assets/stylesheets/kentucky/base/_typography.scss
104
- - app/assets/stylesheets/kentucky/functions/_assign.scss
105
- - app/assets/stylesheets/kentucky/functions/_tint-shade.scss
88
+ - app/assets/stylesheets/base/_normalize.scss
89
+ - app/assets/stylesheets/base/_typography.scss
90
+ - app/assets/stylesheets/components/README
91
+ - app/assets/stylesheets/layout/README
92
+ - app/assets/stylesheets/pages/README
93
+ - app/assets/stylesheets/project.scss
94
+ - app/assets/stylesheets/utilities/_functions.scss
95
+ - app/assets/stylesheets/utilities/_mixins.scss
96
+ - app/assets/stylesheets/utilities/_variables.scss
97
+ - app/assets/stylesheets/vendors/README
106
98
  - bin/kentucky
107
99
  - features/install.feature
108
100
  - features/step_definitions/kentucky_steps.rb
@@ -137,7 +129,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
137
129
  version: '0'
138
130
  requirements: []
139
131
  rubyforge_project:
140
- rubygems_version: 2.4.5
132
+ rubygems_version: 2.4.8
141
133
  signing_key:
142
134
  specification_version: 4
143
135
  summary: SCSS project base and mixin library.
@@ -1,52 +0,0 @@
1
- // ------------------------------------------------------------------- //
2
- // Kentucky Project Settings
3
- //
4
- // Global variables used throughout Kentucky / projects.
5
- // ------------------------------------------------------------------- //
6
-
7
- @import "base/project-settings";
8
-
9
-
10
-
11
- // ------------------------------------------------------------------- //
12
- // Kentucky Imports - Functions
13
- //
14
- // SCSS functions required by other elements of Kentucky.
15
- // ------------------------------------------------------------------- //
16
-
17
- @import "functions/assign";
18
- @import "functions/tint-shade";
19
-
20
-
21
-
22
- // ------------------------------------------------------------------- //
23
- // Kentucky Import - Addons
24
- //
25
- // Additional mixin addons to help speed up front-end development.
26
- // ------------------------------------------------------------------- //
27
-
28
- @import "addons/border";
29
- @import "addons/clearfix";
30
- @import "addons/easings";
31
- @import "addons/hide-text";
32
- @import "addons/input-types";
33
- @import "addons/position";
34
- @import "addons/size";
35
- @import "addons/truncate";
36
-
37
-
38
-
39
- // ------------------------------------------------------------------- //
40
- // Kentucky Imports - Base
41
- //
42
- // These are files related to project-settings (variables) and a
43
- // custom set of normalization styles for more consistant HTML
44
- // element display as a starting point.
45
- // ------------------------------------------------------------------- //
46
-
47
- @import "base/layouts";
48
- @import "base/typography";
49
- @import "base/buttons";
50
- @import "base/forms";
51
- @import "base/lists";
52
- @import "base/tables";
@@ -1,30 +0,0 @@
1
- // ------------------------------------------------------------------- //
2
- // Border Mixin
3
- //
4
- // For use in instances where multiple border-widths are required
5
- // ------------------------------------------------------------------- //
6
-
7
- @mixin border($border-width, $border-style: solid, $border-color: black) {
8
- // if too many widths, throw error
9
- @if (length($border-width) > 4) {
10
- @warn "Border-width accepts a maximum of 4 width parameters; #{length($border-width)} found.";
11
- }
12
-
13
- // New border width list
14
- $new-width: ();
15
-
16
- // Populate it
17
- @for $i from 1 through length($border-width) {
18
-
19
- // If border is unitless, append unit
20
- @if unitless(nth($border-width, $i)) {
21
- $new-width: append($new-width, nth($border-width, $i) + px);
22
- } @else {
23
- $new-width: append($new-width, nth($border-width, $i));
24
- }
25
- }
26
-
27
- border-style: $border-style;
28
- border-color: $border-color;
29
- border-width: $new-width;
30
- }
@@ -1,14 +0,0 @@
1
- // ------------------------------------------------------------------- //
2
- // Micro Clearfix
3
- //
4
- // Based on Thierry Koblentz's blog post on minimizing the already
5
- // micro clearfix by Nicolas Gallagher.
6
- // ------------------------------------------------------------------- //
7
-
8
- @mixin clearfix {
9
- &:after {
10
- display: table;
11
- clear: both;
12
- content: "";
13
- }
14
- }
@@ -1,37 +0,0 @@
1
- // ------------------------------------------------------------------- //
2
- // Timing Functions
3
- //
4
- // Used for transitions / animations.
5
- //
6
- // Taken from http://easings.net/
7
- // ------------------------------------------------------------------- //
8
-
9
- // Ease In
10
- $ease-in-sine: cubic-bezier(.47, 0, .745, .715);
11
- $ease-in-quad: cubic-bezier(.55, .085, .68, .53);
12
- $ease-in-cubic: cubic-bezier(.55, .055, .675, .19);
13
- $ease-in-quart: cubic-bezier(.895, .03, .685, .22);
14
- $ease-in-quint: cubic-bezier(.755, .05, .855, .06);
15
- $ease-in-expo: cubic-bezier(.95, .05, .795, .035);
16
- $ease-in-circ: cubic-bezier(.6, .04, .98, .335);
17
- $ease-in-back: cubic-bezier(.6, -.28, .735, .045);
18
-
19
- // Ease Out
20
- $ease-out-sine: cubic-bezier(.39, .575, .565, 1);
21
- $ease-out-quad: cubic-bezier(.25, .46, .45, .94);
22
- $ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
23
- $ease-out-quart: cubic-bezier(.165, .84, .44, 1);
24
- $ease-out-quint: cubic-bezier(.23, 1, .32, 1);
25
- $ease-out-expo: cubic-bezier(.19, 1, .22, 1);
26
- $ease-out-circ: cubic-bezier(.075, .82, .165, 1);
27
- $ease-out-back: cubic-bezier(.175, .885, .32, 1.275);
28
-
29
- // Ease In Out
30
- $ease-in-out-sine: cubic-bezier(.445, .05, .55, .95);
31
- $ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
32
- $ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
33
- $ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
34
- $ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
35
- $ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
36
- $ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);
37
- $ease-in-out-back: cubic-bezier(.68, -.55, .265, 1.55);