Page Comparison

...

Die Seite “HTML Templates” kann von Nutzern Benutzer:innen mit Zugang zur Administration & Moderation (Berechtigung “Zugang zur Verwaltungsübersicht”) aufgerufen werden.

...

...

Thematische Unterteilung

Die Vorlagen und Codes sind thematisch in folgende Tabs aufgeteilt:

• Templates: Best-Practice-Vorlagen für Teaser

• Responsive Grid: Erklärungen und Codes für das responsive Grid-Layout

• CSS & HTML: Nützliche CSS-Klassen & HTML-Elemente aus dem Framework

• Icons: Erklärungen, Codes sowie eine Auswahl an Icons

...

^{Tab “Templates” mit Best-Practice-Vorlagen für Teaser}

...

Templates

Im Tab “Templates” werden Best-Practice-Vorlagen zur Verfügung gestellt. Die Vorschau der Gestaltungsvorlage hilft dabei, ein passendes Design beispielsweise für einen Teaser zu wählen. Mit nur einem Klick kann der Code für das jeweilige Template kopiert werden, um es an der gewünschten Stelle im PORTAL einzubinden. Hier müssen dann noch die Platzhalter entsprechend ersetzt werden. Außerdem können beispielsweise die Teaser-Templates mit zusätzlichen CSS-Klassen und HTML-Elementen nach Belieben kombiniert werden.

Wie mit den HTML Templates ganz einfach eine ein Teaser erstellt und über das Teasermanagement an relevanten Stellen im PORTAL verteilt werden kann, wird in diesem kurzen Video-Tutorial gezeigt:

...

Im Tab “Responsive Grid” werden verschiedene Grids mit farbigen Rändern angezeigt, um die Funktionsweise des Grid-Layouts zu verdeutlichen. Die Ränder werden nicht angezeigt, wenn der HTML-Code kopiert wird.

Benutzer:innen können die Größe ihres Browserfensters anpassen (Strg + Umschalt + M bzw. Strg + Umschalt + I), um die verschiedenen Rastergrößen an verschiedenen Break-Points (small, large) anzuzeigen.

...

Im Tab “CSS & HTML” sind die Codes von ausgewählten CSS-Klassen und deren verschiedene sizes und styles aus unserer der PEIQ Kitchen Sink zur Verfügung gestellt:

• Brand (Logo des PortalsPORTALs)

• Buttons

• Blockquote <blockquote> & <cite>

• Details <details> & <summary>

• Colors (Color & Background)

• Callouts

...