Gestors de dependències

Pots utilitzar la maqueta corporativa a través d'un gestor de dependències, per exemple npm, yarn o composer. En aquesta documentació s'explica com incorporar la maqueta corporativa com una dependència al teu projecte amb npm.

Requisits previs per treballar amb npm i sass

1. Instalar Node.js i npm: guía
2. Instalar SASS/SCSS (OPCIONAL):

   npm install -g sass

Afegir la maqueta com a dependència al projecte

Pots instalarla com a dependència del teu projecte amb la comanda:

npm install git+https://codifont.diba.cat/mco/mco.git

o editant el fitxer package.json del teu projecte:

"dependencies": {"diba-maqueta": "git+https://codifont.diba.cat/mco/mco.git"}

Utilitza-la incorporant els fitxes CSS/JS al teu projecte

Pots incorporar els fitxers que t'interessin de la maqueta al teu projecte afegint un script al teu fitxer package.json. Dins de la carpeta assets/dist trobaràs tots els fitxers preparats, compilats i minimitzats per ser utilitzats a producció.

{
  "copy:assets": "cp -r node_modules/diba-maqueta/v4/assets/dist public/assets/ && cp -r node_modules/diba-maqueta/v4/assets/fonts public/assets/",
  "postinstall": "npm run copy:assets",
  "update-deps": "npm update && npm run copy:assets"
}

Així cada cop que facis un npm run update-deps s'actualitzaran els fitxers del repositori si hi ha canvis a la maqueta, i conservaràs una versió no actualitzada mentre no facis un update-deps o un npm install.

Al final el teu fitxer package.json podria de tenir un aspecte similar a això:

{
  "name": "projecte-html",
  "version": "1.0.0",
  "author": "Diputació de Barcelona",
  "dependencies": {
    "diba-maqueta": "git+https://codifont.diba.cat/mco/mco.git"
  },
  "scripts": {
    "copy:assets": "cp -r node_modules/diba-maqueta/v4/assets/dist public/assets/ && cp -r node_modules/diba-maqueta/v4/assets/fonts public/assets/",
    "postinstall": "npm run copy:assets",
    "update-deps": "npm update && npm run copy:assets"
  }
}

Nota: tot això només és orientatiu, adapta-ho a les necessitats del teu projecte.

Utilitzar-la important en el teu JS/SCSS

Pots incorporar la maqueta al teu projecte important els fitxers JS i SCSS en els fitxers JS/SCSS del teu projecte:

// Importar el CSS en el teu fitxer SCSS
@import "~diba-maqueta/v4/assets/dist/diba-maqueta.min.css";

// Importar el JS
import 'diba-maqueta/v4/assets/dist/diba-maqueta.min.js';

Si el teu projecte no sap resoldre mòduls de node_moules pots utilitzar la ruta completa, per exemple import '../../node_modules/diba-maqueta/v4/assets/dist/diba-maqueta.min.js', i posteriorment compilar-ho amb la resta dels teus fitxers SCSS/JS:

npm run build
sass assets/css/estils.scss assets/css/estils.min.css --style=compressed --quiet

Aquest sistema te l'avantatge que pots afegir o treure components de la maqueta, pots utilitzar les versións de debug no minimitzades i no estas restringit a les compilacions que s'han fet al directori assets/dist.