bem-constructor 0.9.0 → 1.0.0

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