Zum Hauptinhalt springen

Hinzufügen von Breakpoint-Theming

In dieser Lernmission erfahren Sie, wie sich das Theme Ihrer Jutro-App über Breakpoints mithilfe von Design-Bausteinen (Tokens) automatisch an verschiedene Bildschirmgrößen anpasst.

Was ist Breakpoint-Theming?​

Breakpoint-Theming in React-Apps bedeutet: Das Aussehen und das Layout der App (oder sogar ganze Theme-Konfigurationen) ändern sich automatisch passend zur Bildschirmgröße.

Die Verwendung von Breakpoints zur reaktiven Anpassung des CSS-Designs Ihrer App hat die folgenden Vorteile:

  • Optimierte UX: Unterschiedliche Bildschirmgrößen können völlig unterschiedliche User Experience Patterns aufweisen.
  • Markenkonsistenz: Sie bewahren die Markenidentität und passen das Erscheinungsbild gleichzeitig an die jeweiligen Einschränkungen des verwendeten Gerätes an.
  • Barrierefreiheit: Größere Touch-Ziele auf Mobilgeräten oder völlig andere Navigationsmuster.

Jutro verfügt über keinen integrierten Mechanismus für das Breakpoint-Theming. Um diese Funktionalität zu einer App hinzuzufügen, müssen Sie integrierte CSS-Mechanismen wie Medienabfragen verwenden.

Los geht's: Hinzufügen von Breakpoint-Theming zur Lern-Sandbox-App​

In dieser Übung verwenden Sie CSS-Medienabfragen, um zu ermitteln, welche Gruppe von Design-Token aktiv ist, abhängig von der Breite des sichtbaren Bildschirmbereichs und davon, ob es auf einem Bildschirmgerät angezeigt wird. Dieses Beispiel deckt zwei Fälle ab:

  • screen and (min-width: 769px): Aktiv bei der Anzeige auf einem Bildschirmgerät und bei einer Breite von mindestens 769 Pixeln.
  • screen and (max-width: 768px): Aktiv bei der Anzeige auf einem Bildschirmgerät und mit einer Breite von 768 Pixeln oder weniger.

Die Aufgabe gliedert sich in zwei Teile. Zuerst definieren Sie die gewünschten Themes wie gewohnt und generieren mit dem Jutro CLI die zugehörigen CLI-Dateien. Wenn die CSS-Dateien generiert sind, definieren Sie manuell ein kombiniertes Theme, das aus den generierten CSS-Dateien importiert wird, und legen dieses als Ihr aktives Theme fest.

1. Definieren Sie die Design-Token für jedes Theme​

Der erste Teil des Prozesses besteht darin, die gleichen Schritte wie in der vorherigen Lernmission auszuführen, um neue Themes zu definieren.

  1. Erstellen Sie zwei Token-Ordner in Ihrem Ordner src/assets/styles/tokens. Benennen Sie das eine für die Desktop-Token mit Learning-Desktop und das andere für die Tablet-Token mit Learning-Tablet.

  2. Erstellen Sie in jedem dieser Ordner eine JSON-Datei mit den Token, die angewendet werden sollen, wenn das zugehörige Theme aktiv ist. Benennen Sie sie mit einem verzeichnisspezifischen Namen, z. B. learning-desktop-tokens.json und learning-tablet-tokens.json.

src/assets/styles/tokens/Learning-Desktop/learning-desktop-tokens.json
{
  "jds": {
    "color": {
      "background": {
        "page": {
          "type": "color",
          "value": "#ffffff",
          "description": "Palette color White."
        }
      }
    }
  }
}
src/assets/styles/tokens/Learning-Tablet/learning-tablet-tokens.json
{
"jds": {
  "color": {
    "background": {
      "page": {
        "type": "color",
        "value": "#000000",
        "description": "Palette color Black."
      }
    }
  }
}
}
  1. Add the new token sets to the .themesConfig.json file. Name them LearningDesktop and LearningTablet:
.themesConfig.json
{
"LearningTablet": {
  "name": "LearningTablet",
  "tokens": {
    "input-path": "src/assets/styles/tokens/Learning-Tablet/*.json",
    "output-file-name": "styles/Learning-Tablet/learning-tablet-design-tokens.css"
  }
},
"LearningDesktop": {
  "name": "LearningDesktop",
  "tokens": {
    "input-path": "src/assets/styles/tokens/Learning-Desktop/*.json",
    "output-file-name": "styles/Learning/learning-desktop-design-tokens.css"
  }
},
"endlessSky": {
  "name": "endlessSky",
  "variableOverrides": "styles/endlessSky/variableOverrides.css",
  "styleOverrides": "styles/endlessSky/styleOverrides.css",
  "baseTheme": "Consumer"
},
"DSB": {
  "name": "DSB",
  "variableOverrides": "styles/dsbTheme/variableOverrides.css",
  "styleOverrides": "styles/dsbTheme/styleOverrides.css",
  "baseTheme": "Consumer"
},
"RedFarm": {
  "name": "RedFarm",
  "baseTheme": "Consumer",
  "variableOverrides": "styles/redFarmTheme/variableOverrides.css",
  "styleOverrides": "styles/redFarmTheme/styleOverrides.css"
},
"sampleTheme": {
  "name": "sampleTheme",
  "baseTheme": "Enterprise",
  "variableOverrides": "styles/sampleTheme/variableOverrides.css",
  "styleOverrides": "styles/sampleTheme/styleOverrides.css"
}
}
  1. Öffnen Sie ein Terminal in dem Ordner jutro-sandbox-app. Führen Sie den Befehl jutro generate:themes aus, um CSS-Dateien basierend auf der in Schritt 1 definierten Token-Datei zu erzeugen. Bei erfolgreichem Abruf werden Sie die folgende Ausgabe und neue Dateien sehen, die unter den angegebenen Pfaden erstellt wurden.
> npm run jutro generate:themes
  _____           __                   
/\___ \         /\ \__                
\/__/\ \  __  __\ \ ,_\  _ __   ___   
  _\ \ \/\ \/\ \\ \ \/ /\`'__\/ __`\ 
  /\ \_\ \ \ \_\ \\ \ \_\ \ \//\ \L\ \
  \ \____/\ \____/ \ \__\\ \_\\ \____/
  \/___/  \/___/   \/__/ \/_/ \/___/ 
                                      
                                      
[dotenv@17.2.3] injecting env (8) from .env -- tip: ⚙️  write to custom object with { processEnv: myObject }

css
✔︎ src/assets/styles/Learning-Tablet/learning-tablet-design-tokens.css

css
✔︎ src/assets/styles/Learning-Desktop/learning-desktop-design-tokens.css
Note: Weitere Informationen zur Verwendung des Jutro CLI finden Sie in der Lernmission zum Jutro CLI.

Weitere Einzelheiten zum Befehl generate:themes finden Sie in der CLI-Dokumentation

2. Erstellen Sie ein kombiniertes Theme​

Der nächste Schritt besteht darin, manuell eine CSS-Datei zu erstellen, die sowohl die Themes importiert als auch festlegt, welches Theme basierend auf CSS-Medienabfragen angewendet werden soll.

  1. Erstellen Sie einen neuen Ordner in dem styles-Verzeichnis mit dem Namen Combined-Themes.
  jutro-sandbox-app
    ├── src
    │   └── assets
    │       └── styles
    |           ├── Combined-Themes
    |           ├── Learning-Desktop
    |           |   └── learning-desktop-design-tokens.css
    |           └── Learning-Tablet
    |               └── learning-tablet-tokens.css
  1. Erstellen Sie manuell im Combined-Themes-Verzeichnis mit dem Namen combined-theme-design-tokens.css eine Datei mit dem folgenden Inhalt:
src/assets/styles/Combined-Themes/combined-theme-design-tokens.css
@import url('../Learning-Desktop/learning-desktop-design-tokens.css') screen and
  (min-width: 769px);
@import url('../Learning-Tablet/learning-tablet-design-tokens.css') screen and
    (max-width: 768px);
  1. Fügen Sie der Datei .themesConfig.json das kombinierte Token-Set hinzu, indem Sie ein Theme hinzufügen, bei dem variableOverrides der Pfad zu Ihrer manuell erstellten CSS-Datei ist:
.themesConfig.json
  {
    "CombinedTheme": {
    "name": "CombinedTheme",
    "variableOverrides": "styles/Combined-Theme/combined-theme-design-tokens.css"
    },
    "LearningTablet": {
      "name": "LearningTablet",
      "tokens": {
        "input-path": "src/assets/styles/tokens/Learning-Tablet/*.json",
        "output-file-name": "styles/Learning-Tablet/learning-tablet-design-tokens.css"
      }
    },
    "Learning": {
      "name": "LearningDesktop",
      "tokens": {
        "input-path": "src/assets/styles/tokens/Learning-Desktop/*.json",
        "output-file-name": "styles/Learning/learning-desktop-design-tokens.css"
      }
    },
    ...
Note: Sie müssen danach nicht wie im vorherigen Abschnitt jutro generate:themes erneut ausführen, da Sie die CSS-Datei, die dieses Theme verwendet, in Schritt 2 manuell erstellt haben.
  1. Aktualisieren Sie in der Datei startApp.ts in Ihrem Projektstamm das Argument themeConfig, um CombinedTheme zu verwenden:
startApp.ts
start(Jutro, {
      ...
      themeConfig: themesConfig.CombinedTheme,
  });
  1. Starten Sie die Website mit dem Befehl npm start in Ihrem Terminal und verringern Sie die Fenstergröße. Der Hintergrund wird schwarz, wenn der Bildschirm schmaler als 769 Pixel ist.

Beispiel für die Theme-Änderung