Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jensgro/fractal-handlebars-playground
Kleines Projekt zum Austesten der Pattern Library Fractal
https://github.com/jensgro/fractal-handlebars-playground
fractal handlebars
Last synced: about 2 months ago
JSON representation
Kleines Projekt zum Austesten der Pattern Library Fractal
- Host: GitHub
- URL: https://github.com/jensgro/fractal-handlebars-playground
- Owner: jensgro
- Created: 2020-02-22T23:48:00.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-02-20T16:04:25.000Z (almost 2 years ago)
- Last Synced: 2024-10-27T18:50:57.909Z (3 months ago)
- Topics: fractal, handlebars
- Language: SCSS
- Homepage:
- Size: 4.52 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Eine Webseite modular in einer Pattern Library aufbauen
Dieses Projekt ist ein Grundlage, um mittels der Pattern Library [Fractal](https://fractal.build) eine Website zu konstruieren.
## Templatesystem
Um sich die Arbeit zu erleichtern und unterschiedliche Varianten mit unterschiedlichen Inhalten schnell erstellen zu können, bietet sich die Verwendung eines Templatesystems an. In dieser Demo ist [Handlebars](https://handlebarsjs.com/) installiert.
## Sass
Um die Arbeit mit CSS zu erleichtern nutze ich **Sass** und **Autoprefixer**, ein PostCSS-Plugin. Autoprefixer sorgt dafür, dass Vendor-Prefixes geschrieben werden, wenn sie benötigt werden.
## Bootstrap
Nur zur Vorsicht und um "Spielcode" zu haben, habe ich auch Bootstrap in das Projekt integriert. Es handelt sich hierbei nur um eine Option, keinesfalls einen integralen Bestandteil des Projektes.
## Gulp
Um Sass auszugeben, einen virtuellen Server mit Fractal zu bekommen und einen Watch-Prozess während der Arbeit zu haben, nutzen wir Gulp. Wenn die aktuelle Gulp-Version noch nicht lokal installiert ist, gib bitte auf der Kommandozeile folgendes ein:
````
npm i -g gulp-cli
````
## Installation des Projektes
Um das Projekt als solches zu installieren, den Quellcode bitte per ``git clone`` herunterladen oder direkt als **ZIP**-File. Danach auf der obersten Ebene des Projektes bitte folgendes eingeben:
````
npm i
````
Nachdem alle Abhängigkeiten installiert sind, bitte einmal folgendes auf der Kommandozeile eingeben:
````
npm run installbs
````
Dadurch werden alle SCSS-Dateien von Bootstrap in den lokalen SCSS-Ordner kopiert. Dadurch können wir später mit Bootstrap arbeiten, wenn wir wünschen.
## Arbeit mit Sass
Auf die Bootstrap-Dateien kann selbstverständlich auch aus der anderen SCSS-Datei referenziert werden. Das Basis-CSS "Reboot" ist sicherlich auch ausserhalb von Bootstrap interessant, ebenso das Grid-System.
Der Watcher ist so konfiguriert, dass er jede Änderung in einer SCSS-Datei innerhalb des gesamten Projektes erkennt (also innerhalb von "src"). Somit ist es Sache des Entwicklers zu entscheiden, ob die SCSS-Dateien an einem zentralen Ort oder immer zusammen mit der HTML/Handlebars-Datei abgelegt werden sollen.
## Die wichtigsten Befehle auf der Kommandozeile
Das gesamte Projekt installieren/initialisieren.
````
npm i
````
Die SCSS-Dateien von Bootstrap ins lokale Verzeichnis kopieren. Muss nur einmal (am Anfang) ausgeführt werden.
````
npm run installbs
````
Sollte Bootstrap eine Aktualisierung erfahren, bietet sich diese Kombination aus zwei Befehlen an:
````
npm update bootstrap && npm run installbs
````
Diese Codezeile sollte die Basis der normalen Arbeit sein:
````
npm run sync
````
Damit wird Fractal mit einem Server gestartet. Fracatal achtet auf Änderungen an den HTML-, Handlebars- und Data-Files. Und ein zusätzlicher Watcher achtet auf SCSS-Änderungen. Beides gibt es auch als separate Tasks, die dann in zwei separaten Terminalfenstern ausgeführt werden müssen:
````
npm run start
````
````
npm run watch
````
Sollen ohne einen Watcher einfach die ``styles.css`` oder die Bootstrap-CSS ausgegeben werden, gibt es folgende Befehle:
````
npm run build:css
````
````
npm run build:bs4
````
Wenn das Ausgabeverzeichnis ``dist`` gelöscht werden soll, kann dies auch mittels eines kleinen Befehls geschehen:
````
npm run clear
````
## Alternativen?
Das ist alles nur der Anfang eines hoffentlich größeren Abenteuers/Projektes.
Ich habe im Jahr 2019 zwei weitere Pattern-Libraries getestet und meine ersten, recht schnell gewonnenen Eindrücke zusammen mit meinem Test dokumentiert und zu Github hochgeladen. Es gab auch jeweils später Antworten auf meine Kommentare von den Maintainern. Diese sind im aktuellen Stand der Repos sichtbar:
- [Malvid-Experiment](https://github.com/jensgro/malvid-experiment)
- [UIEngine-Test](https://github.com/jensgro/uiengine-test)
## Wichtige Links
- [Fractal](https://fractal.build)
- [Handlebars](https://handlebarsjs.com/)
### Allgemeine Links
- [Farbverläufe erstellen](http://www.colorzilla.com/gradient-editor/) - mit Codeausgabe
- [animate.css](https://daneden.github.io/animate.css/) - fertige Animationen zum Kopieren
- [Frontend Development Resources](http://jensgro.github.io/Frontenddevelopment-Resources/) - meine Linksammlung von wichtigen Tools und Quellen
- [The CSS-Mindset](https://mxb.dev/blog/the-css-mindset/)
- [BEM 101](https://css-tricks.com/bem-101/) - eine Übersicht über die BEM-Methodologie
### Blindtexte und Platzhalterbilder
- Blindtexte können Sie sich im [Blindtextgenerator](http://www.blindtextgenerator.de/) in unterschiedlichen Sprachen zusammenstellen. Auch in Deutsch!
- Eine Auswahl an kostenlosen Platzhalterbildern für Entwürfe bietet [meine Codepen-Seite](https://codepen.io/jensgro/full/HFnsE).
- Auf Codepen finden Sie [unzusammenhängende Blindtexte](https://codepen.io/jensgro/pen/yactj?editors=1000) und einen sehr alten Artikel von mir als Blindtext: [Webseiten sind keine Gemälde](https://codepen.io/jensgro/pen/vFagC?editors=1000).
- SVG-Illustrationen finden Sie auf [undraw](https://undraw.co/illustrations), SVG-Icons habe ich ein paar [auf Codepen](https://codepen.io/jensgro/pen/yzryMN) gesammelt.