crossbar 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
+
}
|