Initial commit

.gitignore

@@ -0,0 +1,4 @@
+.idea
+.DS_Store
+.sass-cache
+node_modules

README.md

@@ -0,0 +1,88 @@
+# SassyBreakpoint
+
+A simple ***breakpoint mixin*** is just all you need!
+
+### Required
+
+- Sass 3.3 and up
+
+
+### Settings
+```scss
+// _Variables.scss
+// based on Foundation 5 Framework
+
+$sf-screen: "only screen" !default;
+
+$sf-small-up: $sf-screen !default;
+$sf-small-only: "#{$sf-screen} and (max-width: #{upper-bound($sf-small-range)})" !default;
+
+$sf-medium-up: "#{$sf-screen} and (min-width:#{lower-bound($sf-medium-range)})" !default;
+$sf-medium-only: "#{$sf-screen} and (min-width:#{lower-bound($sf-medium-range)}) and (max-width:#{upper-bound($sf-medium-range)})" !default;
+
+$sf-large-up: "#{$sf-screen} and (min-width:#{lower-bound($sf-large-range)})" !default;
+$sf-large-only: "#{$sf-screen} and (min-width:#{lower-bound($sf-large-range)}) and (max-width:#{upper-bound($sf-large-range)})" !default;
+
+$sf-breakpoints: (
+    "small": $sf-small-up,
+    "small-only": $sf-small-only,
+
+    "medium": $sf-medium-up,
+    "medium-only": $sf-medium-only,
+
+    "large": $sf-large-up,
+    "large-only": $sf-large-only
+) !default;
+
+```
+
+
+### How to use
+
+Scss:
+```scss
+// create 3 breakpoints for aside
+aside {
+  @include sf-breakpoint("small-only"){
+      width: 100%;
+      content: "small-only";
+  }
+  @include sf-breakpoint("medium-only"){
+      width: 80%;
+      content: "medium-only";
+  }
+  @include sf-breakpoint("large-only"){
+      width: 30%;
+      content: "large-only";
+  }
+}
+```
+Output:
+```css
+  @media only screen and (max-width: 40em) {
+    aside {
+      width: 100%;
+      content: "small-only"; 
+    } 
+  }
+  @media only screen and (min-width: 40.063em) and (max-width: 64em) {
+    aside {
+      width: 80%;
+      content: "medium-only";
+    } 
+  }
+  @media only screen and (min-width: 64.063em) and (max-width: 90em) {
+    aside {
+      width: 30%;
+      content: "large-only";
+    } 
+   }
+```
+
+### SassyBreakpoint + SassyPlaceholder
+You can extend any placeholder on different directive when combining it with SassyPlaceholder.
+
+
+### License
+
+The SassyBreakpoint is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT)

Test/test.scss

@@ -0,0 +1,18 @@
+@import "../SassyBreakpoint";
+
+aside {
+  content: "root";
+  @include sf-breakpoint("small-only"){
+      width: 100%;
+      content: "small-only";
+  }
+  @include sf-breakpoint("medium-only"){
+      width: 100%;
+      content: "medium-only";
+  }
+  @include sf-breakpoint("large-only"){
+      width: 30%;
+      content: "large-only";
+  }
+}
+

_Functions.scss

@@ -0,0 +1,19 @@
+
+// v0.0.1
+
+// Foundation by ZURB
+
+@function lower-bound($range){
+  @if length($range) <= 0 {
+    @return 0;
+  }
+  @return nth($range,1);
+}
+
+
+@function upper-bound($range){
+  @if length($range) < 2 {
+    @return 999999999999;
+  }
+  @return nth($range, 2);
+}

_Mixins.scss

@@ -0,0 +1,20 @@
+
+// v0.0.1
+
+@mixin sf-breakpoint($breakpoint){
+  $value: map-get($sf-breakpoints, $breakpoint);
+
+  @if($value != null){
+    // Set Current Breakpoint
+    $sf-current-breakpoint: $breakpoint !global;
+
+    @media #{$value}{
+      @content;
+    }
+
+    // Reset Breakpoint
+    $sf-current-breakpoint: $sf-default-breakpoint !global;
+  } @else {
+    @error "`#{$breakpoint}` breakpoint is Invalid or it doesn't exists.";
+  }
+}

_SassyBreakpoint.scss

@@ -0,0 +1,6 @@
+
+// v0.0.1
+
+@import "Functions";
+@import "Variables";
+@import "Mixins";

_Variables.scss

@@ -0,0 +1,46 @@
+
+// v0.0.1
+
+
+$sf-default-breakpoint: root !default;
+$sf-current-breakpoint: $sf-default-breakpoint !global;
+
+// Based on Foundation 5 Framework
+
+$sf-small-range: (0em, 40em) !default;
+$sf-medium-range: (40.063em, 64em) !default;
+$sf-large-range: (64.063em, 90em) !default;
+$sf-xlarge-range: (90.063em, 120em) !default;
+$sf-xxlarge-range: (120.063em, 99999999em) !default;
+
+$sf-screen: "only screen" !default;
+
+$sf-landscape: "#{$sf-screen} and (orientation: landscape)" !default;
+$sf-portrait: "#{$sf-screen} and (orientation: portrait)" !default;
+
+$sf-small-up: $sf-screen !default;
+$sf-small-only: "#{$sf-screen} and (max-width: #{upper-bound($sf-small-range)})" !default;
+
+$sf-medium-up: "#{$sf-screen} and (min-width:#{lower-bound($sf-medium-range)})" !default;
+$sf-medium-only: "#{$sf-screen} and (min-width:#{lower-bound($sf-medium-range)}) and (max-width:#{upper-bound($sf-medium-range)})" !default;
+
+$sf-large-up: "#{$sf-screen} and (min-width:#{lower-bound($sf-large-range)})" !default;
+$sf-large-only: "#{$sf-screen} and (min-width:#{lower-bound($sf-large-range)}) and (max-width:#{upper-bound($sf-large-range)})" !default;
+
+$sf-xlarge-up: "#{$sf-screen} and (min-width:#{lower-bound($sf-xlarge-range)})" !default;
+$sf-xlarge-only: "#{$sf-screen} and (min-width:#{lower-bound($sf-xlarge-range)}) and (max-width:#{upper-bound($sf-xlarge-range)})" !default;
+
+$sf-xxlarge-up: "#{$sf-screen} and (min-width:#{lower-bound($sf-xxlarge-range)})" !default;
+$sf-xxlarge-only: "#{$sf-screen} and (min-width:#{lower-bound($sf-xxlarge-range)}) and (max-width:#{upper-bound($sf-xxlarge-range)})" !default;
+
+
+$sf-breakpoints: (
+    "small": $sf-small-up,
+    "small-only": $sf-small-only,
+
+    "medium": $sf-medium-up,
+    "medium-only": $sf-medium-only,
+
+    "large": $sf-large-up,
+    "large-only": $sf-large-only
+) !default;

bower.json

@@ -0,0 +1,24 @@
+{
+  "name": "SassyBreakpoint",
+  "version": "0.0.1",
+  "authors": [
+    "johngerome <johngerome@gmail.com>"
+  ],
+  "description": "A simple breakpoint mixin is just all you need!",
+  "main": "_SassyBreakpoint.scss",
+  "keywords": [
+    "sass",
+    "breakpoint",
+    "css",
+    "sassyframework"
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/SassyFramework/SassyBreakpoint",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}

sass-watch-test.sh

@@ -0,0 +1 @@
+sass --watch Test