normandy-css
Advanced tools
Comparing version 2.0.1 to 3.0.0
@@ -6,6 +6,29 @@ # Change Log | ||
## v2.0 - 2018-21-06 | ||
## v3.0 - 21/11/2018 | ||
- Removed custom `map-add` tool (https://github.com/calidae/normandy-css/pull/31). Fixes https://github.com/calidae/normandy-css/issues/29. | ||
### Breaking changes | ||
- Added automatic tasks using Gulp (https://github.com/calidae/normandy-css/pull/32). | ||
- Remove width utilities ([#44](https://github.com/calidae/normandy-css/pull/44)). | ||
- Remove clearfix mixin ([#45](https://github.com/calidae/normandy-css/pull/45)). | ||
- Update spacing shortnames ([#47](https://github.com/calidae/normandy-css/pull/47)). | ||
- Add default value to the flex property ([#50](https://github.com/calidae/normandy-css/pull/50)). | ||
### New features | ||
- Brand new documentation! Visit https://calidae.github.io/normandy-css. | ||
- Add Responsive capabilities + spacing utilities ([#43](https://github.com/calidae/normandy-css/pull/43)). | ||
## v2.0 - 21/06/2018 | ||
### Breaking changes | ||
- Removed custom `map-add` tool ([#31](https://github.com/calidae/normandy-css/pull/31)). | ||
### New features | ||
- Added automatic tasks using Gulp ([#32](https://github.com/calidae/normandy-css/pull/32)). |
{ | ||
"name": "normandy-css", | ||
"version": "3.0.0", | ||
"description": "Normandy CSS boilerplate and guidelines", | ||
"license": "MIT", | ||
"version": "2.0.1", | ||
"main": "scss/main.scss", | ||
"scripts": { | ||
"start": "npm run dev", | ||
"dev": "gulp watch", | ||
"sass": "gulp sass", | ||
"lint": "gulp stylelint", | ||
"test": "npm run lint && npm run mocha", | ||
"mocha": "mocha --reporter min", | ||
"prepare": "npm test && gulp" | ||
}, | ||
"author": "Adrià Fontcuberta <adria@calidae.com> (http://fontcuberta.cat)", | ||
"contributors": [ | ||
"Xavier Pregona <xevops@gmail.com>", | ||
"Oriol Ferràndez Grau <oriol@ferrandez.cat> (https://www.ferrandez.cat)" | ||
], | ||
"keywords": [ | ||
"bem", | ||
"css", | ||
"itcss", | ||
"oocss", | ||
"sass", | ||
"scss", | ||
"bem", | ||
"itcss", | ||
"oocss", | ||
"smacss" | ||
@@ -35,14 +19,47 @@ ], | ||
}, | ||
"license": "MIT", | ||
"author": "Adrià Fontcuberta <afontcu@gmail.com> (http://fontcuberta.cat)", | ||
"contributors": [ | ||
"Xavier Pregona <xevops@gmail.com>", | ||
"Oriol Ferràndez Grau <oriol@ferrandez.cat> (https://www.ferrandez.cat)", | ||
"Marc Salat <marcs@calidae.com>", | ||
"Kilian Cabrera <kilian@calidae.com>" | ||
], | ||
"main": "scss/main.scss", | ||
"scripts": { | ||
"dev": "gulp watch", | ||
"docs:build": "vuepress build docs", | ||
"docs:dev": "vuepress dev docs", | ||
"docs:lint": "prettier --write \"**/*.{js,json,css,scss,vue,md}\"", | ||
"lint": "gulp stylelint", | ||
"mocha": "mocha --reporter min", | ||
"prepare": "npm test && gulp", | ||
"sass": "gulp sass", | ||
"start": "npm run dev", | ||
"test": "npm run lint && npm run mocha" | ||
}, | ||
"dependencies": { | ||
"sass-mq": "^5.0.0" | ||
}, | ||
"devDependencies": { | ||
"@vue/eslint-config-prettier": "^4.0.0", | ||
"babel-eslint": "^10.0.1", | ||
"eslint": "^5.8.0", | ||
"eslint-config-prettier": "^3.1.0", | ||
"eslint-plugin-vue": "^4.7.1", | ||
"gulp": "^3.9.1", | ||
"gulp-rename": "^1.3.0", | ||
"gulp-sass": "^4.0.1", | ||
"gulp-stylelint": "^7.0.0", | ||
"gulp-rename": "^1.4.0", | ||
"gulp-sass": "^4.0.2", | ||
"gulp-stylelint": "^8.0.0", | ||
"mocha": "^3.5.3", | ||
"sass": "^1.3.0", | ||
"sass-true": "^3.1.0", | ||
"stylelint": "^9.2.1", | ||
"stylelint-config-sass-guidelines": "^5.0.0", | ||
"stylelint-scss": "^3.0.0" | ||
"node-sass": "^4.10.0", | ||
"prettier": "^1.15.2", | ||
"sass": "^1.14.3", | ||
"sass-loader": "^7.1.0", | ||
"sass-true": "^4.0.0", | ||
"stylelint": "^9.8.0", | ||
"stylelint-config-sass-guidelines": "^5.2.0", | ||
"stylelint-scss": "^3.4.0", | ||
"vuepress": "^1.0.0-alpha.22" | ||
} | ||
} |
109
README.md
# Normandy CSS | ||
Normandy CSS és la metodologia per organitzar i estructurar el CSS | ||
dels projectes de Calidae. | ||
Normandy is a CSS boilerplate that gives you an initial structure for your CSS. | ||
També inclou un boilerplate en Sass (`.scss`) de la implementació d'aquests acords. | ||
It's build upon | ||
[ITCSS](https://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528), | ||
[BEM](http://getbem.com/naming/) and | ||
[OOCSS](https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/). | ||
Normandy is a customized version of | ||
[inuitcss](https://github.com/inuitcss/inuitcss). | ||
Està construït sobre els principis d'ITCSS, BEM i OOCSS. | ||
Consulta la metodologia i documentació a | ||
[Gitbook](https://afontcu.gitbooks.io/normandy). | ||
## Documentation | ||
To check out our Getting Started and References documentation, visit our [Github | ||
Pages](https://calidae.github.io/normandy-css/). | ||
## Instal·lació i configuració | ||
## Installation | ||
Per instal·lar-lo via npm: | ||
You can install Normandy from npm: | ||
@@ -23,82 +27,75 @@ ```shell | ||
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: | ||
Since Normandy is using Sass, you will need to add its core files to your own | ||
`main.scss`. | ||
We recommend a structure as follows, where you zip Normandy layers with your | ||
own: | ||
```scss | ||
@import "/node_modules/normandy-css/scss/1-Settings/main"; | ||
@import "/custom/path/to/my/scss/1-Settings/main"; | ||
@import "/my/path/to/scss/1-Settings/main"; | ||
@import "/node_modules/normandy-css/scss/2-Tools/main"; | ||
@import "/custom/path/to/my/scss/2-Tools/main"; | ||
@import "/my/path/to/scss/2-Tools/main"; | ||
@import "/node_modules/normandy-css/scss/3-Generic/main"; | ||
@import "/custom/path/to/my/scss/3-Generic/main"; | ||
@import "/my/path/to/scss/3-Generic/main"; | ||
@import "/node_modules/normandy-css/scss/4-Base/main"; | ||
@import "/custom/path/to/my/scss/4-Base/main"; | ||
@import "/my/path/to/scss/4-Base/main"; | ||
@import "/node_modules/normandy-css/scss/5-Objects/main"; | ||
@import "/custom/path/to/my/scss/5-Objects/main"; | ||
@import "/my/path/to/scss/5-Objects/main"; | ||
@import "/node_modules/normandy-css/scss/6-Components/main"; | ||
@import "/custom/path/to/my/scss/6-Components/main"; | ||
@import "/my/path/to/scss/6-Components/main"; | ||
@import "/node_modules/normandy-css/scss/7-Utilities/main"; | ||
@import "/custom/path/to/my/scss/7-Utilities/main"; | ||
@import "/my/path/to/scss/7-Utilities/main"; | ||
``` | ||
D'aquesta manera, les variables i classes pròpies sempre tindran preferència per | ||
sobre les de Normandy CSS. | ||
This way, you maintain the desired layer structure while allowing your values to | ||
override Normandy's. | ||
## FAQs | ||
## Ús | ||
### "I want to play with Normandy!" | ||
Normandy CSS treballa sobre unes variables bàsiques que permeten la configuració | ||
de tot el boilerplate. | ||
Great! There's an `output.css` file in the root directory of the project with | ||
the compiled version of the default values. Feel free to grab this file and add | ||
it to any Codepen, Fiddle or Codesandbox. | ||
A continuació es mostren les variables bàsiques i els seus valors per defecte, | ||
que es troben a `1-Settings/_settings.core.scss`: | ||
Bear in mind that you won't be able to benefit from Sass variables (obvs) and | ||
other goodies. | ||
```scss | ||
$global-baseline: 6px; | ||
Also, please notice that Normandy isn't intended to be used this way. You should | ||
customize its Settings to match your design guidelines. | ||
$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; | ||
### "I want to contribute" | ||
Lovely ❤️. We are open to any kind of input. Feel free to submit issues or PRs | ||
to the repository! | ||
First you'll need to install dependencies: | ||
```shell | ||
npm install | ||
``` | ||
### Configuració inicial | ||
Then, run the following script to compile Sass. This will lint on save and update the `output.css` file. | ||
É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. | ||
```shell | ||
npm start | ||
```` | ||
### Ús en el dia a dia | ||
Also remember to pass the linters and tests! | ||
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. | ||
```shell | ||
npm test | ||
```` | ||
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). | ||
Enjoy! |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
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
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
95923
45
1536
1
19
101
+ Addedsass-mq@^5.0.0
+ Addedsass-mq@5.0.1(transitive)