Styleguide Web FHNW

Tags: 1.0.0Bootstrap v5.3StableProduction

Der vorliegende Styleguide Web FHNW Version 1.0.0 leitet sich aus dem CD-Manual der FHNW ab und basiert auf dem CSS-Framework von Bootstrap.

Corporate Design

Der Styleguide Web FHNW definiert Erscheinungsbild und Gestaltung von Websites (insbesondere Webdiensten) und -Plattformen der FHNW gemäss CD-Manual. Der Styleguide wird technisch durch das Team Web der Corporate betreut (Kontaktangaben siehe Footer). Bei Fragen zum Corporate Design wenden Sie sich bitte an die Kommunikation FHNW.

Nutzung dieses Styleguides

Nachfolgend wird die technische Integration des FHNW-Bootstrap-Styleguides erläutert: insbesondere, welche Schritte erforderlich sind und welche Dateien zwingend integriert sein müssen, um HTML-Inhalte konform zum Corporate Design der FHNW darstellen zu können.

Die Nutzung setzt Kenntnisse mit dem Bootstrap-Framework voraus, Know-How mit CSS erleichtert den Umgang mit dem Framework. Weitere Dokumentation ist auf der offiziellen Seite getbootstrap.com auffindbar.

Technische Fragen bezogen auf die Implementation des vorliegenden Bootstrap-Frameworks können an webmaster@fhnw.ch gerichtet werden. Der Styleguide Web FHNW wird durch das Team Web der Corporate IT der FHNW bereitgestellt. Der Umgang und die Handhabung setzt Kenntnisse mit dem Bootstrap-Framework voraus. Kenntnisse in CSS erleichtert den Umgang mit dem Framework. Weitere und ausführliche Anleitungshilfen sind auf der offiziellen Seite Getbootstrap auffindbar.

Stylesheets

Im Starterpacket sind unter anderem zwei CSS-Dateien enthalten. fhnw.css und fhnw.min.css. Eine unkomprimierte und eine komprimierte CSS-Datei für den produktiven Einsatz. Es werden keine weiteren Stylesheets für die Darstelllung benötigt. Auch sind sämtliche erforderlichen Schriftschnitte der Google Font Inter im Stylesheet integriert. Es ist demzufolgend ausreichend die CSS-Datei wie unten im Code-Beispiel zu integrieren um die Darstellung gemäss FHNW CI/CD abbilden zu können.

Die unkomprimierte CSS-Datei fhnw.css dient für Entwickler als unterstützendes Element um gewisse Einblicke in die Komponenten gewinnen zu können oder um z.B. weitere Plugins die CSS enthalten in einer komprimierten gebündelten CSS-Datei ausliefern zu können. Ansonsten ist die komprimierte Datei fhnw.min.css zu integrieren.

1
2  <head>
3    ...
4    <link rel="stylesheet" href="./css/fhnw.min.css">
5    ...
6  </head>
7

Javascript

default.js

Die Datei default.js enthält Beispiel-Skripte für diverse Komponenten. Diese Datei soll und kann nach belieben angepasst und überschrieben werden. Es enthält Javascript für die Form-Valierung, initialer Code für den Webdienst-Header oder das jQuery Plugin Select2 das für Form Select zur Anwendung kommt. Weitere Javascript-Beispiele zu den jeweiligen Komponenten sind aus der offziellen Bootstrap-Dokumentation zu entnehmen.

1
2    ...
3    // EXCERPT default.js
4
5    // BACK-TO-TOP
6    var back_to_top_button = '<a href="#top" title="Back-To-Top" class="back-to-top"></a>';
7    document.querySelector('body').insertAdjacentHTML('beforeend', back_to_top_button);
8
9    window.addEventListener('scroll', function () {
10      if (window.pageYOffset > 100) {
11        document.querySelector('.back-to-top').style.opacity = 0.4;
12      } else {
13        document.querySelector('.back-to-top').style.opacity = 0;
14      }
15    });
16    
17    ...
18
19    // SELECT2 - DEFAULTS
20    $('select').select2({
21      theme: 'bootstrap-5',
22      placeholder: 'Choose an option',
23      closeOnSelect: true,
24      allowClear: true,
25      width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
26    });
27
28    ...
29

Cookie-Hinweis

In dieser Datei wird der Cookie-Hinweis gesteuert. Für Webseiten die als FHNW-Subdomain fungieren, kann der Code so belassen werden wie er ist. Für alle weiteren Domainen ist die Zeile 5 entsprechend anzupassen. Weitere Details zur Funktionalität und zum Datenschutz sind auf der Seite Cookie-Hinweis dokumentiert. Das Cookie-Consent-Skript ist im Ordner /assets/js/cookieconsent.js hinterlegt.

1
2  // Cookie-Consent excerpt
3  ...
4  
5  var cDomain = '.fhnw.ch'; // change this to your domain, if your page is not a fhnw.ch subdomain
6
7  ...
8

Favicons

In der Beispiel-HTML sind im head Favicons bereits eingepflegt. Die Favicons sind im Ordner /assets/img/device hinterlegt.

1
2  // Favicons
3  ...
4  <head>
5  ...
6  <link href="./assets/img/device/apple-icon-57x57.png" rel="apple-touch-icon" sizes="57x57" />
7  <link href="./assets/img/device/apple-icon-60x60.png" rel="apple-touch-icon" sizes="60x60" />
8  <link href="./assets/img/device/apple-icon-72x72.png" rel="apple-touch-icon" sizes="72x72" />
9  <link href="./assets/img/device/apple-icon-76x76.png" rel="apple-touch-icon" sizes="76x76" />
10  <link href="./assets/img/device/apple-icon-114x114.png" rel="apple-touch-icon" sizes="114x114" />
11  <link href="./assets/img/device/apple-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" />
12  <link href="./assets/img/device/apple-icon-144x144.png" rel="apple-touch-icon" sizes="144x144" />
13  <link href="./assets/img/device/apple-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" />
14  <link href="./assets/img/device/apple-icon-180x180.png" rel="apple-touch-icon" sizes="180x180" />
15  <link href="./assets/img/device/android-icon-192x192.png" rel="icon" sizes="192x192" type="image/png" />
16  <link href="./assets/img/device/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png" />
17  <link href="./assets/img/device/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png" />
18  <link href="./assets/img/device/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png" />
19  ...
20  </head>
21

Beispiel-HTML mit allen benötigten Ressourcen

1
2// Example code - basic template
3  <!doctype html>
4  <html lang="de" dir="ltr">
5    <head>
6      ...
7      <meta charset="utf-8">
8      <meta name="viewport" content="width=device-width, initial-scale=1">
9      <title>FHNW Bootstrap-Styleguide Demo</title>
10      <link rel="stylesheet" href="./css/fhnw.min.css">
11      ...
12    </head>
13    <body>
14      ...
15      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
16      <script type="text/javascript" src="./js/cookieconsent.js"></script>
17      <script type="text/javascript" src="./js/default.js"></script>
18    </body>
19  </html>
20

Download Starterpacket

Alle benötigten Ressourcen sind im Starterpacket enthalten.