bemify 0.0.1

checksums.yaml

@@ -0,0 +1,15 @@
+---
+!binary "U0hBMQ==":
+  metadata.gz: !binary |-
+    NGI1MmI0OWNjMDMxNTFmMDNhOGE1ZTZjYjViZTEyZWU5MjBjOGQ5OA==
+  data.tar.gz: !binary |-
+    OWI3ODlmMTJiNzA3NDU3YTIwY2JlNWQzN2QzMDQxMWViMjY4YTg2Ng==
+!binary "U0hBNTEy":
+  metadata.gz: !binary |-
+    ZmRmNDZlMDg4MmM2YjdmYTgzYWUxZGFiOTJkOTZmYWNjMWQ5NDg0MThiMTBm
+    OGIyNjc1NzA5NzczMmE5ODA2NzhlZGUwY2VkMjQ3YTk4NTFlZmQ5NWJlYjYw
+    ZjE2NGIzYzJkNTc4ZTQ1ZTUxZWMyYjY2ODVlYzgwYTg2NWVkMTM=
+  data.tar.gz: !binary |-
+    NjgyZTMxNTBiYjUxNjJhNDVlNjFiN2NiYmY1MmEzNDE4YTViN2MyOWUwYjk1
+    NDE1ZDhhZjA0ZDk2MTMzZGUzMWE3YzAzZWUxOGM3NjUyNjdlYjQwY2RhZTBi
+    ODJkMTczMzBmYTFiYzk2NjIxZjI3NjI5MWZkZThjZDgxMWEwMDI=

data/README.md

@@ -0,0 +1,215 @@
+# bemify
+
+[![Bower Version](https://img.shields.io/bower/v/bemify.svg)](https://img.shields.io/bower/v/bemify.svg)
+[![Gem Version](https://img.shields.io/gem/v/bemify.svg)](https://img.shields.io/gem/v/bemify.svg)
+
+Bemify is a set of mixins to help you write well-structured, readable, maintainable, component-based modular SCSS source using a BEM-style syntax.
+
+
+## Install
+
+Bemify can be installed as a Ruby Gem, via [Bower](http://bower.io), or manually.
+
+### Bower
+To install via bower run:
+
+    $ bower install --save-dev bemify
+
+### Ruby Gem
+When installed as a Ruby Gem, Bemify will be installed as a Compass extension if Compass is installed on your system.
+
+    $ gem install bemify
+
+### Manual Install
+Include `sass/_bemify.scss`in the appropriate location in your project.
+
+
+
+## Usage
+First, import bemify:
+
+    @import 'bemify';
+
+
+Once imported, the bemify mixins can now be used to write BEM-style SCSS, making your source cleaner and easier to read and change.
+
+    @include block('my-element') {
+        …
+
+        @include element('child') {
+          …
+        }
+
+        @include modifier('small') {
+          …
+        }
+
+        @include modifier('large') {
+          …
+        }
+
+        @include state('active') {
+          …
+        }
+
+    }
+
+The output will be full, non-nested BEM-style class selectors:
+
+
+    .my-element {
+      …
+    }
+
+    .my-element__child {
+      …
+    }
+
+    .my-element--large {
+      …
+    }
+
+    .my-element.is-active {
+      …
+    }
+
+By default, bemify will output combined `.block.state` / `.block__element.state` selectors.
+Bemify can also be configured to output full `.block--state` / `.block__element--state` selectors.
+For details, see Configuration below.
+
+
+The mixins can be nested to create modifiers for subcomponents:
+
+    @include block('my-element') {
+
+        @include element('child') {
+            @include modifier('bad') {
+                @include state('happy') {
+
+                }
+            }
+        }
+
+        @include modifier('large') {
+
+        }
+
+        @include state('active') {
+
+        }
+
+    }
+
+This will result in:
+
+    .my-element {
+
+    }
+
+    .my-element__child {
+
+    }
+
+    .my-element__child--bad {
+
+    }
+
+    .my-element__child--bad.is-happy {
+
+    }
+
+    .my-element--large {
+
+    }
+
+    .my-element.is-active {
+
+    }
+
+### Scoping
+
+Bemify can can of course also be used inside any scope:
+
+	.scope {
+
+		@include block('nav') {
+
+			// etc.
+
+		}
+
+	}
+
+
+### Configuration Options
+
+bemify uses a configuration file where you can adjust the block-element and the state separator, as well as the state prefix.
+To overwrite bemify's config with your own configuration file, import your configuration AFTER importing bemify, BUT BEFORE calling the mixins.
+
+    @import "bemify";
+    @import "my_config";
+
+    @include block('my-block') {
+        //…
+    }
+
+Configurable options and their defaults are:
+
+* `$combined-state-selectors`: `true`
+
+  Will output selectors like: .element.is-active, set to false to write .element--is-active
+
+* `$element-separator`: `__`
+
+* `$modifier-separator`: `--`
+
+* `$state-prefix`: `is`
+
+  Note that `$state-prefix` can be overridden with each call to the `state` mixin, so you can use both `--is-active` and `--has-error` using the same configuration:
+
+      @include state('error', 'has') {}
+
+
+## Aliases
+Not everyone thinks in the categories of 'block, element, modifier', but many of us still want to write modularized, components-based CSS. There are a couple of aliases included for those who think in terms of components, parent-child / -subcomponents included:
+
+    @include block('name') {}
+        == @include component('name') {}
+
+    @include element('name') {}
+        == @include child('name') {}
+        == @include subcomponent('name') {}
+        == @include sub('name') {}
+
+
+
+
+
+## Resources
+
+* [Harry Roberts: MindBEMding – getting your head ’round BEM syntax](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)
+* [Nicolas Gallagher: About HTML semantics and front-end architecture](http://nicolasgallagher.com/about-html-semantics-front-end-architecture/)
+
+
+---
+The MIT License (MIT)
+
+Copyright (c) 2015 Franz Heidl
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/lib/bemify.rb

@@ -0,0 +1,17 @@
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+stylesheets_path = File.join(extension_path, 'sass')
+
+if (defined? Compass)
+  Compass::Frameworks.register('bemify', :path => extension_path, :stylesheets_directory => stylesheets_path)
+else
+  if ENV.has_key?("SASS_PATH")
+    ENV["SASS_PATH"] = ENV["SASS_PATH"] + File::PATH_SEPARATOR + stylesheets_path
+  else
+    ENV["SASS_PATH"] = stylesheets_path
+  end
+end
+
+module Bemify
+  VERSION = "0.0.1"
+  DATE = "2015-04-17"
+end

data/sass/_bemify.scss

@@ -0,0 +1,104 @@
+// bemify
+// https://gtihub.com/franzheidl/bemify
+// Franz Heidl 2015
+// MIT License
+
+
+
+// CONFIG
+// ======
+
+// You can change the configuration here. To use your own config/variables file, import your config after importing bemify and before calling bemify's mixins.
+
+// Output combined state selectors like:
+//    .block__element.is-active {}
+// Set to false to output single, non-combined state modifiers:
+//    .block__element--is-active {}
+$combined-state-selectors:    true;
+
+// .block[separator]element:
+$element-separator:              "__";
+
+// .block[separator]modifier:
+$modifier-separator:             "--";
+
+// The default prefix for state modifier selectors, will be combined with $modifier-separator:
+$state-prefix:                "is";
+
+
+
+
+// MIXINS
+// ======
+
+@mixin block($name) {
+  .#{$name} {
+    @content;
+  }
+}
+
+
+@mixin element($name) {
+  @at-root {
+    &#{$element-separator}#{$name} {
+      @content;
+    }
+  }
+}
+
+
+@mixin modifier($name) {
+  @at-root {
+    &#{$modifier-separator}#{$name} {
+      @content;
+    }
+  }
+}
+
+
+@mixin state($state, $prefix: $state-prefix) {
+  @if $combined-state-selectors == true {
+    @at-root {
+      &.#{$prefix}-#{$state} {
+        @content;
+      }
+    }
+  }
+  @else {
+    @at-root {
+      &#{$modifier-separator}#{$prefix}-#{$state} {
+        @content;
+      }
+    }
+  }
+}
+
+
+
+
+// ALIASES
+// =======
+
+@mixin component($name) {
+  @include block($name) {
+    @content;
+  }
+}
+
+@mixin child($name) {
+  @include element($name) {
+    @content;
+  }
+}
+
+@mixin subcomponent($name) {
+  @include element($name) {
+    @content;
+  }
+}
+
+@mixin sub($name) {
+  @include element($name) {
+    @content;
+  }
+}

metadata

@@ -0,0 +1,61 @@
+--- !ruby/object:Gem::Specification
+name: bemify
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- Franz Heidl
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-04-17 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '3.3'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '3.3'
+description: Bemify is a set of mixins to help you write well-structured, component-based
+  modular SCSS source using a BEM-style syntax.
+email: 
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- lib/bemify.rb
+- sass/_bemify.scss
+homepage: https://github.com/franzheidl/bemify
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: 1.3.6
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.0.0.rc.2
+signing_key: 
+specification_version: 4
+summary: Sass Mixins to write BEM-style SCSS source
+test_files: []