@jjwesterkamp/sass-utils - npm Package Compare versions

Comparing version 2.1.1 to 3.0.0-beta1

CHANGELOG.md

@@ -6,3 +6,10 @@ # Changelog
 
+# v2.1.1
+[v2.1.0 ... v2.1.1](https://github.com/JJWesterkamp/sass-utils/compare/v2.1.0...v2.1.1)
 
+**Housekeeping**
+
+- Added changelog file & README link
+- Added .npmignore file
+
 # v2.1.0
@@ -32,3 +39,3 @@ [v2.0.0 ... v2.1.0](https://github.com/JJWesterkamp/sass-utils/compare/v2.0.0...v2.1.0)
 
-# v1.1.0 
+# v1.1.0
 [v1.0.0 ... v1.1.0](https://github.com/JJWesterkamp/sass-utils/compare/v1.0.0...v1.1.0)
@@ -35,0 +42,0 @@

package.json

 {
-  "name": "@jjwesterkamp/sass-utils",
-  "version": "2.1.1",
-  "description": "Generic SCSS function- & mixin-utilities for web projects.",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/JJWesterkamp/sass-utils.git"
-  },
-  "keywords": [
-    "Sass",
-    "mixins",
-    "utilities",
-    "library",
-    "checkbox",
-    "radiobutton"
-  ],
-  "author": "Jeffrey Westerkamp",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/JJWesterkamp/sass-utils/issues"
-  },
-  "homepage": "https://github.com/JJWesterkamp/sass-utils#readme"
+    "name": "@jjwesterkamp/sass-utils",
+    "version": "3.0.0-beta1",
+    "description": "Generic SCSS utilities for web projects.",
+    "main": "index.js",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/JJWesterkamp/sass-utils.git"
+    },
+    "keywords": [
+        "sass",
+        "scss",
+        "mixin",
+        "library"
+    ],
+    "author": {
+        "name": "Jeffrey Westerkamp",
+        "url": "https://github.com/JJWesterkamp"
+    },
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/JJWesterkamp/sass-utils/issues"
+    },
+    "homepage": "https://github.com/JJWesterkamp/sass-utils#readme"
 }

README.md

@@ -1,74 +0,44 @@
-# @jjwesterkamp/sass-utils
-Generic SCSS function- & mixin-utilities for web projects.
+# @jjwesterkamp/sass-utils [![npm version](https://badge.fury.io/js/%40jjwesterkamp%2Fsass-utils.svg)](https://badge.fury.io/js/%40jjwesterkamp%2Fsass-utils)
+**Generic SCSS utilities for web projects.** This package provides several utilities in the form of sass mixins that help with writing common repetitive CSS rule sets. [View changelog](https://github.com/JJWesterkamp/sass-utils/blob/master/CHANGELOG.md).
+## Installation
 
-[![npm version](https://badge.fury.io/js/%40jjwesterkamp%2Fsass-utils.svg)](https://badge.fury.io/js/%40jjwesterkamp%2Fsass-utils) [View changelog](https://github.com/JJWesterkamp/sass-utils/blob/master/CHANGELOG.md)
+Install the package from npm:
 
-## Required SCSS variables
-
-Some variables are required by this package. [This config file](https://github.com/JJWesterkamp/sass-utils/blob/master/sass/config.scss) is imported in both functions.scss and mixins.scss. Example: the function `rem-calc` requires a variable `$rem-base` to exist. To override the default value, define the variable before importing this package:
-
-```scss
-$rem-base: 16px;
-
-@import '~@jjwesterkamp/sass-utils/sass/functions';
 ```
+$ npm install --save-dev @jjwesterkamp/sass-utils
+```
 
-Overriding works the same for all variables.
+## Usage
 
-### `$rem-base`
 
-The base size for pixel-to-rem conversion using the `rem-calc()` mixin.
+### 1. Setup required SCSS variables
 
-### `$z-indices`
+A few variables are required by this package. Copy [the config file](scss/config.scss) into your project, and modify the variables to your needs. Then import it into your SCSS project:
 
-This sass map maps user-defined aliases to unitless positive integers denoting corresponding z-index values. This is a dependency of he [`z-index()`](#z-index) mixin.
-
-## Functions
-
 ```scss
-@import '~@jjwesterkamp/sass-utils/sass/functions';
+@import 'sass-utils.config';
 ```
 
-### `rem-calc()` (from [Foundation v5](https://github.com/zurb/foundation-sites/tree/V5))
+### 2. Import functions & mixins
 
-This function takes a space-separated list of unitless numbers and pixel values, and converts them to `rem` values, based on the `$rem-base` variable.
+To get started quickly import the index files importing all functions and mixins:
 
 ```scss
-// $rem-base: 16px;
+@import 'sass-utils.config';
 
-@warn rem-calc($rem-base);
-console> WARNING: 1rem
-
-@warn rem-calc($rem-base (2 * $rem-base));
-console> WARNING: 1rem 2rem
-
-@warn rem-calc(8 12 16 24);
-console> WARNING: 0.5rem 0.75rem 1rem 1.5rem
+@import '~@jjwesterkamp/sass-utils/scss/functions.index';
+@import '~@jjwesterkamp/sass-utils/scss/mixins.index';
 ```
 
+Alternatively you may import only the specific mixins that you need:
 
-## Mixins
-
 ```scss
-@import '~@jjwesterkamp/sass-utils/sass/mixins';
+@import "~@jjwesterkamp/sass-utils/scss/mixins/absolute-block-pseudo";
+@import "~@jjwesterkamp/sass-utils/scss/mixins/absolute-overlay";
+@import "~@jjwesterkamp/sass-utils/scss/mixins/autofill-style";
+// ...
 ```
 
-### `z-index()`
+## License
 
-Use this mixin to apply a z-index value to an element by specifying a property of the `$z-indices` map.
-
-```scss
-$z-indices: (
-    site-header: 5000,
-);
-
-.site-header {
-    @include z-index(site-header);
-}
-
-// Output:
-.site-header {
-    z-index: 5000;
-}
-```
-
+The MIT licence (MIT). See the [license file](https://github.com/JJWesterkamp/sass-utils/blob/master/LICENSE) for more information.

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16502

increased by89.13%

Number of package files

34

increased by385.71%

Worsened metrics

Number of low quality alerts

2

increased by100%

Number of lines in readme file

45

decreased by-40%

No dependency changes