Benutzer:MScharwies/Konzept für neue Templates

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Hinweis

neues Konzept für unsere Templates, die evtl. wieder fertige Layouts heißen sollen. --Matthias Scharwies (Diskussion) 13:57, 12. Aug. 2016 (CEST)

Die CSS/Templates im Wiki sind nicht optimal.

Die 10 "Gewinner" des Designen-Lassen-Wettbewerbs haben …

  • zwar optisch bunte Startseiten, aber keine inhaltlich gute Seitenaufteilung
  • mangelhafte Unterseiten
  • viele Bilder (die sowieso nicht übernommen werden können)


Neues Konzept[Bearbeiten]

Die bisherigen fertigen Layouts werden überarbeitet

  • viele vendor-prefixes entfernt, da nicht mehr nötig
  • kein <li class="active"> sondern <a aria-current="page">
  • keine Hintergrundbilder
  • html5-shiv entfernt
  • skiplinks einfügen
  • evtl auch mit flex und grid

Erweiterung durch 3-4 eigene Vorlagen, die mit Buchstaben gekennzeichnet werden und vor den bisherigen Layouts platziert werden.

Selfhtml-Zen Garden[Bearbeiten]

EIN Template A mit gleichen Unterseiten:

  • Startseite (evtl. mit Pseudoelement mit content="Skin-name")
  • Inhaltsseite (siehe evtl. Beispiel) mit Text + Bildern (Bilder nur als dummy-1.png, dummy-2.png, etc)
  • Tabelle für Termine
  • Impressum + Kontakt

CSS[Bearbeiten]

NEUN Skins für das Template

  • im Wiki mit JS-styleswitcher, (als Zip ohne JS ?)
  • mobile-first-Ansatz, der auch als Fallback für ältere Browser verwendet werden kann
  • inklusive Print-Layout mit @media print {}
  • verschiedene Layout-Modelle:
    • liquid layout
    • flex
    • grid
  • verschiedene Grafik-Stile:

Webvisitenkarte[Bearbeiten]

Vorschläge erbeten

SPA[Bearbeiten]

Vorschläge erbeten

Umsetzung[Bearbeiten]

ZIP-Ordner und Beispielseiten werden nicht mehr auf jsr-hersbruck.de sondern src.selfhtml.org gehostet, damit die Verlinkungen von Bildern, Unterseiten und CSS-dateien nicht mehr an die Wiki-internen URL angepasst werden müssen.

Beispiele[Bearbeiten]

  1. https://w3layouts.com/optometry-medical-category-flat-bootstrap-responsive-web-template/
  2. Material Design
  3. Geometrische Grundformen
  4. css-tricks: Influencing Web Layouts with Print Layouts

Bsp für Inhaltsseite[Bearbeiten]

Figures.png