Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@littlemissrobot/sass-mixins
Advanced tools
@littlemissrobot/sass-mixins - npm Package Compare versions
Comparing version 1.1.2 to 2.0.0
| { | ||
| "name": "@littlemissrobot/sass-mixins", | ||
| "version": "1.1.2", | ||
| "description": "Little Miss Robot sass mixins library that helps execute reusable and complex tasks", | ||
| "main": "index.js", | ||
| "version": "2.0.0", | ||
| "description": "Little Miss Robot sass mixins library that helps execute reusable and complex tasks.", | ||
| "main": "index.scss", | ||
| "scripts": { | ||
| "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" | ||
| "start": "sass tests.scss:dist/tests.css --watch --load-path=node_modules", | ||
| "lint": "stylelint './lib/**/*.scss'" | ||
| }, | ||
@@ -23,4 +22,4 @@ "repository": { | ||
| "files": [ | ||
| "scss", | ||
| "_index.scss" | ||
| "lib", | ||
| "index.scss" | ||
| ], | ||
@@ -30,19 +29,12 @@ "publishConfig": { | ||
| }, | ||
| "dependencies": { | ||
| "@littlemissrobot/sass-functions": "1.1.2", | ||
| "sass": "1.32.2" | ||
| }, | ||
| "devDependencies": { | ||
| "@littlemissrobot/stylelint-config": "^1.1.0", | ||
| "browser-sync": "^2.26.12", | ||
| "del": "^5.1.0", | ||
| "gulp": "^4.0.2", | ||
| "gulp-postcss": "^8.0.0", | ||
| "gulp-sass": "^4.1.0", | ||
| "gulp-sourcemaps": "^2.6.5", | ||
| "gulp-stylelint": "^13.0.0", | ||
| "postcss-preset-env": "^6.7.0", | ||
| "postcss-scss": "^2.1.1" | ||
| }, | ||
| "dependencies": { | ||
| "@littlemissrobot/sass-breakpoints": "^1.1.2", | ||
| "@littlemissrobot/sass-functions": "^1.1.2", | ||
| "sass": "^1.26.10" | ||
| "@commitlint/cli": "11.0.0", | ||
| "@commitlint/config-conventional": "11.0.0", | ||
| "@littlemissrobot/stylelint-config": "2.0.0", | ||
| "husky": "4.3.7" | ||
| } | ||
| } |
284
README.md
| # Little Miss Robot - Sass mixins | ||
| > 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 | ||
| > This package 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. | ||
@@ -13,15 +13,16 @@ | ||
| 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. | ||
| - **Make use of [Dart Sass](https://sass-lang.com/dart-sass):** | ||
| 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. | ||
| 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. | ||
| 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. | ||
| - **Generate only what you need:** | ||
| This library generates classes based on your configuration. The larger the | ||
| configuration, the more css, the larger the CSS file. DO NOT enable all the | ||
| config options, but only the ones you actually use and need! | ||
| ## Install | ||
| ```sh | ||
@@ -36,4 +37,2 @@ # As a dependency | ||
| ### Through the main entry point | ||
| 1. Import the library from the node_modules folder: | ||
@@ -48,60 +47,9 @@ | ||
| ```scss | ||
| ul { | ||
| @include _mixins.reset_list(); | ||
| } | ||
| @include _mixins.load-font(...); | ||
| ``` | ||
| 3. That's (mind-blowingly) it! The mixins are seperated with internal | ||
| namespaces, where mixins related to the `reset` category are namespaced with | ||
| `_mixins.reset_[MIXIN-NAME]` or `typography` would be | ||
| `_mixins.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 | ||
| ### Font | ||
| ### load-font($name, $url, $font-weight, $font-style, $font-display) | ||
| These mixins are namespace with **font_**: | ||
| ```scss | ||
| @use "@littlemissrobot/sass-mixins" as _mixins; | ||
| @include _mixins.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 | ||
@@ -112,193 +60,39 @@ the font should have the same name. | ||
| * **$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 | ||
| - **$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 | ||
| - **$font-display** (optional): The way the font should be displayed when loaded | ||
| ```scss | ||
| @use "@littlemissrobot/sass-mixins/font" as _font; | ||
| @include _font.load("Open Sans", "./assets/fonts/open-sans", "300", normal); | ||
| ``` | ||
| ### Other | ||
| These mixins are namespace with **other_**: | ||
| ```scss | ||
| @use "@littlemissrobot/sass-mixins" as _mixins; | ||
| @include _mixins.other_clearfix(); | ||
| @include _mixins.load-font( | ||
| "Open Sans", | ||
| "./assets/fonts/open-sans", | ||
| "300", | ||
| normal, | ||
| swap | ||
| ); | ||
| ``` | ||
| Or can be included through the partial: | ||
| ### responsive-props($props, $responsive, $min, $max) | ||
| ```scss | ||
| @use "@littlemissrobot/sass-mixins/other" as _other; | ||
| Create a CSS property or properties that are responsive by defining a minimum | ||
| and maximum value. For example: responsive font-sizes. | ||
| @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 _mixins; | ||
| @include _mixins.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 | ||
| - **$props**: the list of props to make responsive. | ||
| - **$responsive** (number, vw): the responsive value in vw. | ||
| - **$min** (number, px): the fixed minimum value in pixels where the responsive | ||
| value is not allowed to go under. If passed as px, then it is converted to | ||
| rem. | ||
| - **$max** (number, px): the fixed maximum value in pixels where the responsive | ||
| value is not allowed to go above. If passed as px, then it is converted to | ||
| rem. | ||
| ```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 _mixins; | ||
| @include _mixins.reset_list(); | ||
| @include _mixins.responsive-props(margin-top, 2vw, 24px, 48px); | ||
| @include _mixins.responsive-props((margin-top, margin-left), 2vw, 24px, 48px); | ||
| ``` | ||
| 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 _mixins; | ||
| @include _mixins.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 _mixins; | ||
| @include _mixins.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
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Dependency count
- decreased by-33.33%
2
- Dev dependency count
- decreased by-60%
4
Worsened metrics
- Total package byte prevSize
- decreased by-62.81%
6626
- Number of package files
- decreased by-58.82%
7
- Number of lines in readme file
- decreased by-68.44%
95
Dependency changes
+ Addedanymatch@3.1.3(transitive)
+ Addedbinary-extensions@2.3.0(transitive)
+ Addedchokidar@3.6.0(transitive)
+ Addedfsevents@2.3.3(transitive)
+ Addedglob-parent@5.1.2(transitive)
+ Addedis-binary-path@2.1.0(transitive)
+ Addednormalize-path@3.0.0(transitive)
+ Addedreaddirp@3.6.0(transitive)
+ Addedsass@1.32.2(transitive)
- Removed@littlemissrobot/sass-breakpoints@1.1.2(transitive)
- Removed@littlemissrobot/sass-spacing@2.0.0(transitive)
- Removed@parcel/watcher@2.5.0(transitive)
- Removed@parcel/watcher-android-arm64@2.5.0(transitive)
- Removed@parcel/watcher-darwin-arm64@2.5.0(transitive)
- Removed@parcel/watcher-darwin-x64@2.5.0(transitive)
- Removed@parcel/watcher-freebsd-x64@2.5.0(transitive)
- Removed@parcel/watcher-linux-arm-glibc@2.5.0(transitive)
- Removed@parcel/watcher-linux-arm-musl@2.5.0(transitive)
- Removed@parcel/watcher-linux-arm64-glibc@2.5.0(transitive)
- Removed@parcel/watcher-linux-arm64-musl@2.5.0(transitive)
- Removed@parcel/watcher-linux-x64-glibc@2.5.0(transitive)
- Removed@parcel/watcher-linux-x64-musl@2.5.0(transitive)
- Removed@parcel/watcher-win32-arm64@2.5.0(transitive)
- Removed@parcel/watcher-win32-ia32@2.5.0(transitive)
- Removed@parcel/watcher-win32-x64@2.5.0(transitive)
- Removedchokidar@4.0.1(transitive)
- Removeddetect-libc@1.0.3(transitive)
- Removedimmutable@4.3.7(transitive)
- Removedmicromatch@4.0.8(transitive)
- Removednode-addon-api@7.1.1(transitive)
- Removedreaddirp@4.0.2(transitive)
- Removedsass@1.80.6(transitive)
- Removedsource-map-js@1.2.1(transitive)
Updatedsass@1.32.2