mq-sass - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

bower.json

 {
   "name": "mq-sass",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Sass library to manage responsive breakpoints and generate to media queries",
@@ -5,0 +5,0 @@ "license": "MIT",

CHANGELOG.md

@@ -5,2 +5,6 @@ # Changelog
 
+## [0.4.0] - 04/25/2016
+### Added
+- Add `mq-get` function.
+
 ## [0.3.0] - 02/08/2016
@@ -7,0 +11,0 @@ ### Added

package.json

 {
   "name": "mq-sass",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Sass library to manage responsive breakpoints and generate to media queries",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -65,10 +65,2 @@ # mq-sass
 
-### Mixin
-
-```scss
-@include mq($breakpoint, $minmax) {
-  // Sass goes here
-}
-```
-
 ### Settings
@@ -93,5 +85,9 @@
 
-### Usage
+### `mq($breakpoint, $minmax, $widthheight)` Mixin
 
-Mixin `mq()` accepts 3 parameters: `mq($breakpoint, $minmax, $widthheight)`.
+```scss
+@include mq($breakpoint, $minmax, $widthheight) { // $minmax and $widthheight are optional
+  // Sass goes here
+}
+```
 
@@ -197,3 +193,3 @@ #### `$breakpoint`
 ```
-  
+
 ```css
@@ -268,3 +264,3 @@ /* Resulting CSS */
 ```
-  
+
 ```css
@@ -284,3 +280,3 @@ /* Resulting CSS */
 ```
-  
+
 ```css
@@ -290,7 +286,7 @@ /* Resulting CSS */
 ```
-  
+
 ```scss
 $mq-media: ""; // or false
 ```
-  
+
 ```css
@@ -301,2 +297,63 @@ /* Resulting CSS */
 
+### `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
@@ -303,0 +360,0 @@

No alert changes

Improved metrics

Total package byte prevSize

17865

increased by9.29%

Lines of code

95

increased by3.26%

Number of lines in readme file

381

increased by17.59%

No dependency changes