DOCSEARCHbyAlgolia
Submit Docs

Bootstrap Lombardia

website·Indexed 29 days ago

https://regionelombardia.github.io/bootstrap-lombardia/

A documentation framework based on Bootstrap for the Lombardy Region, providing a comprehensive library of accessible UI components including steppers, progress indicators, tooltips, popovers, and specialized form elements like datepickers and transfer lists. It includes guidelines for typography, mobile-first flexbox grids, and navigation patterns such as sidebars, toolbars, and thumbnav.

Tokens
149.7K
Snippets
646
Records
832
Agent score
74%

What's inside Bootstrap Lombardia

  1. Overview of Bootstrap Regione Lombardia

    Bootstrap Regione Lombardia is a specialized customization of Bootstrap Italia used for developing web-based applications for the Regione Lombardia. It ensures compliance with the official Design System of the entity to maintain consistency across its digital ecosystem.

    Technical foundations for the current version (v2.7.4):

    • Based on Bootstrap Italia v2.18.3
    • Based on Bootstrap v5.2.3

  2. Overview of Bootstrap Italia Components

    Bootstrap Italia provides a library of components for building websites based on Bootstrap 5.2.3. These components are customized in terms of style, accessibility, and functionality to comply with the 'Linee Guida di design per i siti internet e i servizi digitali della PA' (Design Guidelines for PA websites and digital services). The library includes both standard Bootstrap 5.2.3 components and additional non-native components referred to as 'plugins' that extend the framework's functionality.

  3. Understand Bootstrap Italia and its base version

    Bootstrap Italia (current version 2.18.3) is a customized version of Bootstrap 5.2.3. It is specifically designed to comply with the design, usability, and accessibility guidelines defined in the 'Linee Guida per il design degli applicativi Web di Regione Lombardia' and the 'Manuale operativo di design' for Italian Public Administration digital services.

  4. Understand Bootstrap Regione Lombardia architecture and origins

    Bootstrap Regione Lombardia is a customized fork of Bootstrap Italia, designed to comply with the 'Linee Guida per il design degli applicativi Web di Regione Lombardia'. It inherits all components, features, updates, and fixes from Bootstrap Italia, which itself is a customization of Bootstrap 5.2.3 tailored for Italian Public Administration design, usability, and accessibility standards.

  6. Implement a basic Popover

    The Popover is a component triggered by a click that provides information about a specific element or interaction. It is implemented using a button with specific data-bs attributes. The popover may automatically shift its position if there is insufficient screen space to render it at the requested placement.
    <button type="button" 
  class="btn btn-secondary" 
  data-container="body" 
  data-bs-toggle="popover" 
  data-bs-placement="top" 
  title="Titolo del Popover" 
  data-bs-html="true" 
  data-bs-content='Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#" class="popover-inner-link">LEGGI TUTTO</a>'>
  Popover in alto
</button>

  7. Understand Bootstrap Lombardia color variants

    Bootstrap Lombardia extends the standard Bootstrap 5.2.3 $theme-colors by introducing 16 monochromatic variants of the primary hue based on the HSB (HSV) color space. These variants are integrated into the theme colors and are available for use with all compatible utilities, such as .text- and .bg- classes.

  8. Implement a Cookie bar consent banner

    The Cookie bar is an informational banner used to notify users about cookie usage on a website. It appears at the bottom of the page, spans the full width, activates upon page load, and disappears after user interaction. A standard implementation includes a brief informational text, an acceptance button, and a link to a detailed privacy policy page.
    <section class="cookiebar fade" aria-label="Gestione dei cookies" aria-live="polite">
  <p>
    Questo sito utilizza cookie tecnici, analytics e di terze parti.<br />
    Proseguendo nella navigazione accetti l’utilizzo dei cookie.
  </p>
  <div class="mt-4">
    <button data-bs-accept="cookiebar" class="btn btn-primary me-3">ACCETTO<span class="visually-hidden"> i cookies</span></button>
    <button class="btn btn-outline-white me-3">ACCETTA SOLO NECESSARI</button>
    <a href="#">Privacy policy</a>
  </div>
</section>

  9. Implement a Cookiebar consent banner

    The Cookiebar is an informative banner used to notify users about the use of cookies and collect consent. To implement it, place the HTML structure immediately after the opening <body> tag.

    Key requirements:

    • The element must maintain the cookiebar class to ensure the associated JavaScript functionality for visibility management works correctly.
    • The acceptance button must include the data attribute data-bs-accept="cookiebar" to trigger the closing of the banner.
    • A link to a cookie preferences page should be provided for detailed user management.
    <section class="cookiebar fade" aria-label="Gestione dei cookies">
  <p>Questo sito utilizza cookie tecnici, analytics e di terze parti. <br />Proseguendo nella navigazione accetti l’utilizzo dei cookie.</p>
  <div class="cookiebar-buttons">
    <a href="#" class="cookiebar-btn">Preferenze<span class="visually-hidden">cookies</span></a>
    <button data-bs-accept="cookiebar" class="cookiebar-btn cookiebar-confirm">Accetto<span class="visually-hidden"> i cookies</span></button>
  </div>
</section>

  10. Understand the Bootstrap Lombardia responsive grid system

    The Bootstrap Lombardia grid system provides an invisible structure to organize page content using columns separated by gutters and bounded by page margins. It employs a responsive grid system where column widths adapt based on the viewport size (desktop vs. mobile). This ensures content readability and maintains usable user interactions (such as forms and dynamic controls) across various screen dimensions.

  12. Implement a privacy consent overlay for YouTube videos

    To comply with privacy regulations when using third-party services like YouTube, use a consent overlay. This prevents the installation of tracking cookies until the user explicitly accepts them. The overlay should inform the user about the cookies used and provide a link to the site's cookie policy. When the user clicks 'Accept', the YouTube video is loaded into the player via JavaScript.
    <script>
  const loadYouTubeVideo = function(videoUrl) {
    const videoEl = document.getElementById("vid1");
    const video = bootstrap.VideoPlayer.getOrCreateInstance(videoEl);
    video.setYouTubeVideo(videoUrl);
  }
</script>

<div class="acceptoverlayable">
  <div class="acceptoverlay acceptoverlay-primary fade show">
    <div class="acceptoverlay-inner">
      <div class="acceptoverlay-icon">
        <svg class="icon icon-xl"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-video"></use></svg>
      </div>
      <p>Accetta i cookie di YouTube per vedere il video. Puoi gestire le preferenze nella <a href="#" class="text-white">cookie policy</a>.</p>
      <div class="acceptoverlay-buttons bg-dark">
        <button type="button" class="btn btn-primary" data-bs-accept-from="youtube.com"
onclick="loadYouTubeVideo('https://youtu.be/_0j7ZQ67KtY')">Accetta</button>
        <div class="form-check">
          <input id="chk-remember" type="checkbox" data-bs-accept-remember>
          <label for="chk-remember">Ricorda per tutti i video</label>
        </div>
      </div>
    </div>
  </div>
  <div>
    <video controls data-bs-video id="vid1" class="video-js" width="640" height="264"></video>
    <!-- Transcription accordion follows here -->
  </div>
</div>