@littlemissrobot/sass-mixins - npm Package Compare versions

Comparing version 0.1.1 to 1.0.0

package.json

 {
   "name": "@littlemissrobot/sass-mixins",
-  "version": "0.1.1",
+  "version": "1.0.0",
   "description": "Little Miss Robot sass mixins library that helps execute reusable and complex tasks",
   "main": "index.js",
   "scripts": {
-    "start": "NODE_ENV=local ./node_modules/.bin/gulp start --gulpfile .gulp/Gulpfile.js",
-    "build": "NODE_ENV=prod ./node_modules/.bin/gulp build --gulpfile .gulp/Gulpfile.js",
-    "todo": "leasot -x --reporter markdown 'src/**/*.html' 'src/**/*.scss' > TODO.md",
+    "start": "NODE_ENV=DEVELOPMENT ./node_modules/.bin/gulp start --gulpfile .gulpfile.js",
+    "build": "NODE_ENV=PRODUCTION ./node_modules/.bin/gulp build --gulpfile .gulpfile.js",
     "prepublishOnly": "npm run build"
@@ -24,19 +23,26 @@ },
   "files": [
-    "lib"
+    "scss",
+    "_index.scss"
   ],
+  "publishConfig": {
+    "access": "public"
+  },
   "devDependencies": {
-    "@littlemissrobot/stylelint-config": "^1.0.7",
+    "@littlemissrobot/stylelint-config": "^1.0.15",
     "browser-sync": "^2.26.7",
+    "del": "^5.1.0",
     "gulp": "^4.0.2",
     "gulp-postcss": "^8.0.0",
-    "gulp-sass": "^4.0.2",
+    "gulp-sass": "^4.1.0",
+    "gulp-sourcemaps": "^2.6.5",
     "gulp-stylelint": "^13.0.0",
-    "leasot": "^10.0.0",
-    "node-sass": "^4.13.0",
     "postcss-preset-env": "^6.7.0",
-    "stylelint": "^13.3.0"
+    "postcss-scss": "^2.1.1",
+    "stylelint": "^13.5.0"
   },
   "dependencies": {
-    "@littlemissrobot/sass-functions": "^0.1.0"
+    "@littlemissrobot/sass-breakpoints": "^1.0.0",
+    "@littlemissrobot/sass-functions": "^1.0.0",
+    "sass": "^1.26.8"
   }
 }

README.md

 # Little Miss Robot - Sass mixins
 
-> This repository contains SASS mixins that we, at Little Miss Robot, like to
-> use to make our wonderful lives in the world of SASS easier and more
-> managable.
+> This repository contains Sass (Dart Sass) based mixins that we, at Little
+> Miss Robot, like to use to make our wonderful lives in the world of SASS more
+> wondeful.
 
-## Info
+This package does not contain or generate any CSS by itself, only if a mixin is
+inlucded. It simply provides a couple of `@mixin` statements for you to make use
+of.
 
-This package contains no styling but simply provides a couple of mixins that
-execute a simple task and provide functionality based on certain variables.
+## IMPORTANT
 
-## Dependencies
+This library makes use of [Dart Sass](https://sass-lang.com/dart-sass), which is
+the primary implementation of Sass. Make sure that your Sass compiler is making
+use of Dart Sass.
 
-- [@littlemissrobot/sass-functions/lib/main](https://www.npmjs.com/package/@littlemissrobot/sass-functions)
+This means that if you are using a task manager (like Gulp) or a module bundler
+(like Webpack), you must indicate which compiler it should use for compiling
+Sass to CSS.
 
+Furthermore, this library makes heavy use of Sass modules:
+[`@use`](https://sass-lang.com/documentation/at-rules/use). Therefore we
+recommend importing and using this library with the `@use` statement.
+
 ## Install
 ```sh
+# As a dependency
+$ npm install @littlemissrobot/sass-mixins
+# As a dev-dependency
 $ npm install --save-dev @littlemissrobot/sass-mixins
@@ -23,53 +35,267 @@ ```
 
-1. Import the library from the node_modules folder.
+### Through the main entry point
 
+1. Import the library from the node_modules folder:
+
 ```scss
-@import
-	// Dependency
-	"@littlemissrobot/sass-functions/lib/main",
-	// Library
-	"@littlemissrobot/sass-mixins/lib/main";
+@use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-mixins" as _m;
 ```
 
-2. That's it! The mixins that are present within this file are now available
-to you!
+2. Mixins are now available within the `_m` namespace:
 
+```scss
+ul {
+    @include _m.reset_list();
+}
+```
+
+3. That's (mind-blowingly) it! The mixins are seperated with internal
+   namespaces, where mixins related to the `reset` category are namespaced with
+   `_m.reset_[MIXIN-NAME]` or `typography` would be
+   `_f.typography_[MIXIN-NAME]`.
+
+### Through the partial entry points
+
+1. Import the partial of the library from the node_modules folder.
+
+```scss
+@use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-mixins/reset" as _reset;
+```
+
+2. Mixins are now available within the `_reset` namespace.
+
+```scss
+h1 {
+    @include _reset.list();
+}
+```
+
+3. That's (mind-blowingly) it! There are a number of partials to use the
+   mixins from:
+
+   * `"sass-mixins/font" as _font;`
+   * `"sass-mixins/other" as _other;`
+   * `"sass-mixins/prop" as _prop;`
+   * `"sass-mixins/reset" as _reset;`
+   * `"sass-mixins/screen-reader" as _screen-reader;`
+   * `"sass-mixins/typography" as _typography;`
+
 ## Mixins
 
-### get-font($name, $url, $weight: normal, $style: normal)
+### Font
 
-> Load a font file. Every version of the font should have the same name.
+These mixins are namespace with **font_**:
 
+```scss
+@use "@littlemissrobot/sass-mixins" as _m;
+
+@include  _m.font_load("Open Sans", "./open-sans");
+```
+
+Or can be included through the partial:
+
+```scss
+@use "@littlemissrobot/sass-mixins/font" as _font;
+
+@include  _font.load("Open Sans", "./open-sans");
+```
+
+#### load($name, $url, $font-weight, $font-style)
+
+Load font files with the extensions **.woff** and **.woff2**. Every version of
+the font should have the same name.
+
 Parameters:
 
-* **$name**: a name given to the font
-* **$url**: location of the font file
-* **$weight**: the weight (100, 300, 400, ...) the font file is based on
-* **$style**: the style (italic, normal, ...) the font file is based on
+* **$name**: The name the font should have
+* **$url**: The location of the font-files
+* **$font-weight** (optional): The weight the font has
+* **$font-style** (optional): The style the font has
 
 ```scss
-@include get-font("Roboto", "/fonts/roboto/roboto", 300, normal);
+@use "@littlemissrobot/sass-mixins/font" as _font;
+
+@include _font.load("Open Sans", "./assets/fonts/open-sans", "300", normal);
 ```
 
-### responsive-prop($props, $responsive, $min, $max: false, $fallback: false)
+### Other
 
-> Create CSS properties that are responsive by defining a minimum and maximum
-> value. For example: responsive font-sizes.
+These mixins are namespace with **other_**:
 
-* **$props**: the properties to make responsive, each property is separated by a
-space
-* **$responsive**: the value that should scale with the viewport width, expressed
-in vw units
-* **$min**: the minimum value, the $responsive does not go lower than this
-* **$max**: the maximum value, the $responsive does not go higher than this
-* **$fallback**: A fallback when the vw unit is not supported by the browser
+```scss
+@use "@littlemissrobot/sass-mixins" as _m;
 
+@include _m.other_clearfix();
+```
+
+Or can be included through the partial:
+
 ```scss
-p {
-	@include responsive-prop("font-size", 2vw, 2rem, 4rem);
-}
+@use "@littlemissrobot/sass-mixins/other" as _other;
 
-p {
-	@include responsive-prop("font-size" "line-height", 2vw, 2rem, 4rem);
-}
+@include _other.clearfix();
 ```
+
+#### clearfix
+
+Used in float layouts where elements are floated to be stacked horizontally.
+Automatically clear its child elements, so that you don't need to add additional
+markup.
+
+```scss
+@use "@littlemissrobot/sass-mixins/other" as _other;
+
+@include _other.clearfix();
+```
+
+### Prop
+
+These mixins are namespace with **prop_**:
+
+```scss
+@use "@littlemissrobot/sass-mixins" as _m;
+
+@include _m.prop_responsive(margin-top, 5vw, 3rem, 7rem);
+```
+
+Or can be included through the partial:
+
+```scss
+@use "@littlemissrobot/sass-mixins/prop" as _prop;
+
+@include _prop.responsive(margin-top, 5vw, 3rem, 7rem);
+```
+
+#### responsive($props, $responsive, $min, $max)
+
+Create a CSS property that is responsive by defining a minimum and maximum
+value. For example: responsive font-sizes.
+
+Parameters:
+
+* **$props**: the list of props to make responsive
+* **$responsive**: the responsive value in vw
+* **$min**: the fixed minimum value where the responsive value is not allowed to
+  go under
+* **$max**: the fixed maximum value where the responsive value is not allowed to
+  go above
+
+```scss
+@use "@littlemissrobot/sass-mixins/prop" as _prop;
+
+@include _prop.responsive(margin-top, 5rem, 3vw, 7vw);
+```
+
+### Reset
+
+These mixins are namespace with **reset_**:
+
+```scss
+@use "@littlemissrobot/sass-mixins" as _m;
+
+@include _m.reset_list();
+```
+
+Or can be included through the partial:
+
+```scss
+@use "@littlemissrobot/sass-mixins/reset" as _reset;
+
+@include _reset.list();
+```
+
+#### button
+
+Reset a button by removing the default styling properties.
+
+Parameters:
+
+* **$important** (optional): Pass the !important suffix to each styling property
+  within the mixin
+
+```scss
+@use "@littlemissrobot/sass-mixins/reset" as _reset;
+
+@include _reset.button();
+@include _reset.button(!important);
+```
+
+#### list
+
+Reset a list by removing the default styling properties.
+
+Parameters:
+
+* **$important** (optional): Pass the !important suffix to each styling property
+  within the mixin
+
+```scss
+@use "@littlemissrobot/sass-mixins/reset" as _reset;
+
+@include _reset.list();
+@include _reset.list(!important);
+```
+
+### Screen reader
+
+These mixins are namespace with **screen-reader_**:
+
+```scss
+@use "@littlemissrobot/sass-mixins" as _m;
+
+@include _m.screen-reader_visually-hidden();
+```
+
+Or can be included through the partial:
+
+```scss
+@use "@littlemissrobot/sass-mixins/screen-reader" as _screen-reader;
+
+@include _screen-reader.visually-hidden();
+```
+
+#### visually-hidden($important)
+
+Only display content to screen readers, hide the element offscreen to keep its
+functionality and behaviour. DO NOT COMPROMISE ACCESSIBILITY.
+
+Parameters:
+
+* **$important** (optional): Pass the !important suffix to each styling property
+  within the mixin
+
+```scss
+@use "@littlemissrobot/sass-mixins/screen-reader" as _screen-reader;
+
+@include _screen-reader.visually-hidden();
+@include _screen-reader.visually-hidden(!important);
+```
+
+### Typography
+
+These mixins are namespace with **typography_**:
+
+```scss
+@use "@littlemissrobot/sass-mixins" as _m;
+
+@include _m.typography_truncate();
+```
+
+Or can be included through the partial:
+
+```scss
+@use "@littlemissrobot/sass-mixins/typography" as _typography;
+
+@include _typography.truncate();
+```
+
+#### truncate($important)
+
+Add 3 dots to a text element that goes out of its bounds. This is always limited
+to one straight line.
+
+```scss
+@use "@littlemissrobot/sass-mixins/typography" as _typography;
+
+@include _typography.truncate();
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

17665

increased by174.56%

Number of package files

17

increased by240%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

301

increased by301.33%

Worsened metrics

Dependency count

3

increased by200%

Dev dependency count

11

increased by10%

Dependency changes

• + Added@littlemissrobot/sass-breakpoints@^1.0.0

• + Addedsass@^1.26.8

• + Added@littlemissrobot/sass-breakpoints@1.1.2(transitive)

• + Added@littlemissrobot/sass-functions@1.1.2(transitive)

• + Added@littlemissrobot/sass-spacing@2.0.0(transitive)

• + Addedchokidar@4.0.0(transitive)

• + Addedimmutable@4.3.7(transitive)

• + Addedreaddirp@4.0.1(transitive)

• + Addedsass@1.79.3(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• - Removed@littlemissrobot/sass-functions@0.1.3(transitive)

• Updated@littlemissrobot/sass-functions@^1.0.0