Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

normandy-css

Package Overview
Dependencies
Maintainers
2
Versions
8
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

normandy-css - npm Package Compare versions

Comparing version 2.0.1 to 3.0.0

.eslintrc.js

29

CHANGELOG.md

@@ -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)).

73

package.json
{
"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"
}
}
# 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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc