crossbar 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 (36) hide show
  1. checksums.yaml +7 -0
  2. data/.editorconfig +13 -0
  3. data/.gitignore +16 -0
  4. data/.scss-lint.yml +166 -0
  5. data/Gemfile +4 -0
  6. data/LICENSE.md +22 -0
  7. data/README.md +96 -0
  8. data/Rakefile +8 -0
  9. data/app/assets/stylesheets/base/_all.scss +24 -0
  10. data/app/assets/stylesheets/base/_button.scss +50 -0
  11. data/app/assets/stylesheets/base/_form.scss +99 -0
  12. data/app/assets/stylesheets/base/_image.scss +5 -0
  13. data/app/assets/stylesheets/base/_list.scss +34 -0
  14. data/app/assets/stylesheets/base/_table.scss +24 -0
  15. data/app/assets/stylesheets/base/_typography.scss +106 -0
  16. data/app/assets/stylesheets/base/extends/.keep +0 -0
  17. data/app/assets/stylesheets/base/functions/_colors.scss +33 -0
  18. data/app/assets/stylesheets/base/functions/_list-attributes.scss +10 -0
  19. data/app/assets/stylesheets/base/mixins/.keep +0 -0
  20. data/app/assets/stylesheets/base/variables/_colors.scss +23 -0
  21. data/app/assets/stylesheets/base/variables/_fonts.scss +0 -0
  22. data/app/assets/stylesheets/base/variables/_inputs.scss +22 -0
  23. data/app/assets/stylesheets/base/variables/_variables.scss +188 -0
  24. data/app/assets/stylesheets/base/vendor/normalize.css +427 -0
  25. data/app/assets/stylesheets/layout/_all.scss +0 -0
  26. data/app/assets/stylesheets/module/_all.scss +0 -0
  27. data/app/assets/stylesheets/state/_all.scss +0 -0
  28. data/bin/crossbar +5 -0
  29. data/crossbar.gemspec +27 -0
  30. data/lib/crossbar.rb +6 -0
  31. data/lib/crossbar/generator.rb +61 -0
  32. data/lib/crossbar/version.rb +3 -0
  33. data/spec/crossbar_spec.rb +16 -0
  34. data/spec/fixtures/application.css.scss +4 -0
  35. data/spec/spec_helper.rb +3 -0
  36. metadata +156 -0
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: 85fbc52375d6f6379b7db7abb388a3c61fdb12a5
4
+ data.tar.gz: ea5ce06d56385f4755822bcffe94141a77afa3bf
5
+ SHA512:
6
+ metadata.gz: ade4c3e0faf4d7d511533da66018299dc1de27805d02c5730e6873bfef5467d3a290ff7baf812d13146892948963e41ce1ec8537cbed7d2e64ccce92d8ca1cbc
7
+ data.tar.gz: 67ce9fd4a31810ad4629c7ff496ea7a34fbf3ad6cbf112cda15af393f9f48c4dd5fa00ec2c8fd3b865a8433e49e0c0c822fc2aa62e3fbc1da3be1e54f42ab4cc
data/.editorconfig ADDED
@@ -0,0 +1,13 @@
1
+ # http://editorconfig.org
2
+ root = true
3
+
4
+ [*]
5
+ indent_style = space
6
+ indent_size = 2
7
+ end_of_line = lf
8
+ charset = utf-8
9
+ trim_trailing_whitespace = true
10
+ insert_final_newline = true
11
+
12
+ [*.md]
13
+ trim_trailing_whitespace = false
data/.gitignore ADDED
@@ -0,0 +1,16 @@
1
+ /.bundle/
2
+ /.yardoc
3
+ /Gemfile.lock
4
+ /_yardoc/
5
+ /coverage/
6
+ /doc/
7
+ /pkg/
8
+ /spec/reports/
9
+ /tmp/
10
+ *.bundle
11
+ *.so
12
+ *.o
13
+ *.a
14
+ mkmf.log
15
+ .sass-cache
16
+ bower.json
data/.scss-lint.yml ADDED
@@ -0,0 +1,166 @@
1
+ linters:
2
+
3
+ BangFormat:
4
+ enabled: true
5
+ space_before_bang: true
6
+ space_after_bang: false
7
+
8
+ BorderZero:
9
+ enabled: true
10
+
11
+ ColorKeyword:
12
+ enabled: false
13
+
14
+ Comment:
15
+ enabled: false
16
+
17
+ DebugStatement:
18
+ enabled: true
19
+
20
+ DeclarationOrder:
21
+ enabled: true
22
+
23
+ DuplicateProperty:
24
+ enabled: false
25
+
26
+ ElsePlacement:
27
+ enabled: true
28
+ style: same_line
29
+
30
+ EmptyLineBetweenBlocks:
31
+ enabled: true
32
+ ignore_single_line_blocks: false
33
+
34
+ EmptyRule:
35
+ enabled: true
36
+
37
+ FinalNewline:
38
+ enabled: true
39
+ present: true
40
+
41
+ HexLength:
42
+ enabled: true
43
+ style: short
44
+
45
+ HexNotation:
46
+ enabled: true
47
+ style: lowercase
48
+
49
+ HexValidation:
50
+ enabled: true
51
+
52
+ IdSelector:
53
+ enabled: true
54
+
55
+ ImportPath:
56
+ enabled: true
57
+ leading_underscore: false
58
+ filename_extension: false
59
+
60
+ Indentation:
61
+ enabled: true
62
+ character: space
63
+ width: 2
64
+
65
+ LeadingZero:
66
+ enabled: true
67
+ style: include_zero
68
+
69
+ MergeableSelector:
70
+ enabled: false
71
+ force_nesting: false
72
+
73
+ NameFormat:
74
+ enabled: true
75
+ convention: hyphenated_lowercase
76
+ allow_leading_underscore: true
77
+
78
+ NestingDepth:
79
+ enabled: true
80
+ max_depth: 3
81
+
82
+ PlaceholderInExtend:
83
+ enabled: true
84
+
85
+ PropertySortOrder:
86
+ enabled: false
87
+ ignore_unspecified: false
88
+
89
+ PropertySpelling:
90
+ enabled: true
91
+ extra_properties: []
92
+
93
+ QualifyingElement:
94
+ enabled: true
95
+ allow_element_with_attribute: false
96
+ allow_element_with_class: false
97
+ allow_element_with_id: false
98
+
99
+ SelectorDepth:
100
+ enabled: true
101
+ max_depth: 3
102
+
103
+ SelectorFormat:
104
+ enabled: true
105
+ convention: hyphenated_lowercase
106
+ class_convention: '^(?:u|is|has)\-[a-z][a-zA-Z0-9]*$|^(?!u|is|has)[a-zA-Z][a-zA-Z0-9]*(?:\-[a-z][a-zA-Z0-9]*)?(?:\-\-[a-z][a-zA-Z0-9]*)?$'
107
+
108
+ Shorthand:
109
+ enabled: true
110
+
111
+ SingleLinePerProperty:
112
+ enabled: true
113
+ allow_single_line_rule_sets: false
114
+
115
+ SingleLinePerSelector:
116
+ enabled: true
117
+
118
+ SpaceAfterComma:
119
+ enabled: true
120
+
121
+ SpaceAfterPropertyColon:
122
+ enabled: true
123
+ style: one_space
124
+
125
+ SpaceAfterPropertyName:
126
+ enabled: true
127
+
128
+ SpaceBeforeBrace:
129
+ enabled: true
130
+ style: space
131
+ allow_single_line_padding: true
132
+
133
+ SpaceBetweenParens:
134
+ enabled: true
135
+ spaces: 0
136
+
137
+ StringQuotes:
138
+ enabled: true
139
+ style: single_quotes
140
+
141
+ TrailingSemicolon:
142
+ enabled: true
143
+
144
+ TrailingZero:
145
+ enabled: true
146
+
147
+ UnnecessaryMantissa:
148
+ enabled: true
149
+
150
+ UnnecessaryParentReference:
151
+ enabled: true
152
+
153
+ UrlFormat:
154
+ enabled: false
155
+
156
+ UrlQuotes:
157
+ enabled: true
158
+
159
+ VendorPrefixes:
160
+ enabled: true
161
+ identifier_list: base
162
+ include: []
163
+ exclude: []
164
+
165
+ ZeroUnit:
166
+ enabled: true
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source 'https://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in crossbar.gemspec
4
+ gemspec
data/LICENSE.md ADDED
@@ -0,0 +1,22 @@
1
+ Copyright (c) 2015 makabde
2
+
3
+ MIT License
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining
6
+ a copy of this software and associated documentation files (the
7
+ "Software"), to deal in the Software without restriction, including
8
+ without limitation the rights to use, copy, modify, merge, publish,
9
+ distribute, sublicense, and/or sell copies of the Software, and to
10
+ permit persons to whom the Software is furnished to do so, subject to
11
+ the following conditions:
12
+
13
+ The above copyright notice and this permission notice shall be
14
+ included in all copies or substantial portions of the Software.
15
+
16
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
20
+ LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
21
+ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
22
+ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
data/README.md ADDED
@@ -0,0 +1,96 @@
1
+ # Crossbar
2
+
3
+ Crossbar scaffolds, in your project, a [Sass](http://sass-lang.com/) project structure inspired by SMACSS principles.
4
+ - Doc (coming soon)
5
+ - [Changelog](https://github.com/makabde/crossbar/releases)
6
+ - [Issues](https://github.com/makabde/crossbar/issues)
7
+
8
+ ## Rationale
9
+ After reading the book [SMACSS](https://smacss.com/) and finding it very enlightening, I decided to compile this gem; using the lessons learned from the book. Crossbar serves my basic need when starting a project but your are free to using it. And I *encourage* you to adapt it to fit your needs.
10
+ Crossbar will scaffold your a stylesheet structure with a basic set of sass variables and styles for base elements.
11
+
12
+ ## Using Crossbar
13
+ ### Foreword
14
+ Crossbar is made to work with a CSS reset; not to replace one. [Normalize](http://necolas.github.io/normalize.css/) is my reset of choice; so this is the first thing that gets called in `base/_all.scss`, with the following `@import 'vendor/reset';`. Remove this line if you decide to use a different Reset or manage your vendor dependencies differently.
15
+
16
+ ### Sass structure
17
+ #### 1. Base
18
+ The base directory contains a set of styles that will help anyone start a project with a minimal amount of styling. Base elements are styled directly at the element selector level. It doesn't and shouldn't contain any class or ID selectors. Exemple of base Sass elements include:
19
+ - Reset
20
+ - Vendor CSS
21
+ - Base font sizing
22
+ - Default font family.
23
+ - Heading sizing.
24
+
25
+ #### 2. Layout
26
+ The layout directory contains styles that are large containers of a page. This directory can include Sass files such as:
27
+ - Responsive Grid
28
+ - Page specific layout (footer, header, section, etc.)
29
+
30
+ #### 3. Modules
31
+ The modules directory will, probably, contain the bulk of your Sass files. A page may contains multiple modules; and every module should be completely independent of its context. These modules may include, and are not limited to the the followings:
32
+ - Content block
33
+ - Primary action button
34
+ - Secondary action button
35
+
36
+ #### 4. States
37
+ The states directory may contain Sass files that will augment and override all other styles.
38
+ For example, a fieldset may be hidden until the user enables it. In this case we can use toggle between the `is-hidden` or the `is-shown` states.
39
+ ```
40
+ .is {
41
+ &-hidden {
42
+ display: none;
43
+ }
44
+
45
+ &-visible {
46
+ display: block;
47
+ }
48
+ }
49
+ ```
50
+
51
+ ### Order of imports
52
+ - Reset
53
+ - Vendor dependencies
54
+ - Base styles
55
+ - Layout styles
56
+ - Modules styles
57
+ - States styles
58
+
59
+ ## Requirements
60
+ - Sass 3.3+
61
+ - Ruby 1.9.3+
62
+
63
+ ## Installation
64
+ 1. Install the Crossbar gem using [RubyGems](https://rubygems.org/) package manager:
65
+ ```bash
66
+ $ gem install crossbar
67
+ ```
68
+ *if you use [rbenv](https://github.com/sstephenson/rbenv), make sure to run `rbenv rehash` without errors.*
69
+
70
+ 2. Install Crossbar into the *current* directory:
71
+ ```bash
72
+ $ crossbar install
73
+ ```
74
+ Alternatively, you can install Crossbar into a *specific* directory:
75
+ ```bash
76
+ $ crossbar install --path path/to/your/stylesheet/directory
77
+ ```
78
+ This install Crossbar, with all the necessary files, to the directory specified after the `--path` option.
79
+
80
+ 3. Add Crossbar to your project by calling the following from your main Sass files
81
+ ```sass
82
+ @import 'base/all';
83
+ @import 'layout/all';
84
+ @import 'module/all';
85
+ @import 'state/all';
86
+ ```
87
+
88
+ ## License
89
+ Crossbar is free software, and may be redistributed under the terms specified in the [license](https://github.com/makabde/crossbar/blob/master/LICENSE.md).
90
+
91
+ ## Contributing
92
+ 1. Fork it ( https://github.com/makabde/crossbar/fork )
93
+ 2. Create your feature branch (`git checkout -b my-new-feature`)
94
+ 3. Commit your changes (`git commit -am 'Add some feature'`)
95
+ 4. Push to the branch (`git push origin my-new-feature`)
96
+ 5. Create a new Pull Request
data/Rakefile ADDED
@@ -0,0 +1,8 @@
1
+ require "bundler/gem_tasks"
2
+ require "rspec/core/rake_task"
3
+
4
+ RSpec::Core::RakeTask.new(:spec)
5
+
6
+ task :default => :spec
7
+ task :install => :spec
8
+ task :release => :spec
@@ -0,0 +1,24 @@
1
+ // Vendor
2
+ @import 'base/vendor/normalize.css';
3
+
4
+ // Functions
5
+ @import 'functions/colors';
6
+ @import 'functions/list-attributes';
7
+
8
+ // Variables
9
+ @import 'variables/colors';
10
+ @import 'variables/fonts';
11
+ @import 'variables/inputs';
12
+ @import 'variables/variables';
13
+
14
+ // Mixins
15
+
16
+ // Extends
17
+
18
+ // Base
19
+ @import 'button';
20
+ @import 'form';
21
+ @import 'image';
22
+ @import 'list';
23
+ @import 'table';
24
+ @import 'typography';
@@ -0,0 +1,50 @@
1
+ button,
2
+ #{$b-form-button-inputs} {
3
+ -moz-appearance: none;
4
+ -webkit-appearance: none;
5
+ appearance: none;
6
+ border: $b-button-border;
7
+ border-radius: $b-button-border-radius;
8
+ box-sizing: border-box;
9
+ cursor: pointer;
10
+ display: inline-block;
11
+ font-family: $b-button-font-family;
12
+ font-size: $b-button-font-size;
13
+ -webkit-font-smoothing: antialiased;
14
+ line-height: 1;
15
+ padding: $b-button-padding;
16
+ text-decoration: none;
17
+ transition: background-color 125ms ease-out;
18
+ user-select: none;
19
+ vertical-align: middle;
20
+ white-space: nowrap;
21
+
22
+ &:disabled {
23
+ cursor: not-allowed;
24
+ opacity: 0.5;
25
+ }
26
+ }
27
+
28
+ button,
29
+ input[type='submit'] {
30
+ background-color: $button-pri-background-color;
31
+ color: $button-pri-color;
32
+ font-weight: $button-pri-font-weight;
33
+
34
+ &:focus,
35
+ &:hover {
36
+ background-color: $button-pri-background-color-hover;
37
+ }
38
+ }
39
+
40
+ input[type='button'],
41
+ input[type='reset'] {
42
+ background-color: $button-sec-background-color;
43
+ color: $button-sec-color;
44
+ font-weight: $button-sec-font-weight;
45
+
46
+ &:focus,
47
+ &:hover {
48
+ background-color: $button-sec-background-color-hover;
49
+ }
50
+ }
@@ -0,0 +1,99 @@
1
+ // Form elements
2
+
3
+ ::-webkit-input-placeholder { /* WebKit browsers */
4
+ color: $b-form-text-input-placeholder-color;
5
+ }
6
+ :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
7
+ color: $b-form-text-input-placeholder-color;
8
+ opacity: 1;
9
+ }
10
+ ::-moz-placeholder { /* Mozilla Firefox 19+ */
11
+ color: $b-form-text-input-placeholder-color;
12
+ opacity: 1;
13
+ }
14
+ :-ms-input-placeholder { /* Internet Explorer 10+ */
15
+ color: $b-form-text-input-placeholder-color;
16
+ }
17
+
18
+ fieldset {
19
+ background-color: $b-form-fieldset-background-color;
20
+ border: $b-form-fieldset-border;
21
+ margin: $b-form-fieldset-margin;
22
+ padding: $b-form-fieldset-padding;
23
+ }
24
+
25
+ input,
26
+ label,
27
+ select {
28
+ display: block;
29
+ font-family: $b-form-font-family;
30
+ font-size: $b-form-font-size;
31
+ }
32
+
33
+ label {
34
+ color: $b-form-label-color;
35
+ font-weight: $b-form-label-font-weight;
36
+ line-height: 1;
37
+ margin: $b-form-label-margin;
38
+
39
+ &.required:after {
40
+ content: '*';
41
+ }
42
+
43
+ abbr {
44
+ display: none;
45
+ }
46
+ }
47
+
48
+ #{$b-form-text-inputs},
49
+ #{$b-form-text-inputs-html5},
50
+ select[multiple=multiple],
51
+ textarea {
52
+ background-color: $b-form-text-input-background-color;
53
+ border: 1px solid $b-form-text-input-border-color;
54
+ border-radius: $b-form-text-input-border-radius;
55
+ box-shadow: $b-form-text-input-box-shadow;
56
+ box-sizing: border-box;
57
+ color: $b-form-text-input-color;
58
+ font-family: $b-form-font-family;
59
+ font-size: $b-form-font-size;
60
+ margin: $b-form-text-input-margin;
61
+ padding: $b-form-text-input-padding;
62
+ transition: border-color 125ms ease-out;
63
+ width: 100%;
64
+
65
+ &:hover {
66
+ border-color: $b-form-text-input-border-color-hover;
67
+ }
68
+
69
+ &:focus {
70
+ border-color: $b-form-text-input-border-color-focus;
71
+ outline: none;
72
+ }
73
+ }
74
+
75
+ input[type='search'] {
76
+ -moz-appearance: none;
77
+ -webkit-appearance: none;
78
+ }
79
+
80
+ input[type='checkbox'],
81
+ input[type='radio'] {
82
+ display: inline;
83
+ margin: $b-form-choice-input-margin;
84
+ }
85
+
86
+ input[type='file'] {
87
+ padding: $b-form-file-input-padding;
88
+ width: 100%;
89
+ }
90
+
91
+ select {
92
+ margin: $b-form-select-margin;
93
+ max-width: 100%;
94
+ width: auto;
95
+ }
96
+
97
+ textarea {
98
+ resize: vertical;
99
+ }