modernizr-mixin 2.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 9f946ac711102f5abe64c440ef41d7426b47db0a
+  data.tar.gz: 79b99ea7dcbaed4911bd28bf01f29bdc232cd450
+SHA512:
+  metadata.gz: 42b0f6f4a19777e8f4e9fd721453e11475468a8d55d83028165c7368e50be0312456bb6d46a196eb2a1414b6f0a6d427d3e20491d490c7a2189910f5860cdf8a
+  data.tar.gz: 5ffd4f797553dd00a99fb220918c9252feb33355142106bd7bd884f8a307c94a6871b9358d7e0695d484c2bafa6eeabea2cb1c0ddad5f53ae18106043e9f6852

data/README.md

@@ -0,0 +1,87 @@
+# Modernizr mixin
+
+A simple way for DRYier, faster and cleaner Modernizr tests in Sass.
+
+
+## Install
+
+Requires Sass 3.3
+
+There are 3 ways of installing the Modernizr mixin:
+
+### Download
+
+Download `_modernizr.scss` which is located in the `stylesheets` folder and place it in your Sass directory.
+
+### Bower
+
+To install the package using Bower simply run the following command:
+
+	bower install --save-dev modernizr-mixin
+
+### Compass extension
+
+Modernizr is also available as a Compass extension:
+
+	gem install modernizr-mixin
+
+Then add the following line to your `config.rb`:
+
+	require 'modernizr-mixin'
+
+## Usage
+
+Import it into your main stylesheet:
+
+	@import 'modernizr';
+
+The Modernizr helper includes two mixins: `yep` and `nope`. Simply pass a comma-separeted list (`argList`) of features as argument and the rules you need to print.
+
+### yep
+
+Prints classes for supported features.
+
+	@include yep($features...) { ... }
+
+### nope
+
+Prints classes for unsupported features and unavailable Javascript.
+
+	@include nope($features...) { ... }
+
+### Example
+
+Sass input:
+
+```scss
+.my-selector {
+	@include yep(translate3d, opacity) {
+		transform: translate3d(0, 100px, 0);
+		opacity: 0;
+	}
+	@include nope(translate3d, opacity) {
+		top: 100px;
+		display: none;
+	}
+}
+```
+
+CSS output:
+
+```css
+.translate3d.opacity .my-selector {
+	transform: translate3d(0, 100px, 0);
+	opacity: 0;
+}
+
+.no-js my-selector,
+.no-translate3d .selector,
+.no-opacity .selector {
+	top: 100px;
+	display: none;
+}
+```
+
+## Acknowledgements
+
+Thanks to [Hugo Giraudel](https://github.com/hugogiraudel) for reviewing and tweaking the original code.

data/lib/modernizr-mixin.rb

@@ -0,0 +1,8 @@
+require 'compass'
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('modernizr-mixin', :path => extension_path)
+
+module ModernizrMixin
+  VERSION = "2.0.0"
+  DATE = "2014-05-06"
+end

data/stylesheets/_modernizr.scss

@@ -0,0 +1,109 @@
+// =============================================================================
+// Modernizr mixin
+//
+// Table of contents:
+// 1. Modernizr mixin
+//   1.1 Generate placeholder name and selectors
+//   1.2 Define placeholder and print @content
+//   1.3 Define feature selector and extend the placeholder
+// 2. Aliases
+//   2.1 Yep alias
+//   2.2 Nope alias
+//
+// Usage:
+// .my-selector {
+//   @include yep($features...) { ... }
+//   @include nope($features...) { ... {
+// }
+//
+// =============================================================================
+
+// =============================================================================
+// 1. Modernizr mixin
+// =============================================================================
+
+@mixin modernizr($features, $supports) {
+
+  $everything-okay: true;
+
+  // Use the 'no-' prefix if checking for unsuported features (e.g. `.no-translate3d`)
+  $prefix: if($supports, '', 'no-');
+
+  // Features selector
+  // a) create a string if checking for supported features. We'll concatenate class names later on (e.g. `.translate3d.opacity selector`)
+  // b) create a list if checking for unsuported features. We'll append the class names later on (e.g. `.no-js selector, .no-translate3d selector`)
+  $selector: if($supports, '', (unquote('.no-js')));
+
+  // The placeholder (e.g. `%yep-translate3d` or `%nope-opacity`)
+  $placeholder: if($supports, '%yep', '%nope');
+
+
+  // 1.1 Generate placeholder and selectors
+  // =====================================
+
+  @each $feature in $features {
+
+    // Making sure $feature is a string
+    @if type-of($feature) != string {
+
+      $everything-okay: false;
+      @warn '`#{$feature} is not a string for `modernizr`';
+
+    } @else {
+
+      // Add feature name to the placeholder string (e.g. '%yep' + '-' + 'translate3d' or '%nope' + '-' + 'translate3d')
+      $placeholder: $placeholder + '-' + $feature;
+
+      // Define the new selector string (e.g. `.translate3d` or `.no-translate3d`)
+      $new-selector: #{'.' + $prefix + $feature};
+
+      // Append the new selector
+      // a) to the string if yep (e.g. `.translate3d.opacity`)
+      // b) to the list if nope (e.g. `.no-translate3d, .no-opacity`)
+      $selector: if($supports, $selector + $new-selector, append($selector, $new-selector, comma));
+
+    }
+  }
+
+  @if $everything-okay == true {
+
+    // 1.2 Define the placholder and print @content
+    // =====================================
+
+    #{$placeholder} & {
+      @content;
+    }
+
+
+    // 1.3 Define feature selector(s) and extend the placeholder
+    // =====================================
+
+    @at-root #{$selector} {
+      @extend #{$placeholder};
+    }
+
+  }
+}
+
+// =============================================================================
+// 2. Aliases
+// =============================================================================
+
+  // 2.1 Yep alias
+  // =====================================
+
+  @mixin yep($features...) {
+    @include modernizr($features, $supports: true) {
+      @content;
+    }
+  }
+
+
+  // 2.2 Nope alias
+  // =====================================
+
+  @mixin nope($features...) {
+    @include modernizr($features, $supports: false) {
+      @content;
+    }
+  }

metadata

@@ -0,0 +1,75 @@
+--- !ruby/object:Gem::Specification
+name: modernizr-mixin
+version: !ruby/object:Gem::Version
+  version: 2.0.0
+platform: ruby
+authors:
+- Daniel Guillan
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2014-05-06 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'
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.0.0.alpha
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.0.0.alpha
+description: A simple way for DRYier, faster and cleaner Modernizr tests in Sass.
+email:
+- daniel.guillan@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- lib/modernizr-mixin.rb
+- stylesheets/_modernizr.scss
+homepage: https://github.com/danielguillan/modernizr-mixin
+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: modernizr-mixin
+rubygems_version: 2.2.2
+signing_key: 
+specification_version: 4
+summary: Simple and comprehensive mixin for Modernizr tests in Sass
+test_files: []