hux 0.0.0 → 0.0.1

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 (73) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +8 -0
  3. data/.hound.yml +5 -0
  4. data/.ruby-version +1 -0
  5. data/.scss-lint.yml +249 -0
  6. data/CHANGELOG.md +4 -0
  7. data/CODE_OF_CONDUCT.md +6 -0
  8. data/Gemfile +3 -0
  9. data/Gulpfile.js +34 -0
  10. data/LICENSE.md +21 -0
  11. data/README.md +1 -0
  12. data/RELEASING.md +21 -0
  13. data/Rakefile +8 -0
  14. data/bin/hux +5 -0
  15. data/circle.yml +7 -0
  16. data/contrib/index.html +1 -0
  17. data/contrib/styles.scss +19 -0
  18. data/core/_base.scss +9 -0
  19. data/core/_generic.scss +152 -0
  20. data/core/_helpers.scss +349 -0
  21. data/core/_minireset.scss +92 -0
  22. data/core/components/_all.scss +15 -0
  23. data/core/components/_breadcrumb.scss +116 -0
  24. data/core/components/_card.scss +77 -0
  25. data/core/components/_dropdown.scss +84 -0
  26. data/core/components/_level.scss +119 -0
  27. data/core/components/_media.scss +64 -0
  28. data/core/components/_menu.scss +72 -0
  29. data/core/components/_message.scss +118 -0
  30. data/core/components/_modal.scss +132 -0
  31. data/core/components/_nav.scss +173 -0
  32. data/core/components/_navbar.scss +441 -0
  33. data/core/components/_pagination.scss +188 -0
  34. data/core/components/_panel.scss +135 -0
  35. data/core/components/_tabs.scss +206 -0
  36. data/core/elements/_all.scss +14 -0
  37. data/core/elements/_box.scss +30 -0
  38. data/core/elements/_button.scss +290 -0
  39. data/core/elements/_container.scss +44 -0
  40. data/core/elements/_content.scss +224 -0
  41. data/core/elements/_form.scss +935 -0
  42. data/core/elements/_icon.scss +28 -0
  43. data/core/elements/_image.scss +56 -0
  44. data/core/elements/_notification.scss +53 -0
  45. data/core/elements/_other.scss +48 -0
  46. data/core/elements/_progress.scss +56 -0
  47. data/core/elements/_table.scss +148 -0
  48. data/core/elements/_tag.scss +132 -0
  49. data/core/elements/_title.scss +81 -0
  50. data/core/grid/_all.scss +2 -0
  51. data/core/grid/_columns.scss +577 -0
  52. data/core/grid/_tiles.scss +53 -0
  53. data/core/layout/_all.scss +3 -0
  54. data/core/layout/_footer.scss +6 -0
  55. data/core/layout/_hero.scss +257 -0
  56. data/core/layout/_section.scss +19 -0
  57. data/core/utilities/_all.scss +6 -0
  58. data/core/utilities/_animations.scss +9 -0
  59. data/core/utilities/_controls.scss +51 -0
  60. data/core/utilities/_derived-variables.scss +81 -0
  61. data/core/utilities/_functions.scss +46 -0
  62. data/core/utilities/_initial-variables.scss +68 -0
  63. data/core/utilities/_mixins.scss +301 -0
  64. data/core/utilities/_variables.scss +153 -0
  65. data/hux.gemspec +31 -0
  66. data/lib/hux/generator.rb +80 -0
  67. data/lib/hux/version.rb +3 -0
  68. data/lib/hux.rb +1 -1
  69. data/package.json +33 -0
  70. data/spec/bitters_spec.rb +17 -0
  71. data/spec/fixtures/application.scss +2 -0
  72. data/spec/spec_helper.rb +3 -0
  73. metadata +183 -12
@@ -0,0 +1,301 @@
1
+ @mixin arrow($color) {
2
+ border: 1px solid $color;
3
+ border-right: 0;
4
+ border-top: 0;
5
+ content: " ";
6
+ display: block;
7
+ height: 0.5em;
8
+ pointer-events: none;
9
+ position: absolute;
10
+ transform: rotate(-45deg);
11
+ width: 0.5em;
12
+ }
13
+
14
+ @mixin block {
15
+ &:not(:last-child) {
16
+ margin-bottom: 1.5rem;
17
+ }
18
+ }
19
+
20
+ @mixin clearfix {
21
+ &:after {
22
+ clear: both;
23
+ content: " ";
24
+ display: table;
25
+ }
26
+ }
27
+
28
+ @mixin center($width, $height: 0) {
29
+ position: absolute;
30
+
31
+ @if $height != 0 {
32
+ left: calc(50% - (#{$width} / 2));
33
+ top: calc(50% - (#{$height} / 2));
34
+ }
35
+ @else {
36
+ left: calc(50% - (#{$width} / 2));
37
+ top: calc(50% - (#{$width} / 2));
38
+ }
39
+ }
40
+
41
+ @mixin delete {
42
+ @include unselectable;
43
+
44
+ -moz-appearance: none;
45
+ -webkit-appearance: none;
46
+ background-color: rgba($black, 0.2);
47
+ border: none;
48
+ border-radius: 290486px;
49
+ cursor: pointer;
50
+ display: inline-block;
51
+ flex-grow: 0;
52
+ flex-shrink: 0;
53
+ font-size: $size-normal;
54
+ height: 20px;
55
+ max-height: 20px;
56
+ max-width: 20px;
57
+ min-height: 20px;
58
+ min-width: 20px;
59
+ outline: none;
60
+ position: relative;
61
+ vertical-align: top;
62
+ width: 20px;
63
+
64
+ &:before,
65
+ &:after {
66
+ background-color: $white;
67
+ content: "";
68
+ display: block;
69
+ left: 50%;
70
+ position: absolute;
71
+ top: 50%;
72
+ transform: translateX(-50%) translateY(-50%) rotate(45deg);
73
+ transform-origin: center center;
74
+ }
75
+
76
+ &:before {
77
+ height: 2px;
78
+ width: 50%;
79
+ }
80
+
81
+ &:after {
82
+ height: 50%;
83
+ width: 2px;
84
+ }
85
+
86
+ &:hover,
87
+ &:focus {
88
+ background-color: rgba($black, 0.3);
89
+ }
90
+
91
+ &:active {
92
+ background-color: rgba($black, 0.4);
93
+ }
94
+
95
+ // Sizes
96
+ &.is-small {
97
+ height: 16px;
98
+ max-height: 16px;
99
+ max-width: 16px;
100
+ min-height: 16px;
101
+ min-width: 16px;
102
+ width: 16px;
103
+ }
104
+
105
+ &.is-medium {
106
+ height: 24px;
107
+ max-height: 24px;
108
+ max-width: 24px;
109
+ min-height: 24px;
110
+ min-width: 24px;
111
+ width: 24px;
112
+ }
113
+
114
+ &.is-large {
115
+ height: 32px;
116
+ max-height: 32px;
117
+ max-width: 32px;
118
+ min-height: 32px;
119
+ min-width: 32px;
120
+ width: 32px;
121
+ }
122
+ }
123
+
124
+ @mixin fa($size, $dimensions) {
125
+ display: inline-block;
126
+ font-size: $size;
127
+ height: $dimensions;
128
+ line-height: $dimensions;
129
+ text-align: center;
130
+ vertical-align: top;
131
+ width: $dimensions;
132
+ }
133
+
134
+ @mixin hamburger($dimensions) {
135
+ cursor: pointer;
136
+ display: block;
137
+ height: $dimensions;
138
+ position: relative;
139
+ width: $dimensions;
140
+
141
+ span {
142
+ background-color: currentColor;
143
+ display: block;
144
+ height: 1px;
145
+ left: 50%;
146
+ margin-left: -7px;
147
+ position: absolute;
148
+ top: 50%;
149
+ transition: none $speed $easing;
150
+ transition-property: background, left, opacity, transform;
151
+ width: 15px;
152
+
153
+ &:nth-child(1) {
154
+ margin-top: -6px;
155
+ }
156
+
157
+ &:nth-child(2) {
158
+ margin-top: -1px;
159
+ }
160
+
161
+ &:nth-child(3) {
162
+ margin-top: 4px;
163
+ }
164
+ }
165
+
166
+ &:hover {
167
+ background-color: rgba(black, 0.05);
168
+ }
169
+
170
+ // Modifers
171
+ &.is-active {
172
+ span {
173
+ &:nth-child(1) {
174
+ margin-left: -5px;
175
+ transform: rotate(45deg);
176
+ transform-origin: left top;
177
+ }
178
+
179
+ &:nth-child(2) {
180
+ opacity: 0;
181
+ }
182
+
183
+ &:nth-child(3) {
184
+ margin-left: -5px;
185
+ transform: rotate(-45deg);
186
+ transform-origin: left bottom;
187
+ }
188
+ }
189
+ }
190
+ }
191
+
192
+ @mixin loader {
193
+ animation: spinAround 500ms infinite linear;
194
+ border: 2px solid $border;
195
+ border-radius: 290486px;
196
+ border-right-color: transparent;
197
+ border-top-color: transparent;
198
+ content: "";
199
+ display: block;
200
+ height: 1em;
201
+ position: relative;
202
+ width: 1em;
203
+ }
204
+
205
+ @mixin overflow-touch {
206
+ -webkit-overflow-scrolling: touch;
207
+ }
208
+
209
+ @mixin overlay($offset: 0) {
210
+ bottom: $offset;
211
+ left: $offset;
212
+ position: absolute;
213
+ right: $offset;
214
+ top: $offset;
215
+ }
216
+
217
+ @mixin placeholder {
218
+ $placeholders: ":-moz" ":-webkit-input" "-moz" "-ms-input";
219
+
220
+ @each $placeholder in $placeholders {
221
+ &:#{$placeholder}-placeholder {
222
+ @content;
223
+ }
224
+ }
225
+ }
226
+
227
+ @mixin unselectable {
228
+ -webkit-touch-callout: none;
229
+ -webkit-user-select: none;
230
+ -moz-user-select: none;
231
+ -ms-user-select: none;
232
+ user-select: none;
233
+ }
234
+
235
+ // Responsiveness
236
+
237
+ @mixin from($device) {
238
+ @media screen and (min-width: $device) {
239
+ @content;
240
+ }
241
+ }
242
+
243
+ @mixin until($device) {
244
+ @media screen and (max-width: $device - 1px) {
245
+ @content;
246
+ }
247
+ }
248
+
249
+ @mixin mobile {
250
+ @media screen and (max-width: $tablet - 1px) {
251
+ @content;
252
+ }
253
+ }
254
+
255
+ @mixin tablet {
256
+ @media screen and (min-width: $tablet), print {
257
+ @content;
258
+ }
259
+ }
260
+
261
+ @mixin tablet-only {
262
+ @media screen and (min-width: $tablet) and (max-width: $desktop - 1px) {
263
+ @content;
264
+ }
265
+ }
266
+
267
+ @mixin touch {
268
+ @media screen and (max-width: $desktop - 1px) {
269
+ @content;
270
+ }
271
+ }
272
+
273
+ @mixin desktop {
274
+ @media screen and (min-width: $desktop) {
275
+ @content;
276
+ }
277
+ }
278
+
279
+ @mixin desktop-only {
280
+ @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) {
281
+ @content;
282
+ }
283
+ }
284
+
285
+ @mixin widescreen {
286
+ @media screen and (min-width: $widescreen) {
287
+ @content;
288
+ }
289
+ }
290
+
291
+ @mixin widescreen-only {
292
+ @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px) {
293
+ @content;
294
+ }
295
+ }
296
+
297
+ @mixin fullhd {
298
+ @media screen and (min-width: $fullhd) {
299
+ @content;
300
+ }
301
+ }
@@ -0,0 +1,153 @@
1
+ ////////////////////////////////////////////////
2
+ ////////////////////////////////////////////////
3
+ // 1. Initial variables
4
+
5
+ // Colors
6
+ $black: hsl(0, 0%, 4%) !default;
7
+ $black-bis: hsl(0, 0%, 7%) !default;
8
+ $black-ter: hsl(0, 0%, 14%) !default;
9
+
10
+ $grey-darker: hsl(0, 0%, 21%) !default;
11
+ $grey-dark: hsl(0, 0%, 29%) !default;
12
+ $grey: hsl(0, 0%, 48%) !default;
13
+ $grey-light: hsl(0, 0%, 71%) !default;
14
+ $grey-lighter: hsl(0, 0%, 86%) !default;
15
+
16
+ $white-ter: hsl(0, 0%, 96%) !default;
17
+ $white-bis: hsl(0, 0%, 98%) !default;
18
+ $white: hsl(0, 0%, 100%) !default;
19
+
20
+ $orange: hsl(14, 100%, 53%) !default;
21
+ $yellow: hsl(48, 100%, 67%) !default;
22
+ $green: hsl(141, 71%, 48%) !default;
23
+ $turquoise: hsl(171, 100%, 41%) !default;
24
+ $blue: hsl(217, 71%, 53%) !default;
25
+ $purple: hsl(271, 100%, 71%) !default;
26
+ $red: hsl(348, 100%, 61%) !default;
27
+
28
+ // Typography
29
+ $family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
30
+ $family-monospace: monospace !default;
31
+ $render-mode: optimizeLegibility !default;
32
+
33
+ $size-1: 3rem !default;
34
+ $size-2: 2.5rem !default;
35
+ $size-3: 2rem !default;
36
+ $size-4: 1.5rem !default;
37
+ $size-5: 1.25rem !default;
38
+ $size-6: 1rem !default;
39
+ $size-7: 0.75rem !default;
40
+
41
+ $weight-light: 300 !default;
42
+ $weight-normal: 400 !default;
43
+ $weight-semibold: 500 !default;
44
+ $weight-bold: 700 !default;
45
+
46
+ // Body
47
+ $body-background: #fff !default;
48
+ $body-size: 16px !default;
49
+
50
+ // Responsiveness
51
+ // 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
52
+ $tablet: 769px !default;
53
+
54
+ // 960px container + 40px
55
+ $desktop: 1000px !default;
56
+
57
+ // 1152px container + 40
58
+ $widescreen: 1192px !default;
59
+
60
+ // 1344px container + 40
61
+ $fullhd: 1384px !default;
62
+
63
+ // Miscellaneous
64
+ $easing: ease-out !default;
65
+ $radius-small: 2px !default;
66
+ $radius: 3px !default;
67
+ $radius-large: 5px !default;
68
+ $speed: 86ms !default;
69
+
70
+ ////////////////////////////////////////////////
71
+ ////////////////////////////////////////////////
72
+ // 2. Primary colors
73
+
74
+ $primary: $turquoise !default;
75
+
76
+ $info: $blue !default;
77
+ $success: $green !default;
78
+ $warning: $yellow !default;
79
+ $danger: $red !default;
80
+
81
+ $light: $white-ter !default;
82
+ $dark: $grey-darker !default;
83
+
84
+ ////////////////////////////////////////////////
85
+ ////////////////////////////////////////////////
86
+ // 3. Applied variables
87
+
88
+ // Invert colors
89
+ $orange-invert: findColorInvert($orange) !default;
90
+ $yellow-invert: findColorInvert($yellow) !default;
91
+ $green-invert: findColorInvert($green) !default;
92
+ $turquoise-invert: findColorInvert($turquoise) !default;
93
+ $blue-invert: findColorInvert($blue) !default;
94
+ $purple-invert: findColorInvert($purple) !default;
95
+ $red-invert: findColorInvert($red) !default;
96
+
97
+ $primary-invert: $turquoise-invert !default;
98
+ $info-invert: $blue-invert !default;
99
+ $success-invert: $green-invert !default;
100
+ $warning-invert: $yellow-invert !default;
101
+ $danger-invert: $red-invert !default;
102
+ $light-invert: $dark !default;
103
+ $dark-invert: $light !default;
104
+
105
+ // General colors
106
+ $background: $white-ter !default;
107
+
108
+ $border: $grey-lighter !default;
109
+ $border-hover: $grey-light !default;
110
+
111
+ // Text colors
112
+ $text: $grey-dark !default;
113
+ $text-invert: findColorInvert($text) !default;
114
+ $text-light: $grey !default;
115
+ $text-strong: $grey-darker !default;
116
+
117
+ // Code colors
118
+ $code: $red !default;
119
+ $code-background: $background !default;
120
+
121
+ $pre: $text !default;
122
+ $pre-background: $background !default;
123
+
124
+ // Link colors
125
+ $link: $primary !default;
126
+ $link-invert: $primary-invert !default;
127
+ $link-visited: $purple !default;
128
+
129
+ $link-hover: $grey-darker !default;
130
+ $link-hover-border: $grey-light !default;
131
+
132
+ $link-focus: $grey-darker !default;
133
+ $link-focus-border: $primary !default;
134
+
135
+ $link-active: $grey-darker !default;
136
+ $link-active-border: $grey-dark !default;
137
+
138
+ // Typography
139
+ $family-primary: $family-sans-serif !default;
140
+ $family-code: $family-monospace !default;
141
+
142
+ $size-small: $size-7 !default;
143
+ $size-normal: $size-6 !default;
144
+ $size-medium: $size-5 !default;
145
+ $size-large: $size-4 !default;
146
+
147
+ ////////////////////////////////////////////////
148
+ ////////////////////////////////////////////////
149
+ // 4. Lists and maps
150
+
151
+ $colors: ("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)) !default;
152
+
153
+ $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default;
data/hux.gemspec ADDED
@@ -0,0 +1,31 @@
1
+ lib = File.expand_path("../lib", __FILE__)
2
+ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
3
+ require "hux/version"
4
+
5
+ Gem::Specification.new do |s|
6
+ s.add_development_dependency "bundler", "~> 1.3"
7
+ s.add_development_dependency "rake"
8
+ s.add_development_dependency "rspec"
9
+ s.add_development_dependency "scss_lint", "~> 0.47"
10
+ s.add_runtime_dependency "bourbon", "~> 5.0.0.beta.7"
11
+ s.add_runtime_dependency "sass", "~> 3.4"
12
+ s.add_runtime_dependency "thor", "~> 0.19"
13
+ s.authors = [
14
+ "dikaio"
15
+ ]
16
+ s.description = <<-DESC
17
+ Hux
18
+ DESC
19
+ s.email = "i@dikaio.com"
20
+ s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
21
+ s.files = `git ls-files`.split($/)
22
+ s.homepage = ""
23
+ s.license = "MIT"
24
+ s.name = "hux"
25
+ s.require_paths = ["lib"]
26
+ s.summary = <<-SUMMARY
27
+ Scaffold styles, variables and structure for Bourbon projects.
28
+ SUMMARY
29
+ s.test_files = s.files.grep(%r{^(test|spec|features)/})
30
+ s.version = Hux::VERSION
31
+ end
@@ -0,0 +1,80 @@
1
+ require 'hux/version'
2
+ require 'fileutils'
3
+ require 'pathname'
4
+ require 'thor'
5
+
6
+ module Hux
7
+ class Generator < Thor
8
+ map ['-v', '--version'] => :version
9
+ map ['scaffold'] => :install
10
+ map ['delete'] => :remove
11
+
12
+ desc 'install', 'Install Hux into your project'
13
+ method_options path: :string
14
+ def install
15
+ if hux_files_already_exist?
16
+ puts "Hux files already installed, doing nothing."
17
+ else
18
+ install_files
19
+ puts "Hux files installed to #{install_path}/base"
20
+ end
21
+ end
22
+
23
+ desc 'reset', 'Reset Hux'
24
+ def reset
25
+ if hux_files_already_exist?
26
+ remove_hux_directory
27
+ install_files
28
+ puts "Hux files updated."
29
+ else
30
+ puts "No existing Hux installation. Doing nothing."
31
+ end
32
+ end
33
+
34
+ desc 'remove', 'Remove Hux'
35
+ def remove
36
+ if hux_files_already_exist?
37
+ remove_hux_directory
38
+ puts "Hux was successfully removed."
39
+ else
40
+ puts "No existing Hux installation. Doing nothing."
41
+ end
42
+ end
43
+
44
+ desc 'version', 'Show Hux version'
45
+ def version
46
+ say "Hux #{Hux::VERSION}"
47
+ end
48
+
49
+ private
50
+
51
+ def hux_files_already_exist?
52
+ File.directory?(install_path)
53
+ end
54
+
55
+ def install_path
56
+ Pathname.new(options[:path].to_s).join('base')
57
+ end
58
+
59
+ def install_files
60
+ FileUtils.mkdir_p(install_path)
61
+ FileUtils.cp_r(all_stylesheets, install_path)
62
+ end
63
+
64
+ def remove_hux_directory
65
+ FileUtils.rm_rf("base")
66
+ end
67
+
68
+ def all_stylesheets
69
+ Dir["#{stylesheets_directory}/*"]
70
+ end
71
+
72
+ def stylesheets_directory
73
+ File.join(top_level_directory, "core")
74
+ end
75
+
76
+ def top_level_directory
77
+ File.dirname(File.dirname(File.dirname(__FILE__)))
78
+ end
79
+ end
80
+ end
@@ -0,0 +1,3 @@
1
+ module Hux
2
+ VERSION = "0.0.1"
3
+ end
data/lib/hux.rb CHANGED
@@ -1,2 +1,2 @@
1
1
  require "hux/version"
2
- require "hux/generator"
2
+ require "hux/generator"
data/package.json ADDED
@@ -0,0 +1,33 @@
1
+ {
2
+ "name": "Hux",
3
+ "version": "0.0.2",
4
+ "description": "Scaffold styles, variables and structure for Bourbon projects.",
5
+ "main": "Gulpfile.js",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": ""
9
+ },
10
+ "keywords": [
11
+ "bourbon",
12
+ "css",
13
+ "sass",
14
+ "scss",
15
+ "scaffold"
16
+ ],
17
+ "author": {
18
+ "name": "Dikaio",
19
+ "url": ""
20
+ },
21
+ "license": "MIT",
22
+ "bugs": {
23
+ "url": ""
24
+ },
25
+ "homepage": "",
26
+ "devDependencies": {
27
+ "bourbon": "^5.0.0-beta.7",
28
+ "gulp": "^3.9",
29
+ "gulp-autoprefixer": "^3.1",
30
+ "gulp-connect": "^5.0",
31
+ "gulp-sass": "^3.1"
32
+ }
33
+ }
@@ -0,0 +1,17 @@
1
+ require 'spec_helper'
2
+ require 'sass'
3
+ require 'bourbon'
4
+
5
+ describe Hux do
6
+ after do
7
+ `rm -rf spec/fixtures/base`
8
+ end
9
+
10
+ it 'compiles to valid css' do
11
+ `hux install --path spec/fixtures`
12
+
13
+ Sass.compile_file('spec/fixtures/application.scss', '/tmp/output.css')
14
+
15
+ expect(Pathname('/tmp/output.css')).to exist
16
+ end
17
+ end
@@ -0,0 +1,2 @@
1
+ @import "bourbon";
2
+ @import "base/base";
@@ -0,0 +1,3 @@
1
+ $LOAD_PATH << File.join('../lib')
2
+
3
+ require 'hux'