mq-sass 0.7.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: fec9758106e5f6e6c8d5d26a19354a50a7ce7c88
+  data.tar.gz: 71dc489fa6e225de84d8606b34ccda5b6af7be99
+SHA512:
+  metadata.gz: 5275a3b1f5de80a844b2160dbb9e2445403434cc35f75057012f9691f9cfde9ffb24a87aa0008bd5ba52219b0af6f90e91fd1b446b9ea36f556b77347e11a519
+  data.tar.gz: 10e93e44d9d79c600d7fc05ffe3bfeb405fb56560129d562be582908efc8c1746f3b64b9b275d2df53bca02a3a64b110c79f9f950b673c52744781d5ff73854a

data/.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

data/.gitignore

@@ -0,0 +1,3 @@
+*gem
+.DS_Store
+.sass-cache

data/.npmignore

@@ -0,0 +1,8 @@
+**/.*"
+node_modules"
+bower_components"
+test"
+tests"
+mq-sass.gemspec"
+Gemfile
+lib/

data/CHANGELOG.md

@@ -0,0 +1,31 @@
+# Changelog
+
+Changelog for mq-sass.
+
+## [0.7.0] - 12/02/2016
+### Added
+- [Ruby gem](https://rubygems.org/gems/mq-sass) support.
+- [Eyeglass](http://eyeglass.rocks/) support.
+
+## [0.6.0] - 05/19/2016
+### Fixed
+- Fix bug where units are excluded when `$mq-ems: false`.
+
+## [0.5.1] - 05/06/2016
+### Added
+- Functions with private names to avoid conflicts.
+
+## [0.5.0] - 05/06/2016
+### Added
+- Fix for `Undefined operation: "#px times 0".` error.
+
+## [0.4.0] - 04/25/2016
+### Added
+- Add `mq-get` function.
+
+## [0.3.0] - 02/08/2016
+### Added
+- Support for `min-height` and `max-height`.
+
+## [0.2.0] - 05/28/2015
+- Public release.

data/Gemfile

@@ -0,0 +1,3 @@
+source 'https://rubygems.org'
+
+gemspec

data/LICENSE.md

@@ -0,0 +1,23 @@
+LICENSE
+
+The MIT License
+
+Copyright © 2014–2016 [Jonathan Suh](https://jonsuh.com)
+
+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/README.md

@@ -0,0 +1,386 @@
+# mq-sass
+
+mq-sass is a Sass library to help you manage your responsive breakpoints and easily generate media queries.
+
+## Requirements
+
+- Sass 3.3+
+- SCSS syntax
+
+## Installation
+
+1. mq-sass is available on [npm](https://www.npmjs.com/package/mq-sass), yarn and [Bower](http://bower.io/search/?q=mq-sass).
+
+  ```
+  npm install mq-sass
+
+  yarn get mq-sass
+
+  bower install css-mq-sass
+  ```
+
+  Also available as a [Ruby gem](https://rubygems.org/gems/mq-sass) to use within your Rails application—see [below](#install-for-ruby-on-rails) for more information.
+
+  Or to manually install it, [download](https://github.com/jonsuh/mq-sass/archive/master.zip) and unzip the source files, then copy the files from the `stylesheets/mq-sass` directory into your project.
+
+2. Import the `_mq-sass.scss` file into your project.
+
+  ```scss
+  @import "mq-sass";
+  ```
+
+  If you're using gulp, Grunt, Compass, or alike, include mq-sass:
+
+  ```js
+  // gulp-sass gulpfile.js
+  .pipe(sass({
+    includePaths: ['node_modules/mq-sass/stylesheets']
+  }))
+
+  // grunt-sass Gruntfile.js
+  options: {
+    includePaths: ['node_modules/mq-sass/stylesheets']
+  },
+  ```
+
+  ```rb
+  # Compass config.rb
+  add_import_path "node_modules/mq-sass/stylesheets"
+  ```
+
+### Install for Ruby on Rails
+
+1. Add mq-sass to your Gemfile.
+
+  ```
+  gem 'mq-sass'
+  ```
+
+2. Run `bundle install`.
+3. Include mq-sass by using Sass’s native `@import`*
+
+  ```scss
+  // application.scss
+  @import "mq-sass";
+  ```
+
+  \* [More information](https://blog.pivotal.io/pivotal-labs/labs/structure-your-sass-files-with-import) on why Sass’s native `@import` + why you should ditch Sprockets directives altogether.
+
+## Documentation
+
+### Settings
+
+```scss
+$mq-breakpoints: (
+  iphone  : 320px,
+  iphone6 : 375px,
+  iphone6p: 414px,
+  small   : 480px,
+  medium  : 640px,
+  ipad    : 768px,
+  large   : 1024px,
+);
+
+$mq-ems    : false;
+$mq-em-base: 16px;
+
+$mq-only: "only screen";
+```
+
+### `mq($breakpoint, $minmax, $widthheight)` Mixin
+
+```scss
+@include mq($breakpoint, $minmax, $widthheight) { // $minmax and $widthheight are optional
+  // Sass goes here
+}
+```
+
+#### `$breakpoint`
+
+1. The first parameter, `$breakpoint`, accepts pre-defined values from the `$mq-breakpoints();` map, which is set by default as above in Settings.
+
+  Example:
+
+  ```scss
+  @include mq(small) {
+    color: white;
+  }
+  ```
+
+  ```css
+  /* Resulting CSS */
+  @media only screen and (min-width: 480px) {
+    color: white;
+  }
+  ```
+
+  You can also customize your own breakpoints.
+
+  ```scss
+  $mq-breakpoints: (
+    s : 600px,
+    m : 800px,
+    l : 1000px,
+    xl: 1200px,
+  );
+
+  @include mq(xl) {
+    color: blue;
+  }
+  ```
+
+2. `$breakpoint` also accepts other pre-defined values:
+
+  - portrait
+  - landscape
+  - retina
+
+  Example:
+
+  ```scss
+  @include mq(portrait) {
+    color: white;
+  }
+
+  @include mq(retina) {
+    color: red;
+  }
+  ```
+
+  ```css
+  /* Resulting CSS */
+  @media only screen and (orientation: portrait) {
+    color: white;
+  }
+
+  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) {
+    color: red;
+  }
+  ```
+
+3. `$breakpoint` accepts custom values in px.
+
+  Example:
+
+  ```scss
+  @include mq(700px) {
+    color: white;
+  }
+  ```
+
+  ```css
+  /* Resulting CSS */
+  @media only screen and (min-width: 700px) {
+    color: white;
+  }
+  ```
+
+  **Note:** You can also use unitless pixel values: `@include mq(700) {}`
+
+#### `$minmax`
+
+By default, media queries are mobile first (`min-width`).
+
+`$minmax` accepts values `min` or `max`, which will result in `min-width:` or `max-width:` respectively. If left blank, it falls back to the default, `min`.
+
+Example:
+
+```scss
+@include mq(ipad) {
+  color: white;
+}
+
+@include mq(600px, max) {
+  color: cyan;
+}
+```
+
+```css
+/* Resulting CSS */
+@media only screen and (min-width: 768px) {
+  color: white;
+}
+
+@media only screen and (max-width: 600px) {
+  color: cyan;
+}
+```
+
+#### `$widthheight`
+
+By default, media queries that are generated are (`min/max-width`).
+
+`$widthheight` accepts values `width` or `height`, which results in `min/max-width:` or `min/max-height:` respectively. If left blank, it falls back to the default, `width`.
+
+Example:
+
+```scss
+@include mq(small, min, height) {
+  color: cyan;
+}
+
+@include mq(600px, max, height) {
+  color: pink;
+}
+```
+
+```css
+/* Resulting CSS */
+@media only screen and (min-height: 480px) {
+  color: cyan;
+}
+
+@media only screen and (max-height: 600px) {
+  color: pink;
+}
+```
+
+#### ems
+
+To have media queries in ems, set `$mq-ems: true;`. The default em base is `16px`. You can change it by setting `$mq-em-base` to the pixel value of your choosing.
+
+Examples:
+
+```scss
+$mq-ems: true;
+
+@include mq(600px) {
+  color: white;
+}
+```
+
+```css
+/* Resulting CSS */
+@media only screen and (min-width: 37.5em) {
+  color: white;
+}
+```
+
+```scss
+$mq-ems    : true;
+$mq-em-base: 20px;
+
+@include mq(600px) {
+  color: cyan;
+}
+```
+
+```css
+/* Resulting CSS */
+@media only screen and (min-width: 30em) {
+  color: cyan;
+}
+```
+
+#### media
+
+By default the media is specified for `only screen`. For some reason if you'd like to change it or remove it completely, you can do so by changing the setting `$mq-media`:
+
+```scss
+$mq-media: "screen";
+```
+
+```css
+/* Resulting CSS */
+@media screen and (min-width...) {}
+```
+
+```scss
+$mq-media: ""; // or false
+```
+
+```css
+/* Resulting CSS */
+@media (min-width...) {}
+```
+
+### `mq-get($breakpoint, $ems)` function
+
+Returns the value of the breakpoint in pixels (by default) or ems.
+
+```scss
+.example {
+  max-width: mq-get(small);
+}
+```
+
+#### `$breakpoint`
+
+`$breakpoint` accepts only pre-defined keys from the `$mq-breakpoints();` map.
+
+```scss
+$mq-breakpoints: (
+  small : 480px,
+  medium: 640px,
+);
+
+.example {
+  max-width: mq-get(small);
+}
+.example2 {
+  max-width: mq-get(medium);
+}
+```
+
+```css
+/* Resulting CSS */
+.example {
+  max-width: 480px;
+}
+.example2 {
+  max-width: 640px;
+}
+```
+
+#### `$ems`
+
+`$ems` is a boolean (`false` or `true`, `false` by default) and dictates whether or not the return is in pixels or ems.
+
+```scss
+.example {
+  max-width: mq-get(small);
+}
+.example-ems {
+  max-width: mq-get(small, true);
+}
+```
+
+```css
+/* Resulting CSS */
+.example {
+  max-width: 480px;
+}
+.example2 {
+  max-width: 30em;
+}
+```
+
+## Notes
+
+<b id="f1">1</b>. Requires [Node.js](https://nodejs.org/) [↩](#a1)
+
+<b id="f2">2</b>. Also available on [Bower](http://bower.io/search/?q=mq-sass) [↩](#a2)
+
+## License
+
+The MIT License
+
+Copyright © 2014–2016 [Jonathan Suh](https://jonsuh.com) ([@jonsuh](https://twitter.com/jonsuh))
+
+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/bower.json

@@ -0,0 +1,39 @@
+{
+  "name": "mq-sass",
+  "version": "0.7.0",
+  "description": "Sass library to manage responsive breakpoints and generate to media queries",
+  "homepage": "https://github.com/jonsuh/mq-sass",
+  "license": "MIT",
+  "author": {
+    "name": "Jonathan Suh",
+    "email": "hello@jonsuh.com",
+    "url": "https://jonsuh.com"
+  },
+  "main": "stylesheets/_mq.scss",
+  "keywords": [
+    "breakpoints",
+    "css",
+    "sass",
+    "scss",
+    "media query",
+    "media queries",
+    "responsive"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jonsuh/mq-sass.git"
+  },
+  "bugs": {
+    "url": "https://github.com/jonsuh/mq-sass/issues"
+  },
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "Gemfile",
+    "mq-sass.gemspec",
+    "lib"
+  ]
+}

data/eyeglass-exports.js

@@ -0,0 +1,7 @@
+var mqsass = require("./index");
+
+module.exports = function(eyeglass, sass) {
+  return {
+    sassDir: mqsass.includePaths[0]
+  };
+};

data/index.js

@@ -0,0 +1,7 @@
+var path = require("path");
+
+module.exports = {
+  includePaths: [
+    path.join(__dirname, "stylesheets")
+  ]
+};

data/lib/mq-sass.rb

@@ -0,0 +1,19 @@
+# Derived from https://github.com/thoughtbot/bourbon/blob/v4-stable/lib/bourbon.rb
+# Special thanks to the thoughtbot team b/c I had no clue what I was doing
+dir = File.dirname(__FILE__)
+$LOAD_PATH.unshift dir unless $LOAD_PATH.include?(dir)
+
+unless defined?(Sass)
+  require 'sass'
+end
+
+module MQSass
+  if defined?(Rails) && defined?(Rails::Engine)
+    class Engine < ::Rails::Engine
+
+    end
+  end
+
+  mqsass_path = File.expand_path("../../_sass/mq-sass", __FILE__)
+  ENV["SASS_PATH"] = [ENV["SASS_PATH"], mqsass_path].compact.join(File::PATH_SEPARATOR)
+end

data/lib/mq-sass/version.rb

@@ -0,0 +1,3 @@
+module MQSass
+  VERSION = "0.7.0"
+end

data/mq-sass.gemspec

@@ -0,0 +1,17 @@
+$:.push File.expand_path("../lib", __FILE__)
+require "mq-sass/version"
+
+Gem::Specification.new do |spec|
+  spec.name        = "mq-sass"
+  spec.version     = MQSass::VERSION
+  spec.platform    = Gem::Platform::RUBY
+  spec.authors     = ["Jonathan Suh"]
+  spec.email       = ["hello@jonsuh.com"]
+  spec.homepage    = "https://github.com/jonsuh/mq-sass"
+  spec.summary     = "Sass library to manage responsive breakpoints"
+  spec.description = "Sass library to manage responsive breakpoints to generate media queries"
+  spec.license     = "MIT"
+
+  spec.files         = `git ls-files`.split("\n")
+  spec.require_paths = ["lib"]
+end

data/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "mq-sass",
+  "version": "0.7.0",
+  "description": "Sass library to manage responsive breakpoints and generate to media queries",
+  "homepage": "https://github.com/jonsuh/mq-sass",
+  "license": "MIT",
+  "author": {
+    "name": "Jonathan Suh",
+    "email": "hello@jonsuh.com",
+    "url": "https://jonsuh.com"
+  },
+  "main": "index.js",
+  "eyeglass": {
+    "needs": "*",
+    "exports": "eyeglass-exports.js"
+  },
+  "keywords": [
+    "breakpoints",
+    "css",
+    "sass",
+    "scss",
+    "media query",
+    "media queries",
+    "responsive"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jonsuh/mq-sass.git"
+  },
+  "bugs": {
+    "url": "https://github.com/jonsuh/mq-sass/issues"
+  }
+}

data/stylesheets/_mq-sass.scss

@@ -0,0 +1,82 @@
+// ==================================================
+// Imports
+// ==================================================
+@import "mq-sass/settings.scss";
+@import "mq-sass/functions.scss";
+
+// ==================================================
+// mq-get Function
+// ==================================================
+@function mq-get($breakpoint, $ems: false) {
+  @if map-has-key($mq-breakpoints, $breakpoint) {
+    $value: map-get($mq-breakpoints, $breakpoint);
+
+    @if $ems == true {
+      $value: _mq-em($value, $mq-em-base);
+    }
+
+    @return $value;
+  }
+  @else {
+    @error "Invalid breakpoint key. \a"
+         + "It must be defined in the `$mq-breakpoints` map.";
+  }
+}
+
+// ==================================================
+// mq Mixin
+// ==================================================
+@mixin mq($breakpoint, $minmax: min, $widthheight: width) {
+  @if $breakpoint == landscape or $breakpoint == portrait or $breakpoint == retina or map-has-key($mq-breakpoints, $breakpoint) or type-of($breakpoint) == "number" {
+    $media: $mq-media + " and ";
+    $media-query: "";
+
+    @if ($media == false) {
+      $media: "";
+    }
+
+    @if $breakpoint == landscape or $breakpoint == portrait {
+      $media-query: "#{$media} (orientation: #{$breakpoint})";
+    }
+    @else if $breakpoint == retina {
+      $media-query: "#{$media} (-webkit-min-device-pixel-ratio: 2)," +
+                    "#{$media} (min-resolution: 2dppx)";
+    }
+    @else {
+      @if $minmax != min and $minmax != max {
+        @warn "The second parameter of `mq()` only accepts value of `min` or `max`. \a"
+            + "Falling back to the default, `min`.";
+        $minmax: min;
+      }
+
+      @if $widthheight != width and $widthheight != height {
+        @warn "The third parameter of `mq()` only accepts values of `width` or `height`. \a"
+            + "Falling back to the default, `width`.";
+        $widthheight: width;
+      }
+
+      $value: $breakpoint;
+
+      @if map-has-key($mq-breakpoints, $breakpoint) {
+        $value: map-get($mq-breakpoints, $breakpoint);
+      }
+
+      $value: _mq-strip-units($value) * 1px;
+
+      @if ($mq-ems == true) {
+        $value: _mq-em($value, $mq-em-base);
+      }
+
+      $media-query: "#{$media} (#{$minmax}-#{$widthheight}: #{$value})";
+    }
+
+    @media #{$media-query} {
+      @content;
+    }
+  }
+  @else {
+    @warn "Invalid breakpoint value. \a"
+        + "It must be defined in the `$mq-breakpoints` map, a valid CSS value, \a"
+        + "or a predefined (e.g. retina, landscape, portrait).";
+  }
+}

data/stylesheets/mq-sass/_functions.scss

@@ -0,0 +1,23 @@
+// ==================================================
+// Functions
+// ==================================================
+
+// Strip units
+// ==================================================
+// Derived from Bourbon by thoughtbot (http://bourbon.io)
+@function _mq-strip-units($val) {
+  @return ($val / ($val * 0 + 1));
+}
+
+// Pixels to Ems
+// ==================================================
+// Derived from Bourbon by thoughtbot (http://bourbon.io)
+@function _mq-em($pxval, $base: $mq-em-base) {
+  @if not unitless($pxval) {
+      $pxval: _mq-strip-units($pxval);
+  }
+  @if not unitless($base) {
+      $base: _mq-strip-units($base);
+  }
+  @return ($pxval / $base) * 1em;
+}

data/stylesheets/mq-sass/_settings.scss

@@ -0,0 +1,24 @@
+// ==================================================
+// Settings
+// ==================================================
+
+// Ems
+// ==================================================
+$mq-ems    : false !default;
+$mq-em-base: 16px !default;
+
+// Breakpoints
+// ==================================================
+$mq-breakpoints: (
+  iphone  : 320px,
+  iphone6 : 375px,
+  iphone6p: 414px,
+  small   : 480px,
+  medium  : 640px,
+  ipad    : 768px,
+  large   : 1024px,
+) !default;
+
+// Breakpoints
+// ==================================================
+$mq-media: "only screen" !default;

metadata

@@ -0,0 +1,61 @@
+--- !ruby/object:Gem::Specification
+name: mq-sass
+version: !ruby/object:Gem::Version
+  version: 0.7.0
+platform: ruby
+authors:
+- Jonathan Suh
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2016-12-02 00:00:00.000000000 Z
+dependencies: []
+description: Sass library to manage responsive breakpoints to generate media queries
+email:
+- hello@jonsuh.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".editorconfig"
+- ".gitignore"
+- ".npmignore"
+- CHANGELOG.md
+- Gemfile
+- LICENSE.md
+- README.md
+- bower.json
+- eyeglass-exports.js
+- index.js
+- lib/mq-sass.rb
+- lib/mq-sass/version.rb
+- mq-sass.gemspec
+- package.json
+- stylesheets/_mq-sass.scss
+- stylesheets/mq-sass/_functions.scss
+- stylesheets/mq-sass/_settings.scss
+homepage: https://github.com/jonsuh/mq-sass
+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: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.5.1
+signing_key: 
+specification_version: 4
+summary: Sass library to manage responsive breakpoints
+test_files: []