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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 51cb9b6705bab9df5c9b085bcedf1af098ac1e3f
4
- data.tar.gz: 58760a38203412a7a340eaef56ddf94f254a0d6c
3
+ metadata.gz: 89bca2ebbc18542ffbe461cece52bf392c99fcff
4
+ data.tar.gz: d0ca8e2a860cb613d9ae188749d56fa4a6a32c10
5
5
  SHA512:
6
- metadata.gz: 24a362fade714c407dbb07d93ae1e51174b2f7f705c63f77222896f9bc9dd9b0d1154fc4b746a8b121e1b8c4fdf2a935aa5e5df359f68635271f80662cec7977
7
- data.tar.gz: 12a47ead9dd6cb7459f2a2463df41df2970fa5283791db45aaf6ee92352ae5613b5502c88b872d3e2082aa2f8acd099ee072c70a1ed30965a97ebc6344ad7462
6
+ metadata.gz: 38a032f37e1e441379559c8dddf6b8d4fa3a5ffdd5e3b64dcb00ce35266d0954e6c6b9965ef7e8900b7549443bde8a02a6a6db3cac6da4e10238b36da54dbd80
7
+ data.tar.gz: 5f22c082bd3a351ad495dab411a6160fcaf3561f1c654b999985056c65231a09f4935175dae178357355ad22e1dd1e0c6bc6d5ec9fad6ccdcea31e818f708293
@@ -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 you needs:
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
- ##<a name="example"></a> :hamburger: The Burger Example™
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.*
@@ -3,6 +3,6 @@ extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
3
3
  Compass::Frameworks.register('bem-constructor', :path => extension_path)
4
4
 
5
5
  module BEMConstructor
6
- VERSION = "0.9.0"
7
- DATE = "2015-03-26"
6
+ VERSION = "1.0.0"
7
+ DATE = "2016-02-07"
8
8
  end
@@ -14,4 +14,5 @@
14
14
  @import 'theme';
15
15
  @import 'state';
16
16
  @import 'hack';
17
+ @import 'suffix';
17
18
  @import 'debug';
@@ -24,7 +24,8 @@
24
24
  $selectors: append($selectors, $element, 'comma');
25
25
  }
26
26
 
27
- $block: selector-append(&...);
27
+ $s: &; // Workaround for libsass
28
+ $block: selector-append($s...);
28
29
 
29
30
  $selector: selector-nest($block, '>', $selectors);
30
31
 
@@ -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
- $s: selector-append(&, '.#{$namespace}#{$state}');
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.9.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: 2015-03-26 00:00:00.000000000 Z
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