@buildit/gravy - npm Package Compare versions

Comparing version 1.5.0 to 2.0.0

CHANGELOG.md

 # Changelog
+
 All notable changes to this project will be documented in this file.
@@ -7,4 +8,34 @@
 
+## [2.0.0] - 2018-01-21
+
+### Added
+
+- initialisation mixin `gravy-init`, must be triggered before being able to use anything
+- sensible text defaults mixin `gravy-text-defaults`
+- `$gravy` configuration map
+- unit tests using sass-true and mocha
+
+### Changed
+
+- documentation is now provided by SassDoc
+- upgraded stylelint and dependencies
+- integrated breakpoint and typi configuration into `$gravy` configuration map
+- renamed function `breakpoint` to `gravy-breakpoint`
+- renamed mixin `font` to `gravy-font`
+
+### Removed
+
+- modularscale-sass dependency
+- normalize-scss dependency
+- all vertical rhythm margins
+- headers classes
+- majority of element styles
+- helper classes `is-heading`, `is-secondary`, and `has-baseline-grid`
+- removed font sizes variables
+- removed `$text-max-width`
+
 ## [1.3.0] - 2017-07-28
+
 ### Added
+
 - added `CHANGELOG.md`
@@ -14,5 +45,7 @@ - added `!default` flag to several vars
 ### Changed
+
 - updated documentation regarding configuration
 
 ### Removed
+
 - removed anchor styling
@@ -19,0 +52,0 @@ - removed colours definitons

package.json

 {
   "name": "@buildit/gravy",
-  "version": "1.5.0",
+  "version": "2.0.0",
   "description": "SASS foundation library.",
@@ -14,3 +14,4 @@ "main": "README.md",
     "scss",
-    "foundation"
+    "foundation",
+    "typography"
   ],
@@ -23,3 +24,3 @@ "eyeglass": {
   },
-  "author": "Matteo Pescarin <[e-mail]>",
+  "author": "Matteo Pescarin",
   "license": "MIT",
@@ -30,22 +31,26 @@ "bugs": {
   "homepage": "https://github.com/buildit/gravy",
-  "contributors": [
-    "Matteo Pescarin <[e-mail]>"
-  ],
+  "contributors": [],
+  "engines": {
+    "node": ">=8.9.3"
+  },
   "dependencies": {
-    "modularscale-sass": "^3.0.3",
-    "normalize-scss": "^7.0.0",
-    "typi": "^3.1.1"
+    "typi": "^3.1.2"
   },
   "devDependencies": {
-    "node-sass": "^4.5.3",
-    "stylelint": "^7.11.0",
-    "stylelint-config-sass-guidelines": "^2.2.0",
-    "stylelint-order": "^0.5.0",
-    "stylelint-scss": "^1.5.2"
+    "mocha": "^4.1.0",
+    "node-sass": "^4.7.2",
+    "sass-true": "^3.0.2",
+    "sassdoc": "^2.5.0",
+    "stylelint": "^8.4.0",
+    "stylelint-config-sass-guidelines": "^4.1.0",
+    "stylelint-order": "^0.8.0",
+    "stylelint-scss": "^2.2.0"
   },
   "scripts": {
-    "test": "npm run stylelint && npm run sass",
+    "test": "mocha",
+    "compile": "npm run stylelint && npm run sass",
     "sass": "node-sass sass/gravy.scss dist/css/gravy.css",
-    "stylelint": "stylelint sass/**/*.scss"
+    "stylelint": "stylelint sass/**/*.scss",
+    "docs": "sassdoc sass/ -d docs/"
   }
 }

README.md

@@ -7,9 +7,14 @@ [![CircleCI](https://circleci.com/gh/buildit/gravy/tree/master.svg?style=svg)](https://circleci.com/gh/buildit/gravy/tree/master)
 
-**A:** Is a library that provides basic essential rules, normalisation, basic elements styles, and additional mixins and allows to create a starting point for a UI library.
+**A:** Is a library that provides basic essential functions and mixins to solve some basic requirements for any project.
 
-
 **Q:** Why Gravy?
 
-**A:** Because it gives flavour to what you have on your plate without much effort... What kind of question is this?
+**A:** Because it gives flavour to what you have on your plate without much effort... 
 
+**Q:** What does Gravy provide?
+
+**A:** _For now_, typographical enhancements (suggestions and feature requests are always welcome).
+
+---
+
 # Technical notes
@@ -21,4 +26,2 @@
 
-- [Normalize-scss](https://github.com/JohnAlbin/normalize-scss) as a SCSS module for Normalize.css .
-- [Modularscale-sass](https://github.com/modularscale/modularscale-sass) for typography following [Modular Scale](http://modularscale.com) principles.
 - [Typi](https://github.com/zellwk/typi) for responsive typography and vertical rhythm.
@@ -28,2 +31,8 @@
 
+Additional dependencies needs to be handled by your own project, you most likely want to have the following installed and configured before Gravy:
+
+- [Normalize-scss](https://github.com/JohnAlbin/normalize-scss) as a SCSS module for Normalize.css .
+- [Modularscale-sass](https://github.com/modularscale/modularscale-sass) for typography following [Modular Scale](http://modularscale.com) principles.
+
+
 ## Installation
@@ -37,20 +46,78 @@
 
-    @include "gravy";
+```scss
+@include "gravy";
+```
 
 Otherwise, if you don't want to customise anything, just include the whole path:
 
-    @include "node_modules/gravy/sass/gravy";
+```scss
+@include "node_modules/gravy/sass/gravy";
+```
 
-Once that's done, you can start configuring it by overriding the needed variables and maps.
+You can then configure it by creating the [Gravy configuration map](#Configuration).
 
+Once that's done, you need to call the initialisation mixin that will generate the necessary configuration maps and base CSS output:
+
+```scss
+@include gravy-init;
+```
+
 ## Configuration
 
-The configuration has been split in different section to make it more easy to follow.
+The configuration comes simply by setting the required sub-maps in the main `$gravy` map, you can set one or more of the following keys in you project, `gravy-init` will fill in the rest with the following default values.
 
-- **[Breakpoints](docs/breakpoints.md)**
-- **[Typography and Vertical Rhythm](docs/typography-and-vertical-rhythm.md)**
-- **[Headings](docs/headings.md)**
-- **[Mixins and Functions](docs/mixins-and-functions.md)**
-- **[Helpers](docs/helpers.md)**
+```scss
+$gravy: (
+  base-font-size: 16px,
+  base-line-height: 1.4,
+  breakpoints: (
+    small: 600px,
+    large: 1200px
+  ),
+  typefaces: (
+    primary: (
+      stack: ('Arial', sans-serif),
+      weights: (
+        regular: 'regular',
+        bold: 'bold'
+      )
+    )
+  ),
+  typi: (
+    base: (
+      null: (16px, 1.4),
+      small: (16px),
+      large: (19px)
+    )
+  )
+);
+```
 
+More technical documentation in HTML format can be found in the `docs/` folder.
+
+### Generated and reserved variables
+
+`gravy-init` will parse the `$gravy` config map, and generate some additional non-scoped variables that are going to be used by either the dependencies or some of the mixins available by the tool.
+
+- `$base-font-size`: handy variable for the size in pixels of the base font size.
+- `$base-line-height`: unitless variable for the size of the line height.
+- `$breakpoints`: will contain a list of named breakpoints. These will have to be used in the configuration map of `typi` that can be retrieved using the mixin `gravy-breakpoint($name)`.
+- `$typefaces`: will contain a list of named font faces, e.g. 'primary', 'headings', ...; you can later output the correct `font-family` and `font-weight` using the mixin `gravy-font($name, $weight: 'regular')` each font face contains the following keys: 
+  - `stack`: a map containing the list of font families to use.
+  - `weights`: a list of weights for the selected font, like 'regular', 'bold', ... .
+- `$typi`: the typi configuration map. Refer to [typi documentation](https://github.com/zellwk/typi/blob/master/README.md) for information on how this works. You'll be then able to use the mixin `typi($name)` to generate the needed `font-size` and `line-height` at different breakpoints.
+
+### Functions
+
+- `gravy-breakpoint($name)`: outputs the actual size given the name set in the `breakpoint` map (see [Generated and reserved variables](#Generated-and-reserved-variables) section).
+
+### Mixins
+
+- `gravy-init`: does the initialisation of all the needed functions, needs to be called after all the needed maps have been configured and before calling any other function or mixin.
+- `gravy-font($name)`: generates the `font-family` and `font-weight` based on the `typefaces` map (see [Generated and reserved variables](#Generated-and-reserved-variables) section).
+
+#### Modularscale and typi font sizes
+
+If you want to use to use [Modularscale](http://www.modularscale.com/), you can do so by installing `modularscale-sass` via npm, and configure it before calling `typi-init`. 
+
 ## Contribute & support
@@ -65,2 +132,1 @@
 **NOTE** Be sure to enable [stylelint](https://stylelint.io/) in your preferred IDE/Editor, or run `npm test` before pushing and opening a PR: any PR submitted that doesn't lint correctly will be rejected.
-

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Fixed alerts

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

231304

increased by880.64%

Dependency count

1

decreased by-66.67%

Number of package files

33

increased by32%

Lines of code

779

increased byInfinity%

Number of lines in readme file

128

increased by106.45%

Worsened metrics

Dev dependency count

8

increased by60%

Number of low license alerts

1

increased byInfinity%

Dependency changes

• - Removedmodularscale-sass@^3.0.3

• - Removednormalize-scss@^7.0.0

• - Removedmodularscale-sass@3.0.10(transitive)

• - Removednormalize-scss@7.0.1(transitive)

• Updatedtypi@^3.1.2