Maqueta corporativa v4

Maqueta corporativa de la Diputació de Barcelona v4 basada en Boostrap 5. La maqueta utilitza CSS i JS propis que s'han creat compilant el SASS de bootstrap definint les variables de color, tipografia, icones i altres classes i components addicionals segons les especificacions de la maqueta de la Diputació de Barcelona.

L'objectiu és facilitar la creació de noves pàgines web de la Diputació de Barcelona, no haver de sobre-escriure els valors definits per Bootstrap per defecte i mantenir els components de forma centralitzada.

La maqueta gràfica inclou:

Bootstrap 5 compilat amb les variables adaptades a les especificacions de la Diputació de Barcelona
Typografia web: DiBa
Fontawesome 6 pro (solid, regular i brands)
Pictogrames de la Diputació de Barcelona
Útils i components de la maqueta gràfica
Missatge de cookies i llibreria Javascript per gestionar l'acceptació

Com començar

Exemple d'HTML mínim amb maqueta corporativa i icones:

<!doctype html>
<html lang="ca">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Diputació de Barcelona</title>
        <link rel="stylesheet" type="text/css" href="https://maqueta.diba.cat/v4/assets/dist/diba-maqueta.min.css" crossorigin="anonymous">
        <link rel="icon" href="https://maqueta.diba.cat/v4/assets/dist/favicon.ico" crossorigin="anonymous">
        <meta name="theme-color" content="#992A38">
        <meta name="google-site-verification" content="eMMO_UMLIrFyD0LPZL5__ck81D7FQr0tTzbrEExOGlE">
    </head>
    <body>
        <!-- HTML del projecte -->
        <script src="https://maqueta.diba.cat/v4/assets/dist/diba-maqueta.min.js" crossorigin="anonymous"></script>
        <script src="https://maqueta.diba.cat/v4/assets/dist/diba-icons.min.js" defer crossorigin="anonymous"></script>
    </body>
</html>

Recursos disponibles

Si no necessites tots els components de la maqueta pots utilitzar altres compilacions amb menys funcionalitats. Per exemple, pots utilitzar la compilació de Bootstrap diba sense estils de layout o pots excloure les icones si no les fas servir.

Nom	Compilació	Fitxers	Ús
Maqueta diba	Bootstrap DiBa font Components diba Tooltips Layout styles	CSS: `https://maqueta.diba.cat/v4/dist/diba-maqueta.min.css` + JS: `https://maqueta.diba.cat/v4/dist/diba-maqueta.min.js`	Desenvolupament utilitzant un layout corporatiu. Calen els dos fitxers (CSS+JS).
Bootstrap diba	Bootstrap DiBa font Components diba	CSS: `https://maqueta.diba.cat/v4/dist/diba-bootstrap.css` + JS: `https://maqueta.diba.cat/v4/dist/diba-bootstrap.js`	Producte ja existent on cal només el CSS/JS de Bootstrap corporatius. Calen els dos fitxers (CSS+JS).
Icones diba	Fontawesome: solid, regular i brands	CSS: `https://maqueta.diba.cat/v4/dist/diba-icons.css` o JS: `https://maqueta.diba.cat/v4/dist/diba-icons.js`	Carrega les icones preferentment amb JS i la propietat "defer" per no bloquejar el renderitzat, opcionalment pots utilitzar la versió CSS. En cap cas incloguis les dues a la teva web (o JS o CSS). Cal un sol fitxers (CSS o JS).

Nota: Carrega només el que calgui. Maqueta diba i Bootstrap diba són excloents; i les icones en versió JS o CSS també són excloents.

Maqueta corporativa i gestors de dependències

Pots utilitzar la maqueta corporativa a través d'un gestor de dependències. Això et permetrà mantenir la maqueta actualitzada i alhora ser independent de rutes externes, a més de poder utilitzar els seus components directament de forma més granular.

Consulta l'apartat d'integracions per a veure exemples d'integració amb Symfony, Drupal o altres projectes genèrics.

Variables de compilació

Com a referència s'ha compilat la maqueta Bootstrap 5 definint les següents variables:

abstracts/_variables.scss

// Fonts
$font-family: "DiBa", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$letter-spacing: 0.45px;
$font-size-base: 0.9375rem;

// Colors corporatius.
$color-diba: #9D2235;
$color-gris-clar: #fcfcfc; // Dropdown background
$color-gris-mig: #f7f7f7; // Fons
$color-gris-fosc: #dadada; // Borders

// Colors dels entorns
$color-dev: #FEBF0F;
$color-pre: #4CAD50;

// Colors del text, títols i menús.
$color-text: #333333; // Cos
$color-text-dark: #000000; // Menú principal i títols
$color-text-light: #6e777f; // Menú secundari i captacions

// Colors temàtics
$temes:
  1 #E72362,
  2 #89C14A,
  3 #F34438,
  4 #FE9603,
  5 #2594F2,
  6 #FEBF0F,
  7 #009486,
  8 #00BAD2,
  9 #922A6C,
  10 #4CAD50,
  11 #775549,
  12 #4051B3,
  13 #003676,
  14 #a03022,
  15 #c4629c,
  16 #E71D73,
  17 #1361A8;

// Mides de text
$header-text-size: 0.85rem;
$footer-text-size: 0.85rem;

// Mides de logo, header = logo-md
$logos:
  xxs 20px,
  xs 30px,
  sm 40px,
  md 50px,
  lg 80px,
  xl 100px,
  xxl 150px;

Bootstrap overrides

// Bootstrap variables personalitzades diba.
$font-family-base: variables.$font-family,
$font-size-base: variables.$font-size-base,
$primary: variables.$color-diba,
$dropdown-border-radius: 0,
$dropdown-bg: variables.$color-gris-clar,
$dropdown-link-active-color: variables.$color-diba,
$dropdown-link-hover-color: variables.$color-text-dark,
$dropdown-link-active-bg: variables.$color-gris-clar,
$dropdown-border-width: 0,
$dropdown-item-padding-y: .5rem,
$dropdown-header-padding-y: 0,
$carousel-indicator-height: 5px,
$navbar-toggler-border-radius: 0,
$navbar-toggler-focus-width: 0,
$enable-negative-margins: true,
$breadcrumb-active-color: variables.$color-text-light,
$breadcrumb-divider-color: variables.$color-text-light,
$h6-font-size: 1.1rem,
$accordion-button-active-bg: variables.$color-text-dark,
$accordion-button-active-color: variables.$color-gris-clar

Llibreries i dependències

Recorda que totes les llibreries que utilitzis cal utilitzar un gestor de dependencies, sigui yarn o npm si són llibreries javascript o altres gestors com composer, maven, gradle o equivalents.

Aquesta maqueta pot utilitzar-se declarant-la com una dependència més, tal com fan les integracions per a Symfony o Drupal que teniu d'exemple; o les llibreries javascript utilitzades en aquesta pàgina de demostració que utilitzen npm.