# Templating

# Überschreiben von Dateien

hubble verfügt über fertige Layouts, Pages und Components, Assets, usw.. Diese lassen sich einfach überschreiben indem man sie in den jeweiligen Ordner im NuxtJS Root Verzeichnis kopiert.

Es gibt u.a. folgende Ordner im hubble Modul:

  • layouts
  • assets
  • components
  • plugins
  • store
  • pages
  • middleware

# Workflow

Um bereits im hubble Modul existierende Dateien zu überschreiben, müssen Ordnerstrukturen und Dateinamen aus dem Modul eingehalten werden.

Anpassen einer bestimmten Komponente z.B. Logo:

  1. Komponente im Modul ausfindig machen: Suche in node_modules/@hubblecommerce/hubble/core nach "Logo"
  2. Komponente TheLogo.vue kopieren von
    node_modules/@hubblecommerce/hubble/core/components/navigation/TheLogo.vue nach
    components/navigation/TheLogo.vue
  3. Kopierte Komponente editieren

# API spezifische Ordner

Nach diesem Schema lassen sich sämtliche Dateien innerhalb von @hubblecommerce/hubble/core überschreiben und anpassen. Eine Besonderheit gilt es dabei zu beachten: Die Ordner anonymous-middleware, middleware, plugins und store enthalten sogenannte API-spezifische Unterordner. Außer diesen API-spezifischen Unterordnern können in diesen Ordnern keine weiteren Unterordner erstellt werden, da diese nicht im finalen Build eingebunden werden.

Beispielsweise kann also der Ordner middleware wie links aufgebaut sein und der Inhalt wird vollständig verwendet, wohingegen bei der Ordnerstruktur auf der rechten Seite nur der sw Ordner eingebunden werden wird:

apiTypeDirs

# Updatefähigkeit

Es sollte immer abgewägt werden, ob eine direkte Anpassung von existierenden Dateien aus dem hubble Modul tatsächlich notwendig ist oder es angemessener wäre eine zusätzliche Datei zu erstellen. Je weniger überschrieben wird, desto weniger muss nach einem Update des hubble Moduls angepasst werden.

# Theming

# Theme konfigurieren

Es existiert ein responsives Default Theme in hubble, welches es erleichtert darauf aufbauend in kurzer Zeit ein individualisiertes Theme zu erstellen. Das im Projekt zu verwendende Theme wird in der .env Datei definiert:

# .env
THEME = 'hubble'
1
2

Entgegen des Single File Component Ansatzes wird der Style Part jeder Komponente in einer separaten scss Datei gespeichert. Je nachdem welches Theme konfiguriert ist, wird der entsprechende Theme Ordner mit Styles geladen.

~/assets/scss/<THEME-FOLDER>
1

Die gleiche Mechanik kann genutzt werden um auch andere Theme spezifische Dateien zu laden die sich im ~assets/ Ordner befinden.

TIP

Die Kompilierung von den Dateien in dem scss Ordner ist in hubble bereits konfiguriert. Um neue scss Dateien ebenfalls in den Kompilierungsprozess zu integrieren ist nur ein Hinzufügen zur ~/assets/scss/hubble/all.scss notwendig.

# SCSS konfigurieren

Alle scss Dateien werden über die ~/assets/scss/hubble/all.scss importiert. Es gibt zwei Unterordner. In ~/assets/scss/hubble/components ist für jede Vue.js Komponente eine entsprechende scss Datei hinterlegt. In ~/assets/scss/hubble/configuration befinden sich alle scss Variablen und Mixins die für das Styling der App relevant sind.

// ~/assets/scss/hubble/configuration/theme.scss

$primary: #880E4F !default;
$secondary: #EAE9EA !default;
$accent: #880E4F !default;
$highlight: #BD1A20 !default;
$background: #fff !default;
$background-light: #F8F8F8 !default;
$border-color: #EAE9EA !default;
$text-primary: #2C2E31 !default;
$text-primary-on-background: #2C2E31 !default;
$available-accent: #76BD1A !default;
$font-family: 'Lato', Helvetica, Arial, sans-serif !default;
$text-light: #535358 !default;
$header-height-desktop: 80px !default;
$border-radius: 0 !default;

$base-padding: 10px !default;
$base-padding-md: 20px !default;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Die strikte Einhaltung dieser Ordnerstruktur innerhalb des Theme Ordners ist jedoch nur eine Empfehlung. Wichtig ist nur, neue Dateien in ~/assets/scss/<THEME-FOLDER>/all.scss zu importieren.

# Bootstrap

Für das eigentliche Layout und das definieren des Layout Grids wird Bootstrap (opens new window) verwendet. Wobei nur die in hubble verwendeten Klassen Styles und Sass Mixins über die ~/assets/scss/hubble/configuration/bootstrap-essentials.scss eingebunden sind und um weitere Bootstrap Klassen und Funktionen erweitert werden können.

// ~/assets/scss/hubble/components/hubble.scss
.nav-wrp {
    /* uses sass mixin from Bootstrap */ 
    @include make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints);
}
1
2
3
4
5

# Aufbau des hubble Themes

Die im hubble Theme verwendeten Standardwerte für Fonts und Farben sind jeweils in der colors.scss und typography.scss definiert und eignen sich als schnelle Möglichkeit das Theme anzupassen. Als Default Schriftart wird Lato (opens new window) aus der Google Fonts (opens new window) Sammlung verwendet und wird in der font.scss importiert.

// ~/assets/scss/hubble/configuration/fonts.scss
// importing font weights 400 & 700 
@import url('https://fonts.googleapis.com/css?family=Lato:400,700&display=swap');
1
2
3
// ~/assets/scss/hubble/configuration/theme.scss
$font-family: 'Lato', Helvetica, Arial, sans-serif !default;
1
2
// ~/assets/scss/hubble/configuration/global.scss
body {
  font-family: $font-family;
}
1
2
3
4

Außerdem sind Icons über Klassen in ~/assets/scss/hubble/configuration/icon-set.scss definiert. Diese referenzieren als font-face eingebundene IcoMoon (opens new window) Icons:

// ~/assets/scss/hubble/configuration/icon-set.scss
// 1) define icon set as font face
@font-face {
    font-family: 'icons';
    src:  url('~assets/fonts/icons/icomoon.eot');
    /* ... */
}

// 2) set icon set as font family
.icon {
    /* using !important to prevent issues with browser extensions that change fonts */
    font-family: 'icons' !important;
    /* ... */
}

// 3) set specific icon code on class
.icon-heart:before {
    content: "\e907";
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Verwendung von Icons in Komponenten:






 








<!--  ~/components/navigation/TheWishlist.vue -->
<button class="button-icon wishlist-icon"
        :class="setButtonStates"
        @click="toggle()"
>
        <i class="icon icon-heart" aria-hidden="true" />

        <span class="hidden-link-name">Toggle Wishlist</span>

        <material-ripple />

        /* ... */
</button>
1
2
3
4
5
6
7
8
9
10
11
12
13

TIP

Das Default Theme hubble verwendet die ~/assets/scss/hubble/configuration/reset.scss, um Browserunterschiede auszugleichen und damit ein gleichmäßiges Erscheinungsbild der Shopseite für alle Browser zu ermöglichen.

Layout spezifische Deklarationen befinden sich in der ~/assets/scss/hubble/components/hubble.scss und folgen im Aufbau dem generellen Schema, welches im Projekt Anwendung findet.

# Responsive Styling

Styles werden nach dem mobile first Ansatz von mobilen Geräten ausgehend, mit den primären Breakpoints min-width: 768px (Tablet) und min-width: 1024 (Desktop), definiert.

Diese Breakpoints können auch im Script Teil der Komponenten benutzt werden, z.B. um Klassen hinzuzufügen oder zu entfernen. Dafür wird nuxt-mq (opens new window) verwendet.

Die Konfiguration dieser Breakpoint Werte befindet sich in der nuxt.config.js.

Konfiguration:

// ~/nuxt.config.js
modules: [
    // ...
    [ 'nuxt-mq',
        {
            breakpoints: {
                sm: 768,
                md: 1024,
                lg: Infinity
            },
            // ...
        }
    ]
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Verwendung:

<!-- ~/components/productdetail/ProductDetailBuybox.vue -->
<add-to-wishlist v-if="$mq === 'lg'" class="add-to-wishlist-button" :item="dataProduct" />
1
2