Atelier DSK

Onepager-Website des Ateliers Digitale Souveränität für Kunsthochschulen

 

ENTWICKLUNG

Voraussetzungen

• PHP 8.3+
• Kirby CMS 5
• Node.js & npm
• Lokaler Webserver (z.B. Valet, MAMP, XAMPP)

JavaScript und CSS sind modular strukturiert, um die Codebase übersichtlich zu halten und die Wartbarkeit zu verbessern. Dies ist besonders wichtig, weil der Onepager schrittweise erweitert wird, bishin zur vollumfänglichen Website.

Development-Umgebung

1. Dependencies installieren

npm install

2. Lokale Domain konfigurieren

• Domain: atelier-dsk.test
• Document Root: /public

3. Development-Server starten

npm run dev

Dies startet:

• CSS-Watch (PostCSS)
• JavaScript-Watch (Rollup)
• Browser-Sync Proxy auf http://localhost:3000

4. Build für Produktion

npm run build

Assets & Build-Prozess

Kirby an sich braucht keinen Build-Prozess. Für JavaScript und CSS gibt es jedoch einen minimalen Build-Prozess, hauptsächlich, um komponentenbasiert arbeiten zu können und für bestimmte Hilfsfunktionen wie Minifizierung und Sourcemaps.

1. JavaScript-Module

Das Projekt verwendet eine modulare JavaScript-Struktur mit ES6-Modulen.

Neues Modul hinzufügen

1. Neue Datei in modules/ erstellen (z.B. modules/navigation.js)
2. init() Funktion exportieren:

export function initNavigation() {
	// Modul-Logik
}

1. In main.js importieren und aufrufen:

import { initNavigation } from './modules/navigation.js';
initNavigation();

Rollup bündelt alle Module automatisch zu main.min.js.

2. CSS-Module

Das Projekt verwendet eine modulare CSS-Struktur mit PostCSS. Entry ist global.css — daraus entsteht per Build global.min.css. Darin werden zuerst Partials (Dateien mit _-Präfix: Reset, Variablen, Typografie, Utilities) und anschließend Styles aus **components/** per @import geladen. Komponenten-Styles liegen also unter css/components/. print.css ist ein eigenes Stylesheet für die Druckansicht und wird im Template separat eingebunden, nicht über global.css.

Neues CSS-Modul hinzufügen

1. Datei unter public/assets/css/components/<name>.css oder public/assets/css/<name>.css anlegen.
2. In global.css mit @import 'components/<name>.css'; einbinden (Reihenfolge wie bei den anderen Komponenten).

-> npm run dev bzw. npm run build — Watch bzw. Build aktualisiert global.min.css automatisch.