bem-constructor 0.9.0 → 1.0.0
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 +4 -4
- data/CHANGELOG.md +16 -0
- data/README.md +27 -2
- data/lib/bem-constructor.rb +2 -2
- data/stylesheets/_bem-constructor.scss +1 -0
- data/stylesheets/_modifies-element.scss +2 -1
- data/stylesheets/_state.scss +2 -1
- data/stylesheets/_suffix.scss +51 -0
- metadata +3 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 89bca2ebbc18542ffbe461cece52bf392c99fcff
|
4
|
+
data.tar.gz: d0ca8e2a860cb613d9ae188749d56fa4a6a32c10
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 38a032f37e1e441379559c8dddf6b8d4fa3a5ffdd5e3b64dcb00ce35266d0954e6c6b9965ef7e8900b7549443bde8a02a6a6db3cac6da4e10238b36da54dbd80
|
7
|
+
data.tar.gz: 5f22c082bd3a351ad495dab411a6160fcaf3561f1c654b999985056c65231a09f4935175dae178357355ad22e1dd1e0c6bc6d5ec9fad6ccdcea31e818f708293
|
data/CHANGELOG.md
CHANGED
@@ -1,3 +1,19 @@
|
|
1
|
+
## 1.0.0
|
2
|
+
|
3
|
+
* New feature: Responsive suffixes support.
|
4
|
+
|
5
|
+
## 0.9
|
6
|
+
|
7
|
+
* Renamed state namespace configurable variable to `$bem-state-namespace`.
|
8
|
+
|
9
|
+
## 0.8
|
10
|
+
|
11
|
+
* Added npm package.
|
12
|
+
|
13
|
+
## 0.7.1
|
14
|
+
|
15
|
+
* Added the visual debugger.
|
16
|
+
|
1
17
|
## 0.7
|
2
18
|
|
3
19
|
* Allowing modifies-element() to be called within blocks.
|
data/README.md
CHANGED
@@ -34,6 +34,10 @@ Read [Harry's post on namespaces](http://csswizardry.com/2015/03/more-transparen
|
|
34
34
|
|
35
35
|
BEM objects are composed of a block and any number of elements and/or modifiers. Using the BEM syntax for naming classes you'll produce structured code that helps you and other developers understand at a glance the relationship between those classes. The BEM constructor takes care of generating bem-compliant selectors.
|
36
36
|
|
37
|
+
### 4. Responsive suffixes
|
38
|
+
|
39
|
+
With [responsive suffixes](http://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/) you are able to denote conditional states or breakpoints where permutations to an object may occur. This is specially useful when dealing with media queries that *modify* the base values of a give UI element.
|
40
|
+
|
37
41
|
## Installation
|
38
42
|
|
39
43
|
There are 4 ways of installing BEM Constructor:
|
@@ -134,6 +138,15 @@ Scopes allow you to isolate code you don't have control over.
|
|
134
138
|
|
135
139
|
@include scope($name) { ... }
|
136
140
|
|
141
|
+
|
142
|
+
### suffix($name)
|
143
|
+
|
144
|
+
Adds a suffix
|
145
|
+
|
146
|
+
Denotes a conditional breakpoint that modifies the properties and/or values of an UI
|
147
|
+
|
148
|
+
@include suffix($name) { ... }
|
149
|
+
|
137
150
|
## Options
|
138
151
|
|
139
152
|
### Namespaces
|
@@ -158,6 +171,10 @@ Override the default state namespace:
|
|
158
171
|
|
159
172
|
$bem-state-namespace: 'has'; // defaults to 'is'
|
160
173
|
|
174
|
+
Override the default suffix namespace:
|
175
|
+
|
176
|
+
$bem-suffix-namespace: '-at-'; // defaults to ''\\@''
|
177
|
+
|
161
178
|
Override the default hack namespace:
|
162
179
|
|
163
180
|
$bem-hack-namespace: 'it-wasnt-me-'; // defaults to '_'
|
@@ -170,14 +187,22 @@ By default BEM Constructor uses the following BEM convention:
|
|
170
187
|
- Two underscores (__) for elements
|
171
188
|
- Two hyphens for modifiers (--).
|
172
189
|
|
173
|
-
You can customize them to whatever fits
|
190
|
+
You can customize them to whatever fits your needs:
|
174
191
|
|
175
192
|
$bem-element-separator: '-'; // Defaults to '__'
|
176
193
|
|
177
194
|
$bem-modifier-separator: '-_-_'; // Defaults to '--'
|
178
195
|
|
196
|
+
### Suffixes
|
197
|
+
|
198
|
+
By default BEM Constructor uses `@` to denote suffixes (e.g. `.o-media@large`).
|
199
|
+
|
200
|
+
You can customize the suffix to whatever fits your needs:
|
201
|
+
|
202
|
+
$bem-suffix-namespace: '---'; defaults to '\\@'
|
203
|
+
|
179
204
|
|
180
|
-
|
205
|
+
## <a name="example"></a> :hamburger: The Burger Example™
|
181
206
|
|
182
207
|
|
183
208
|
*Disclaimer: the following Sass code may not compile into a real burger.*
|
data/lib/bem-constructor.rb
CHANGED
data/stylesheets/_state.scss
CHANGED
@@ -9,7 +9,8 @@ $bem-state-namespace: 'is' !default;
|
|
9
9
|
$namespace: if($bem-use-namespaces, $bem-state-namespace + '-', '');
|
10
10
|
|
11
11
|
@each $state in $states {
|
12
|
-
$
|
12
|
+
$ss: &; // Workaround for libsass
|
13
|
+
$s: selector-append($ss, '.#{$namespace}#{$state}');
|
13
14
|
$selector: append($selector, $s, 'comma');
|
14
15
|
}
|
15
16
|
|
@@ -0,0 +1,51 @@
|
|
1
|
+
// -----------------------------------------------------------------------------
|
2
|
+
// suffix constructor
|
3
|
+
// -----------------------------------------------------------------------------
|
4
|
+
|
5
|
+
/// Suffix namespace
|
6
|
+
$bem-suffix-namespace: '\\@' !default;
|
7
|
+
|
8
|
+
@function _suffix($suffixes...) {
|
9
|
+
$selector: ();
|
10
|
+
$namespace: if($bem-use-namespaces, $bem-suffix-namespace, '');
|
11
|
+
|
12
|
+
// Checking if the suffix is being set within a state.
|
13
|
+
// If so, disallow and throw an error.
|
14
|
+
// @TODO Allow suffixes to be set within states
|
15
|
+
|
16
|
+
@if map-has-key($_bem-current-context, state) and map-get($_bem-current-context, state) != null {
|
17
|
+
@error 'Currently, suffixes cannot be set within states. Move the suffix declaration outside the state constructor.';
|
18
|
+
}
|
19
|
+
|
20
|
+
@each $suffix in $suffixes {
|
21
|
+
@each $sel in & {
|
22
|
+
|
23
|
+
// Checking if the selector is composed of 3 elements. If that's the case,
|
24
|
+
// we're dealing with an element being modified by a block modifier.
|
25
|
+
// In that case, we need to add the suffix to the block too.
|
26
|
+
// @TODO Find a better way to deal with this situation.
|
27
|
+
|
28
|
+
@if length($sel) == 3 {
|
29
|
+
$tmp: append((), nth($sel, 1) + '#{$namespace}#{$suffix}', space);
|
30
|
+
$tmp: append($tmp, nth($sel, 2), space);
|
31
|
+
$tmp: append($tmp, nth($sel, 3), space);
|
32
|
+
$sel: #{$tmp};
|
33
|
+
}
|
34
|
+
$s: $sel + '#{$namespace}#{$suffix}';
|
35
|
+
$selector: append($selector, $s, 'comma');
|
36
|
+
}
|
37
|
+
}
|
38
|
+
|
39
|
+
$set-current: set-current-context('suffix', $suffixes, $selector);
|
40
|
+
|
41
|
+
@return $selector;
|
42
|
+
}
|
43
|
+
|
44
|
+
@mixin suffix($suffixes...) {
|
45
|
+
|
46
|
+
@at-root #{_suffix($suffixes...)} {
|
47
|
+
@content;
|
48
|
+
}
|
49
|
+
|
50
|
+
$unset-suffix: unset-current-context('suffix');
|
51
|
+
}
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: bem-constructor
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 1.0.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Daniel Guillan
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date:
|
11
|
+
date: 2016-02-07 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: sass
|
@@ -61,6 +61,7 @@ files:
|
|
61
61
|
- stylesheets/_modifies-element.scss
|
62
62
|
- stylesheets/_scope.scss
|
63
63
|
- stylesheets/_state.scss
|
64
|
+
- stylesheets/_suffix.scss
|
64
65
|
- stylesheets/_theme.scss
|
65
66
|
- stylesheets/logger/_block-logger.scss
|
66
67
|
- stylesheets/logger/_context-logger.scss
|