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.
- checksums.yaml +7 -0
- data/.editorconfig +13 -0
- data/.gitignore +16 -0
- data/.scss-lint.yml +166 -0
- data/Gemfile +4 -0
- data/LICENSE.md +22 -0
- data/README.md +96 -0
- data/Rakefile +8 -0
- data/app/assets/stylesheets/base/_all.scss +24 -0
- data/app/assets/stylesheets/base/_button.scss +50 -0
- data/app/assets/stylesheets/base/_form.scss +99 -0
- data/app/assets/stylesheets/base/_image.scss +5 -0
- data/app/assets/stylesheets/base/_list.scss +34 -0
- data/app/assets/stylesheets/base/_table.scss +24 -0
- data/app/assets/stylesheets/base/_typography.scss +106 -0
- data/app/assets/stylesheets/base/extends/.keep +0 -0
- data/app/assets/stylesheets/base/functions/_colors.scss +33 -0
- data/app/assets/stylesheets/base/functions/_list-attributes.scss +10 -0
- data/app/assets/stylesheets/base/mixins/.keep +0 -0
- data/app/assets/stylesheets/base/variables/_colors.scss +23 -0
- data/app/assets/stylesheets/base/variables/_fonts.scss +0 -0
- data/app/assets/stylesheets/base/variables/_inputs.scss +22 -0
- data/app/assets/stylesheets/base/variables/_variables.scss +188 -0
- data/app/assets/stylesheets/base/vendor/normalize.css +427 -0
- data/app/assets/stylesheets/layout/_all.scss +0 -0
- data/app/assets/stylesheets/module/_all.scss +0 -0
- data/app/assets/stylesheets/state/_all.scss +0 -0
- data/bin/crossbar +5 -0
- data/crossbar.gemspec +27 -0
- data/lib/crossbar.rb +6 -0
- data/lib/crossbar/generator.rb +61 -0
- data/lib/crossbar/version.rb +3 -0
- data/spec/crossbar_spec.rb +16 -0
- data/spec/fixtures/application.css.scss +4 -0
- data/spec/spec_helper.rb +3 -0
- 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
data/.gitignore
ADDED
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
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,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
|
+
}
|