@littlemissrobot/sass-spacing
Advanced tools
@littlemissrobot/sass-spacing - npm Package Compare versions
Comparing version 2.0.0 to 3.0.0
| { | ||
| "name": "@littlemissrobot/sass-spacing", | ||
| "version": "2.0.0", | ||
| "description": "Little Miss Robot spacing setup for defining spacing variables", | ||
| "main": "index.js", | ||
| "version": "3.0.0", | ||
| "description": "Little Miss Robot spacing setup for defining spacing variables.", | ||
| "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'" | ||
| }, | ||
@@ -24,4 +23,4 @@ "repository": { | ||
| "files": [ | ||
| "scss", | ||
| "_index.scss" | ||
| "lib", | ||
| "index.scss" | ||
| ], | ||
@@ -31,18 +30,12 @@ "publishConfig": { | ||
| }, | ||
| "dependencies": { | ||
| "@littlemissrobot/sass-functions": "2.0.0", | ||
| "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-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" | ||
| } | ||
| } |
151
README.md
| # Little Miss Robot - Sass spacing | ||
| > This repository contains logic and functionality to define and insert | ||
| > consistent spacing throughout the UI. | ||
| > This package contains logic and functionality to define and insert consistent | ||
| > spacing throughout the UI. This package is part of a bigger package: | ||
| > "@littlemissrobot/sass-system", but can be used as a standalone package. | ||
@@ -12,15 +13,16 @@ This package does not contain or generate any CSS. It simply provides a system | ||
| 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 | ||
@@ -46,3 +48,2 @@ # As a dependency | ||
| $baseline: 8px, | ||
| $base-font-size: 16px | ||
| ); | ||
@@ -54,25 +55,2 @@ ``` | ||
| ## Concept | ||
| The main focus of this library is to create consistent spacing and visually | ||
| clear [verticaly rythm](https://zellwk.com/blog/why-vertical-rhythms/). | ||
| Spacing is one of the biggest influences in creating a distinguisable brand. Not | ||
| providing a consistent unit of measurement can lead to layout inconsistencies | ||
| between pages or other projects. | ||
| We recommend using multiples of 8, why? Because 8 is divisble by 2 and 4 and | ||
| becomes important when displays multiply pixel sizes due to higher resolutions. | ||
| For example: a resolution of 1.5 would multiply 5px baseline and result in half | ||
| a pixel offset, which might result in an edge that appears blurred. Half pixels | ||
| don't happen on a 8px baseline grid. | ||
| Spacing and typography influence each other and should be used together. Mainly | ||
| the line height place a big part in the spacing system. This is due to the fact | ||
| that line height determines how much spacing there is between each line of | ||
| typography and should be consistent with the spacing baseline. We provide no | ||
| functions to control this because line height really depends on the font-family | ||
| used. We don't want to enforce these baseline rules onto the line-height, but we | ||
| recommend to respect them. | ||
| ## Configuration | ||
@@ -83,3 +61,2 @@ | ||
| $baseline: 8px, | ||
| $base-font-size: 16px, | ||
| ); | ||
@@ -90,5 +67,5 @@ ``` | ||
| * **unit**: px | ||
| * **default**: 8px | ||
| * **required**: true | ||
| - **unit**: px | ||
| - **default**: 8px | ||
| - **required**: true | ||
@@ -98,45 +75,13 @@ The `$baseline` is the spacing baseline for determining a scale. We recommend | ||
| ### $base-font-size | ||
| * **unit**: px | ||
| * **default**: 16px | ||
| * **required**: true | ||
| The `$base-font-size` is the font-size placed on the root element. This is used | ||
| the create different steps based on a ratio and determine the ratio in which the | ||
| line-heights should get automagically calculated. | ||
| ## Functions | ||
| ### rem($value, $is-multiple-of-baseline) | ||
| ### step($value) | ||
| Convert a pixel value and to a rem value. This conversion based on the | ||
| $base-font-size determined in the configuration. This makes sure that the | ||
| converted rem value is a multiple of the defined $baseline in the config. | ||
| Parameters: | ||
| * **$value**: The pixel value to convert | ||
| * **$is-multiple-of-baseline**: Default to true to make sure every value is | ||
| aligned to the $baseline, pass false to avoid have this validation. | ||
| ```scss | ||
| @use "@littlemissrobot/sass-spacing" as _spacing with ( | ||
| $base-font-size: 16px | ||
| ); | ||
| _spacing.rem(16px); // 1rem | ||
| _spacing.rem(32px); // 2rem | ||
| ``` | ||
| #### step($value, $result-unit) | ||
| Calculate a step of the `$baseline`, calculated in a linear pattern. By default | ||
| this will return a number in `rem`. | ||
| this will return a number in `rem`. The value passed must be a number without a | ||
| unit. | ||
| Parameters: | ||
| * **$value**: The step of the baseline | ||
| * **$result-unit**: The unit in which to return the value in. This can either be | ||
| px or rem. By default this would be rem and we recommend using rem. | ||
| - **$value** (number): The step of the baseline | ||
@@ -146,3 +91,2 @@ ```scss | ||
| $baseline: 8px, | ||
| $base-font-size: 16px, | ||
| ); | ||
@@ -152,57 +96,2 @@ | ||
| _spacing.step(2); // 1rem | ||
| _spacing.step(1, "px"); // 8px | ||
| _spacing.step(2, "px"); // 16px | ||
| ``` | ||
| #### snap($value) | ||
| Calculate the closest step to the passed value, based on the `$baseline`. | ||
| Returns a number in the same unit as the passed value. | ||
| Parameters: | ||
| * **$value**: The number in pixels or rem used for snapping to the grid. | ||
| ```scss | ||
| @use "@littlemissrobot/sass-spacing" as _spacing with ( | ||
| $baseline: 8px, | ||
| $base-font-size: 16px, | ||
| ); | ||
| _spacing.snap(20px); // 24px | ||
| _spacing.snap(19px); // 16px | ||
| _spacing.snap(21px); // 24px | ||
| _spacing.snap(32px); // 32px | ||
| _spacing.snap(31px); // 32px | ||
| _spacing.snap(1rem); // 1rem | ||
| _spacing.snap(1.2rem); // 1rem | ||
| _spacing.snap(1.3rem); // 1.5rem | ||
| ``` | ||
| ### Mixins | ||
| Calculate the root font-size, based on the base font-size of the system and the | ||
| default browser font-size. Return a font-size in percentage. Should always be | ||
| placed on the root element! | ||
| Parameters: | ||
| ```scss | ||
| @use "@littlemissrobot/sass-spacing" as _spacing with ( | ||
| $base-font-size: 16px, | ||
| ); | ||
| :root { | ||
| @include _spacing.root(); // font-size: 100%; | ||
| } | ||
| ``` | ||
| ```scss | ||
| @use "@littlemissrobot/sass-spacing" as _spacing with ( | ||
| $base-font-size: 10px, | ||
| ); | ||
| :root { | ||
| @include _spacing.root(); // font-size: 62.5%; | ||
| } | ||
| ``` |
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
- Dev dependency count
- decreased by-60%
4
Worsened metrics
- Total package byte prevSize
- decreased by-40.92%
11279
- Number of package files
- decreased by-46.15%
7
- Number of lines in readme file
- decreased by-55.22%
90
Dependency changes
+ Added@littlemissrobot/sass-functions@2.0.0(transitive)
+ Addedanymatch@3.1.3(transitive)
+ Addedbinary-extensions@2.3.0(transitive)
+ Addedbraces@3.0.3(transitive)
+ Addedchokidar@3.6.0(transitive)
+ Addedfill-range@7.1.1(transitive)
+ Addedfsevents@2.3.3(transitive)
+ Addedglob-parent@5.1.2(transitive)
+ Addedis-binary-path@2.1.0(transitive)
+ Addedis-extglob@2.1.1(transitive)
+ Addedis-glob@4.0.3(transitive)
+ Addedis-number@7.0.0(transitive)
+ Addednormalize-path@3.0.0(transitive)
+ Addedpicomatch@2.3.1(transitive)
+ Addedreaddirp@3.6.0(transitive)
+ Addedsass@1.32.2(transitive)
+ Addedto-regex-range@5.0.1(transitive)
- Removed@littlemissrobot/sass-functions@1.1.2(transitive)
- Removedchokidar@4.0.0(transitive)
- Removedimmutable@4.3.7(transitive)
- Removedreaddirp@4.0.1(transitive)
- Removedsass@1.79.3(transitive)
- Removedsource-map-js@1.2.1(transitive)
Updatedsass@1.32.2