Fertige Layouts - vorerst fertig!

[Matthias Scharwies]

Servus!

Hallo Matthias,

Find ich gut. Ich würde das gerne unterstützen, weiß nur noch nicht genau wie.

Kein Problem! Vielen Dank im Voraus!

Wenn es so sein soll, wie Zen-Garden, wäre wahrscheinlich eine Uploadmöglichkeit notwendig und in irgendeiner Weise eine Administration, damit niemand irgendeinen Blödsinn hochlädt?

Ja, und da haben wir die zweite Möglichkeit. Die erste (2014 realisierte) war das Hosten im Beispiel-Namensraum wie z.B. dieses noch nicht gelöschte Beispiel. Problem war hier, dass alle Links und Referenzierungen von Stylesheets und Grafiken an das Wiki angepasst werden mussten, sodass man alle Beispiele gegenüber den ZIP-Dateien umarbeiten musste. Diese Beispiele im Wiki darfst du jetzt ändern, bzw. neue erstellen.

Abweichend davon werden die Layoutvorlagen auf src.selhtml.org gehostet, sodass die Ordnerstruktur des Bespiels und des ZIP-Datei gleichbleibt:

/css
/img
index.html
kontakt.html
unterseite.html

Deshalb habe ich die Layoutvorlagen für den peer review privat gehostet und durch @Felix Riesterer und @marctrix korrigieren lassen. Erst wenn 3-5 fertige Layouts wirklich veröffentlichungswürdig waren, habe ich sie @Camping_RIDER geschickt, der neben @dedlfix den Zugang zu den Servern hat.

So würde ich auch weiterhin verfahren. Wenn es Änderungen gibt, 2-3 Layouts sammeln und dann wegschicken.

*nur als Anregung
*Dann noch ein Vorschlag zum Designswitcher (funktioniert übrigens nicht im IE lokal, noch nicht zu gekommen das zu ergründen), vielleicht lässt sich der irgendwie anders integrieren und Defaultwert im CSS setzen, habe ich aber auch noch keinen genauen Vorschlag zu.

Ja, evtl. sollte das localStorage rausgenommen werden und anfangs immer das Standard-Stylesheet geladen werden. Ich hatte teilweise nach 2 Wochen Pause das industrial-Theme drin gehabt und gleich Augenkrebs bekommen. Der Stylesheetwechlser in der Visitenkarte arbeitet nach dem Zufallsprinzip, bringt teilweise bei Klick auf den Button das gleiche Stylesheet noch einmal. Hier wäre eine auswahl "Ziehen-ohne-Zurücklegen" eine Option.

Und, das HTML vielleicht noch was weniger vorgeben, tat mich etwas schwer mit dem Headerinhalt, besonders Logo/H1/IMG.*

Das widerspricht ja der Idee des CSS-Garten. Andererseits muss ja nicht alles in diesem Beispiel realisiert werden, sondern es kann und sollte neben den 10 Designen-lassen-Entwürfen auch weitere geben. Die Wiki-Beispiele sollen halt nur ein Problem anschaulich zeigen; die fertigen Layouts sollen eine ganze Seite zeigen.

Ich hab's jetzt mal extern versucht und muss sagen, puhh… gar nicht so einfach, wenn man nur das CSS ändern möchte und keinen Einfluss auf HTML und JS hat. Dabei ging es mir bei meinem Versuch gar nicht ums Design sondern um den allseits beliebten und von Handynutzern gewöhnten Hamburger-Button.

Dein Beispiel ist sehr cool!!

Nun gibt's zwar etliche Möglichkeiten, dass irgendwie hinzukriegen, aber mit minimalem Code und ohne Zugriff aufs HTML doch problematisch. Also habe ich ein wenig experimentiert und bin zu einer Lösung gelangt, deren Tauglichkeit ich noch nicht einschätzen kann, daher bitte Feedback von euch. Problem dabei war, display:none; wäre mir entgegengekommen aber nicht barrierefrei, mit visibility als Alternative machbar, aber der reservierte Platz war zuviel, so habe ich im hidden-modus die Textgrösse auf 1px gesetzt(hoffe das gilt noch als barrierefrei?).

Im Wiki gibt's den von Chris Coyier (Link unter dem Artikel) entnommenen Code-Schnipsel:

.ohne-text { 
  border: 0; 
  font: 0/0 a; 
  text-shadow: none; 
  color: transparent; 
}

Na ja, bevor ich hier noch lange schreibe, hier mal der erste Entwurf.

*edit: Habe zwar das standard-css geändert, aber gerade beim Testen gemerkt, manche (Handy)Browser benötigen wohl nochmal die Bestätigung, also auf der Hauptseite am besten nochmal Hamburger-Design auswählen, damit die anderen Seiten das übernehmen.

Nochmal, das gefällt mir sehr gut! Ich hatte mir 2010 angewöhnt, die Navigation an den Schluss zu setzen und dann absolut im Header zu positionieren. Mitterweile hat z.B. die Washington Post auch bei breiteren Viewports eine schmale, vertikale Leiste (links) mit Icons zu den einzelnen Sektionen (Finde ich jetzt aber grad nicht. 😟).

Herzliche Grüße

Matthias Scharwies