Maqueta corporativa v3

Maqueta corporativa de la Diputació de Barcelona v3 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
Bootstrap icons
Icones 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:

<!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://use.typekit.net/lbm3kny.css">
        <link rel="stylesheet" type="text/css" href="https://maqueta.diba.cat/v3/assets/css/diba-maqueta-icons.css">
        <link rel="icon" href="https://maqueta.diba.cat/v3/assets/img/favicon.ico">
        <meta name="theme-color" content="#992A38">
        <meta name="google-site-verification" content="eMMO_UMLIrFyD0LPZL5__ck81D7FQr0tTzbrEExOGlE">
    </head>
    <body>
        <h1>Hola, diba!</h1>
        <script src="https://maqueta.diba.cat/v3/assets/js/diba-maqueta.js"></script>
    </body>
</html>

Altres versions

Si no necessites tots els components de la maqueta pots utilitzar altres compilacions amb menys funcionalitats. Per exemple, pots utilitzar la compilació de Bootstrap 5 sense icones.

Nom	Compilació	CSS	Ús
Maqueta diba amb icones	Diba Bootstrap icons + diba layout styles	https://maqueta.diba.cat/v3/assets/css/diba-maqueta-icons.css	Maqueta completa. Recomanat si fas servir el nostre layout i icones.
Maqueta diba	Diba Bootstrap + diba layout styles	https://maqueta.diba.cat/v3/assets/css/diba-maqueta.css	Maqueta sense icones. Recomanat si fas servir el nostre layout i no necessites icones o les inclous al projecte per separat o utilitzes una altra llibreria.
Bootstrap diba amb icones	Diba Bootstrap icons = Bootstrap + utils + components diba + icons	https://maqueta.diba.cat/v3/assets/css/diba-bootstrap-icons.css	Bootstrap adaptat corporatiu amb icones. Recomanat si fas servir icones però no el nostre layout.
Bootstrap diba	Diba Bootstrap = Bootstrap + utils + components diba	https://maqueta.diba.cat/v3/assets/css/diba-bootstrap.css	Bootstrap adaptat corporatiu. Recomanat si no fas servir icones ni el nostre layout, o si simplement necessites reemplaçar les CSSs d'un Bootstrap estàndard per un de corporatiu amb els nostres colors i variables.

Variables de compilació

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

abstracts/_variables.scss

// Font family corporative.
$font-stack: "neue-haas-grotesk-display", sans-serif;
$letter-spacing: 0.45px;
$font-weight: 500;
$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;

abstracts/_colors.scss

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

// 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;

Bootstrap overrides

// Bootstrap variables personalitzades diba.
$primary:                      $color-diba;
$dropdown-border-radius:       0;
$dropdown-bg:                  $color-gris-clar;
$dropdown-link-active-color:   $color-diba;
$dropdown-link-active-bg:      $color-gris-mig;
$dropdown-link-hover-color:    $color-text-dark;
$dropdown-link-hover-bg:       $color-gris-mig;
$dropdown-border-width:        0;
$dropdown-item-padding-y:      15px;
$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:      $color-text-light;
$breadcrumb-divider-color:     $color-text-light;