normandy-css - npm Package Compare versions

Comparing version 0.1.0 to 1.0.0

package.json

 {
   "name": "normandy-css",
-  "version": "0.1.0",
   "description": "Normandy CSS boilerplate and guidelines",
+  "license": "MIT",
+  "version": "1.0.0",
   "main": "scss/main.scss",
   "scripts": {
-    "prepublish": "npm run sass && npm run test",
-    "sass": "sass scss/main.scss output.css --sourcemap=none",
+    "prepare": "npm run sass && npm run test",
+    "sass": "sass scss/main.scss output.css",
     "lint": "stylelint scss/**/*.scss --syntax scss",
@@ -13,5 +14,11 @@ "mocha": "mocha --reporter min",
   },
+  "author": "Adrià Fontcuberta <[e-mail]> (http://fontcuberta.cat)",
+  "contributors": [
+    "Xavier Pregona <[e-mail]>",
+    "Oriol Ferràndez Grau <[e-mail]> (https://www.ferrandez.cat)"
+  ],
   "keywords": [
     "css",
     "sass",
+    "scss",
     "bem",
@@ -22,19 +29,14 @@ "itcss",
   ],
-  "homepage": "https://normandy.io",
-  "author": "Adrià Fontcuberta <[e-mail]>",
-  "contributors": [
-    "Xavier Pregona <[e-mail]>",
-    "Oriol Ferràndez Grau<[e-mail]> (https://www.ferrandez.cat)"
-  ],
-  "license": "MIT",
   "homepage": "https://github.com/calidae/normandy-css",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/calidae/normandy-css.git"
+  },
   "devDependencies": {
-    "mocha": "^3.3.0",
-    "sass-true": "^2.2.2",
-    "stylelint": "^7.10.1",
-    "stylelint-config-sass-guidelines": "^2.1.0"
-  },
-  "dependencies": {
-    "sass-mq": "^3.3.2"
+    "mocha": "^3.5.3",
+    "sass-true": "^3.1.0",
+    "stylelint": "^9.2.0",
+    "stylelint-config-sass-guidelines": "^5.0.0",
+    "stylelint-scss": "^3.0.0"
   }
 }

README.md

@@ -1,32 +0,103 @@
-# Normandy-css
+# Normandy CSS
 
-Normandy CSS és una metodologia per organitzar i desenvolupar el CSS
+Normandy CSS és la metodologia per organitzar i estructurar el CSS
 dels projectes de Calidae.
 
-També inclou un boilerplate en Sass de la implementació d'aquests acords.
+També inclou un boilerplate en Sass (`.scss`) de la implementació d'aquests acords.
 
 Està construït sobre els principis d'ITCSS, BEM i OOCSS.
 
-Consulta la metodologia i documentació a [Gitbook](https://afontcu.gitbooks.io/normandy).
+Consulta la metodologia i documentació a
+[Gitbook](https://afontcu.gitbooks.io/normandy).
 
-## Ús
 
-Normandy CSS és fàcilment instal·lable desde els repositoris de paquets NPM.
 
+## Instal·lació i configuració
+
+Per instal·lar-lo via npm:
+
+```shell
+npm install --save-dev normandy-css
 ```
-$ npm install normandy-css
-```
 
-Desprès caldrà que feu els imports en el fitxer principal de sass del vostre projecte, per tal de poder utilitzar les 7 capes de css i afegir els @import del vostre codi personalitzat just després de cada capa.
+L'únic pas necessari per afegir Normandy CSS al teu projecte és importar el
+`main.scss` de cada capa i intercalar-hi els que hagis creat tu:
 
-```
-@charset "UTF-8";
+```scss
 @import "/node_modules/normandy-css/scss/1-Settings/main";
+@import "/custom/path/to/my/scss/1-Settings/main";
+
 @import "/node_modules/normandy-css/scss/2-Tools/main";
+@import "/custom/path/to/my/scss/2-Tools/main";
+
 @import "/node_modules/normandy-css/scss/3-Generic/main";
+@import "/custom/path/to/my/scss/3-Generic/main";
+
 @import "/node_modules/normandy-css/scss/4-Base/main";
+@import "/custom/path/to/my/scss/4-Base/main";
+
 @import "/node_modules/normandy-css/scss/5-Objects/main";
+@import "/custom/path/to/my/scss/5-Objects/main";
+
 @import "/node_modules/normandy-css/scss/6-Components/main";
+@import "/custom/path/to/my/scss/6-Components/main";
+
 @import "/node_modules/normandy-css/scss/7-Utilities/main";
+@import "/custom/path/to/my/scss/7-Utilities/main";
+```
 
+D'aquesta manera, les variables i classes pròpies sempre tindran preferència per
+sobre les de Normandy CSS. 
+
+
+
+## Ús
+
+Normandy CSS treballa sobre unes variables bàsiques que permeten la configuració
+de tot el boilerplate.
+
+A continuació es mostren les variables bàsiques i els seus valors per defecte,
+que es troben a `1-Settings/_settings.core.scss`:
+
+```scss
+$global-baseline: 6px;
+
+$global-spacing-unit-tiny:   6px;
+$global-spacing-unit-small: 12px;
+$global-spacing-unit:       24px;
+$global-spacing-unit-large: 48px;
+$global-spacing-unit-huge:  96px;
+
+$global-font-size:   16px;
+$global-line-height: 24px;
 ```
+
+### Configuració inicial
+
+És important que la configuració d'aquestes variables es faci a l'inici del
+projecte, ja que posteriors modificacions tindran efectes imprevisibles en 
+cascada. Cal tenir en compte que modificar els valors per defecte implicarà,
+per exemple, canvis en els atributs de les utilitats d'espaiat així com les
+de font-size.
+
+
+### Ús en el dia a dia
+
+Totes les variables són públiques, però les variables `$global-spacing-unit...`
+són les que ens resulten útils en el dia a dia.
+
+Imaginem la situació on hem de definir un gap de CSS Grid proporcional a les
+variables d'espaiat amb l'objectiu d'aconseguir un
+[vertical rythm](https://zellwk.com/blog/why-vertical-rhythms/) consistent:
+
+```scss
+.c-component__grid {
+  display: grid;
+  grid-gap: $global-spacing-unit-small;
+}
+```
+
+La convenció és la següent: totes les variables que comencin per `$global-`
+estan pensades per ser utilitzades en qualsevol capa de Normandy CSS. Així, les
+variables que definim a la resta de fitxers de 1-Settings haurien de seguir
+aquesta mateixa convenció, amb l'excepció dels colors (on és redundant).

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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 repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

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

90395

increased by4.21%

Dependency count

0

decreased by-100%

Number of package files

39

increased by8.33%

Lines of code

1795

increased by10.06%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

104

increased by215.15%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

5

increased by25%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedsass-mq@^3.3.2

• - Removedsass-mq@3.3.2(transitive)