Mit sndwch, meinem vor Jahren (2013) entwickelten html Blockgenerator, lassen sich vorgefertigte html-Blocks wie Bausteine (oder eben wie ein Sandwich) übereinander stapeln. Man beginnt mit dem Menü, darunter der Header, usw. Ganz zum Schluss kommt natürlich der footer. Bei allen Blocks stehen mehrere, zum Teil schon deutlich in die Jahre gekommene Blocks zur Verfügung, trotzdem will ich es den Lesern nicht vorenthalten.

sndwch html Blocks

Als CSS-Grid kommt das beliebte Skeleton zum Einsatz. Damit und mit dutzenden weiteren CSS-Elementen wurden die, ausschließlich in schwarz/weiss gehaltenen Blocks gestaltet. Die Konkurrenz war mir da einen Schritt voraus und hat farbig vordefinierte Blocks angeboten, allerdings auch zu einem deutlich höheren Preis als damals die EUR 25 für sndwch. LESS statt CSS erlaubt zumindest die Farbanpassung aller Blocks in einer einzigen Datei. Übrigens: Alle Blocks können vertikal verschoben werden, die Übersicht wird dann im Edit-Mode etwas unübersichtlich.

Mit sndwch html lernen

Trotz der zum Teil veralteten Blocks eignet sich sndwch doch sehr gut für Code-Neueinsteiger. Etwas kompliziert ist die CSS-Zuordnung zu den jeweiligen html-Schnipsel, aber mit etwas Geduld lässt sich das herausfinden. Alle Blocks bestehen ausschließlich aus html und CSS, dies eigentlich nur deshalb, da jQuery Ajax (hat sndwch überhaupt erst möglich gemacht) seinerzeit keine Javascript-Files laden konnte. Apropos lernen: So nebenbei erfährt man, welche Sandwiches es weltweit gibt. Die Devise mit sndwch: Alte html-Blocks einfach weglassen und durch zeitgemäßes Design ersetzen. Fröhliches coden!

Vielen Dank im Nachhinein an jQuery Ajax, Stackoverflow, Skeleton Boilerplate und dutzenden anderen Problemlösern. Sie alle hatten mir damals die Arbeit etwas erleichtert. Verwendet wurden auschließlich Scripte, CSS für Menüs, etc., die unter den Lizenzen GPL, Creative Commons und Open Source jedem frei zur Verfügung stehen.

Image

sndwch html Blocks im Edit-Modus:

Unter jedem hinzugefügten Block steht die Bezeichnung, beim Menü zB: data/rwd-nav-patterns.html. Das erleichtert den Zugriff auf die entsprechende html-Datei.

Image

Wie kann ein sndwch-Block im Edit-Mode wieder entfernt werden? Unter dem bereits geöffneten Block auf close klicken.

Und so im Preview-Mode (die Voransicht):

Image

Troubles with Touchscreens:

Die Tatsache, dass scrollen und Elemente verschieben sich gegenseitig ausschließen, muss man bei sndwch (auf Smartphones und Tablets) leider hinnehmen. Das betrifft aber lediglich die Arbeit mit sndwch – also das übereinanderstapeln der Blocks – nicht die Resultate, die funktionieren auf allen Geräten von Desktop bis Smartphones klaglos. Ein Ausweg wäre, das Verschieben der Elemente nur in der linken Browser-Hälfte zu bewerkstelligen, aber ich hab schon viel zu viel Zeit in sndwch investiert und die Lust am weitermachen verloren. Die Arbeit mit sndwch ist aber sowieso auf den PC ausgerichtet, da gibt es keine Einschränkungen, die das Scrollen und Elemente verschieben behindern.

Was sind eigentlich html Blocks?

Die Idee, die sndwch überhaupt erst möglich gemacht hat, gibt die Syntax von html vor. Die strikte Trennung von Inhalt und Gestaltung tut das seinige dazu. Ganz einfach erklärt, beginnt ein Block mit einem <div> und endet mit dem abschließenden </div>. Dasselbe in grün bei Überschriften <h2>Überschrift</h2> oder bei Texten <p>Text</p>. Unterm Strich resultiert daraus ein abgeschlossenes Blockelement, zu sehen im nachfolgenden Screenshot.

Image

Daraus resultiert ein Block mit drei Spalten (siehe oben im Preview-Mode unter dem Header).

Image

Online-Version / Download

Link zu sndwch online: Die Online-Version von sndwch

Download: Hier kannst du sndwch herunterladen
Beachte beim Download die nachfolgenden Punkte:

Rechtliches zum Download: Die mit sndwch erzeugten html-Seiten können frei verwendet werden. Ebenso alle CSS und js-Dateien, sofern für diese inzwischen keine abweichenden Lizenzen der Hersteller gelten. Das sndwch-Paket als solches darf allerdings weder weiterverkauft, noch unter einem anderen Namen, oder einer anderen Domain online veröffentlicht werden.

Legal for download: The html pages created with sndwch can be used freely. Likewise, all CSS and js files, provided that no different manufacturer licenses apply to them. However, the sndwch package as such may not be resold, published online under another name or under a different domain.