bem-constructor 0.9.0 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 51cb9b6705bab9df5c9b085bcedf1af098ac1e3f
-  data.tar.gz: 58760a38203412a7a340eaef56ddf94f254a0d6c
+  metadata.gz: 89bca2ebbc18542ffbe461cece52bf392c99fcff
+  data.tar.gz: d0ca8e2a860cb613d9ae188749d56fa4a6a32c10
 SHA512:
-  metadata.gz: 24a362fade714c407dbb07d93ae1e51174b2f7f705c63f77222896f9bc9dd9b0d1154fc4b746a8b121e1b8c4fdf2a935aa5e5df359f68635271f80662cec7977
-  data.tar.gz: 12a47ead9dd6cb7459f2a2463df41df2970fa5283791db45aaf6ee92352ae5613b5502c88b872d3e2082aa2f8acd099ee072c70a1ed30965a97ebc6344ad7462
+  metadata.gz: 38a032f37e1e441379559c8dddf6b8d4fa3a5ffdd5e3b64dcb00ce35266d0954e6c6b9965ef7e8900b7549443bde8a02a6a6db3cac6da4e10238b36da54dbd80
+  data.tar.gz: 5f22c082bd3a351ad495dab411a6160fcaf3561f1c654b999985056c65231a09f4935175dae178357355ad22e1dd1e0c6bc6d5ec9fad6ccdcea31e818f708293

data/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 1.0.0
+
+* New feature: Responsive suffixes support.
+
+## 0.9
+
+* Renamed state namespace configurable variable to `$bem-state-namespace`.
+
+## 0.8
+
+* Added npm package.
+
+## 0.7.1
+
+* Added the visual debugger.
+
 ## 0.7
 
 * Allowing modifies-element() to be called within blocks.

data/README.md

@@ -34,6 +34,10 @@ Read [Harry's post on namespaces](http://csswizardry.com/2015/03/more-transparen
 
 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.
 
+### 4. Responsive suffixes
+
+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.
+
 ## Installation
 
 There are 4 ways of installing BEM Constructor:
@@ -134,6 +138,15 @@ Scopes allow you to isolate code you don't have control over.
 
     @include scope($name) { ... }
 
+
+### suffix($name)
+
+Adds a suffix
+
+Denotes a conditional breakpoint that modifies the properties and/or values of an UI
+
+    @include suffix($name) { ... }
+
 ## Options
 
 ### Namespaces
@@ -158,6 +171,10 @@ Override the default state namespace:
 
     $bem-state-namespace: 'has'; // defaults to 'is'
 
+Override the default suffix namespace:
+
+    $bem-suffix-namespace: '-at-'; // defaults to ''\\@''
+
 Override the default hack namespace:
 
     $bem-hack-namespace: 'it-wasnt-me-'; // defaults to '_'
@@ -170,14 +187,22 @@ By default BEM Constructor uses the following BEM convention:
 - Two underscores (__) for elements
 - Two hyphens for modifiers (--).
 
-You can customize them to whatever fits you needs:
+You can customize them to whatever fits your needs:
 
     $bem-element-separator: '-'; // Defaults to '__'
 
     $bem-modifier-separator: '-_-_'; // Defaults to '--'
 
+### Suffixes
+
+By default BEM Constructor uses `@` to denote suffixes (e.g. `.o-media@large`).
+
+You can customize the suffix to whatever fits your needs:
+
+    $bem-suffix-namespace: '---'; defaults to '\\@'
+
 
-##<a name="example"></a> :hamburger: The Burger Example™
+## <a name="example"></a> :hamburger: The Burger Example™
 
 
 *Disclaimer: the following Sass code may not compile into a real burger.*

data/lib/bem-constructor.rb

@@ -3,6 +3,6 @@ extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
 Compass::Frameworks.register('bem-constructor', :path => extension_path)
 
 module BEMConstructor
-  VERSION = "0.9.0"
-  DATE = "2015-03-26"
+  VERSION = "1.0.0"
+  DATE = "2016-02-07"
 end

data/stylesheets/_bem-constructor.scss

@@ -14,4 +14,5 @@
 @import 'theme';
 @import 'state';
 @import 'hack';
+@import 'suffix';
 @import 'debug';

data/stylesheets/_modifies-element.scss

@@ -24,7 +24,8 @@
         $selectors: append($selectors, $element, 'comma');
     }
 
-    $block: selector-append(&...);
+    $s: &; // Workaround for libsass
+    $block: selector-append($s...);
 
     $selector: selector-nest($block, '>', $selectors);
 

data/stylesheets/_state.scss

@@ -9,7 +9,8 @@ $bem-state-namespace: 'is' !default;
     $namespace: if($bem-use-namespaces, $bem-state-namespace + '-', '');
 
     @each $state in $states {
-      $s: selector-append(&, '.#{$namespace}#{$state}');
+      $ss: &; // Workaround for libsass
+      $s: selector-append($ss, '.#{$namespace}#{$state}');
       $selector: append($selector, $s, 'comma');
     }
 

data/stylesheets/_suffix.scss

@@ -0,0 +1,51 @@
+// -----------------------------------------------------------------------------
+// suffix constructor
+// -----------------------------------------------------------------------------
+
+/// Suffix namespace
+$bem-suffix-namespace: '\\@' !default;
+
+@function _suffix($suffixes...) {
+    $selector: ();
+    $namespace: if($bem-use-namespaces, $bem-suffix-namespace, '');
+
+    // Checking if the suffix is being set within a state.
+    // If so, disallow and throw an error.
+    // @TODO Allow suffixes to be set within states
+
+    @if map-has-key($_bem-current-context, state) and map-get($_bem-current-context, state) != null {
+        @error 'Currently, suffixes cannot be set within states. Move the suffix declaration outside the state constructor.';
+    }
+
+    @each $suffix in $suffixes {
+        @each $sel in & {
+
+            // Checking if the selector is composed of 3 elements. If that's the case,
+            // we're dealing with an element being modified by a block modifier.
+            // In that case, we need to add the suffix to the block too.
+            // @TODO Find a better way to deal with this situation.
+
+                @if length($sel) == 3 {
+                    $tmp: append((), nth($sel, 1) + '#{$namespace}#{$suffix}', space);
+                    $tmp: append($tmp, nth($sel, 2), space);
+                    $tmp: append($tmp, nth($sel, 3), space);
+                    $sel: #{$tmp};
+                }
+            $s: $sel + '#{$namespace}#{$suffix}';
+            $selector: append($selector, $s, 'comma');
+        }
+    }
+
+    $set-current: set-current-context('suffix', $suffixes, $selector);
+
+    @return $selector;
+}
+
+@mixin suffix($suffixes...) {
+
+    @at-root #{_suffix($suffixes...)} {
+      @content;
+    }
+
+    $unset-suffix: unset-current-context('suffix');
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bem-constructor
 version: !ruby/object:Gem::Version
-  version: 0.9.0
+  version: 1.0.0
 platform: ruby
 authors:
 - Daniel Guillan
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-03-26 00:00:00.000000000 Z
+date: 2016-02-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -61,6 +61,7 @@ files:
 - stylesheets/_modifies-element.scss
 - stylesheets/_scope.scss
 - stylesheets/_state.scss
+- stylesheets/_suffix.scss
 - stylesheets/_theme.scss
 - stylesheets/logger/_block-logger.scss
 - stylesheets/logger/_context-logger.scss