Boilerplate¶
Um bei neuen Projekten nicht immer von Null anzufangen, haben wir für die Entwicklung von Pimcore Projekten ein Boilerplate entwickelt.
Das Boilerplate bietet:
- eine grundlegende Projektstruktur
- ein Webpack Encore Setup zum verwalten von Assets
- Integration von Tailwindcss, Stimulus und Turbojs
- Integration des ProbitBaseBundles
Neues Projekt aufsetzen¶
Andere Container schließen
Es ist nicht möglich, mehrere devcontainer gleichzeitg laufen zu haben.
Schließe vor dem Starten alle anderen devcontainer mit docker kill $(docker ps -q)
# Klone das Repo in dein Projektordner
git clone \
git@gitlab.com:probit-code/intern/pimcore/boilerplate.git \
<project-name>
# Starte das Setup
cd <project-name> && bash wizard.sh
# Verknüpfe das Gitlab Repository mit dem Projekt
git remote add origin <gitlab-repo>
git add .
git commit -m "Initial commit"
git push -u origin master
Das Projekt ist anschließend lokal aufgesetzt und im Gitlab versioniert.
Beginne damit, die ersten Schritte für ein Projekt durchzugehen.
Erste Schritte¶
Entwicklungsumgebung starten¶
# Projekt öffnen
code <project-pfad>
# Projekt im Devcontainer starten
# `strg + shift + p` -> `Open in Container`
# Assets kompilieren
npm run serve
Schriften definieren¶
Externe Schriften (Google Fonts / Adobe)¶
Um externe Schriften zu laden, musst du das Basislayout vom BaseBundle überschreiben. Lege dafür folgende Datei an und fülle den block mit den entsprechenden Angaben.
{# templates/bundles/ProbitPimcoreBaseBundle/layout/base.html.twig #}
{% extends '@!ProbitPimcoreBase/layout/base.html.twig' %}
{{ parent() }}
{% block head_fonts %}
{# Google Fonts #}
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet" />
{# Adobe Fonts #}
<link rel="stylesheet" href="https://use.typekit.net/act4xxw.css" />
{% endblock %}
Füge die Schrift anschließend in deiner Tailwind Konfiguration als Schriftart hinzu:
// tailwind.config.js
// ...
fontFamily: {
heading: [
'<font-name>',
...
],
},
Lokale Fonts (Woff, TTF, etc)¶
Lege die Font Dateien als .woff oder .ttf in den Ordner assets/fonts ab.
Lade die Dateien danach mittels deiner app.js in das Projekt.
// assets/app.js
import './fonts/<font-name>.woff';
Danach kannst du die Schrift im CSS als Font-Face anlegen
/* assets/app.css */
@font-face {
font-family: '<font-name>';
src: url('fonts/<font-name>.woff') format('woff');
font-display: swap;
}
Füge die Schrift anschließend in deiner Tailwind Konfiguration als Schriftart hinzu:
// tailwind.config.js
// ...
fontFamily: {
heading: [
'<font-name>',
...
],
},
Farben definieren¶
Ziehe für alle Farben den Standardwert aus der XD Vorlage und generiere dir anschließend die Farben mit Tailwindshades.
Füge die Werte danach in deiner tailwind.config.js hinzu:
colors: {
// primary: {},
// secondary: {},
// accent: {},
// neutral: {},
// },
},
Als Standard definieren wir folgende drei Grundfarben zur Umsetzung von Designs:
- primary: Kommt meist aus dem Logo
- secondary: Komplimentärfarbe zur primary. Ebenfalls meist im Logo vorhanden
- accent: Für einzelne Elemente, die gehighlightet werden sollen
Dazu kommen Farben für Dialoge und Statusmeldungen. Du kannst entweder die Standards nutzen, oder jeweils die Farbe überschreiben.
- neutral: Sammelsotium an Grautönen
- success: z.B. für Erfolgsmitteilungen
- info: z.B. für Infomeldungen
- warning: z.B. für Warnungen
- danger: z.B. für Fehler
Wenn weitere Farben für die Umsetzung gebraucht werden, füge sie ebenfalls in deiner Konfiguration hinzu.
Button definieren¶
Für die Buttons haben wir eine grundlegende Vorlage der einzelnen styles im BaseBundle.
Zum überschreiben der Styles kopiere dir die base-bundle/assets/button.css in dein Projekt und ändere anschließend die entsprechenden Styles.
Für die Darstellung wird jeweil die CSS Klasse btn auf dem Element erwartet, um es wie ein Button darzustellen.
<!-- Unterschiedliche Varianten können über
Kombination der Klassen dargestellt werden -->
<button class="btn"></button>
<button class="btn btn-neutral"></button>
<button class="btn btn-lg"></button>
<button class="btn btn-hollow"></button>
<button class="btn btn-text"></button>
Icons einrichten¶
Icons werden in den Ordner templates/icon abgelegt.
SVG Icon die aus der Grafik kommen können mit dem Befehl convert-icons zu twig Dateien konvertiert und optimiert werden.