Everything from:HTML + CSS

Einen WordPress Artikel via API und jQuery (…oder PHP) in HTML ausgeben


API´s und „Headless“ CMS sind in aller Munde. Auch WordPress stellt schon seit längerem Inhalte per REST API im JSON Format zur Verfügung. Die Einsatzszenarios sind für eine solche Verwendung vielfältig: Der Inhalt einer statischen Landingpage kann vom Redaktionsteam in der gewohnten WordPress Umgebung bearbeitet werden. Kein Entwickler muss mehr beauftragt werden. Oder es können Blog Beiträge in einem anderen PHP System (z.B. einer anderen WordPress Instanz, gerne aber auch Joomla oder Drupal) ausgegeben werden. React, Angular oder Vue.js Anwendungen können mit Inhalten bestückt werden usw. usw. Kurz gesagt: Das erfassen von Inhalten und deren Ausgabe kann komplett getrennt werden. Das Frontend kann auf einem beliebigen Technologie-Stack basieren und in einer beliebiegen Umgebung laufen. Zeit also für ein kleines Experiment: […]

Weiterlesen…

Mit verschiedenen Maßeinheiten in CSS rechnen: Die calc() Funktion


Will man in seinem Stylesheet Berechnungen anstellen denkt man heutzutage sofort an SASS oder „zumindest“ LESS. Schließlich kann man hier komplexe Formeln hinterlegen und mit Variablen arbeiten und so ein komplettes Layout mit wenigen Anpassungen neu „ausrechnen“. Aber SASS und LESS sind eben Präprozessoren. Sie stellen die Berechnung an lange bevor das Stylesheet im Browser des Users geladen wird. Was 100% Breite in Pixeln bedeutet, oder 100px in Prozent weiß zu diesem Zeitpunkt niemand. Schließlich hängt das ja von dem individuellen Endgerät ab. Relative und absolute Werte können so also nicht zusammen berechnet werden. So etwas wie: .a{ height: (100% + 100px); } kann z.B. in SASS nicht funktionieren. Schließlich sind 100% + 100px auf einem Smartphone etwas komplett anderes […]

Weiterlesen…

SASS für Einsteiger – Teil1: Hintergründe & Installation


Jeder der gerne und viel mit CSS arbeitet kommt früher oder später an gewisse Grenzen. Insbesondere wenn man mit mehreren Personen zusammen an größeren Projekten arbeitet. Aber auch bei kleinen Projekten gibt es immer wieder diese Momente in denen man denkt: „Das könnte auch einfacher und logischer sein“. Und: „Warum muss ich dass alles immer wieder und wieder eingeben?“ Hier kommt SASS ins Spiel. SASS steht für „Syntactically Awesome StyleSheets“ und ist ein sogenannter CSS Präprozessor. Präprozessor weil aus einer SASS Datei eine CSS Datei erzeugt wird, BEVOR diese auf dem eigentlichen Server zum Einsatz kommt. Es geht also nicht darum irgendetwas auf Server- oder Clientseite zu verbessern oder zu optimieren. Es geht darum schneller, einfacher, effektiver und besser CSS […]

Weiterlesen…

Gulp Basics: Ein Einsteiger Tutorial


Gulp.js ist ein sogenannter „Task Runner“, oder auch, wie sich Gulp selber nennt, ein „streaming build system“. Kurz gesagt: Es übernimmt nervige, immer wiederkehrende Aufgaben in der Frontend Entwicklung, automatisiert und erweitert diese. Typische Tasks können beispielsweise die Optimierung von Bildern fürs Web, minifizieren von JavaScript Dateien oder das Kompilieren von SASS Dateien in CSS sein. All dies kann, wenn ein entsprechender Gulp Task angelegt wurde, mit einem kurzen Befehl auf der Kommandozeile erledigt werden. Bei Bedarf können auch beliebige Tasks kombiniert werden, so dass ein einziger Befehl reicht eine Webseite „ausgeh-fein“ zu machen und auf den Server zu schieben. Was wird benötigt um Gulp zu nutzen? Um Gulp nutzen zu können muss selbstverständlich Gulp installiert sein. Dazu braucht man […]

Weiterlesen…

Externe Links als solche kennzeichnen – Mit JavaScript und CSS


„Verwirre den User…NICHT!“ So oder so ähnlich lautet einer der obersten Grundsätze des User Interface Designs. Wir sind Gewohnheitstiere. Wir wollen das etwas so funktioniert wie es das schon immer getan hat. Bei den meisten UI Elementen ist das relativ klar. Gerade jedoch ein einfacher externer Link kann da Überraschungen bergen. Klickt man drauf kann man entweder auf einer gänzlich anderen Internetseite landen, oder innerhalb der gerade besuchten Domäne hin und her springen. Was genau passiert weiß man erst hinterher. Um eben diese Verwirrung des Users zu vermeiden gehen viele Seitenbetreiber den Weg, einen externen Link eben auch als solchen zu kennzeichnen. Zum Beispiel mit einem kleinen Icon dahinter. Auf meiner Seite sehen externe Links z.B. so aus: Link auf […]

Weiterlesen…

Der nth-child() Pseudoselektor – Selten genutztes CSS #2


Im zweiten Teil meiner kleinen Serie „Selten genutztes CSS“ geht es um den nth-child() (Pseudo-) Selektor. Ein Selektor den ich zwar häufig genutzt, aber wenn ich ehrlich bin eigentlich nie grundlegend verstanden habe. Bis jetzt zumindest… Und was zum Teufel ist nun ein nth-child? Wie der Ausdruck „child“ schon andeutet geht es hierbei um die Auswahl bestimmter „Kinder“ eines Elternelements, um diese per CSS zu stylen. Genauer gesagt um das „n-te“ Kind. Im selfhtml.wiki wird es korrekter so ausgedrückt: Der Selektor erwartet als Argument einen mathematischen Ausdruck, der einer arithmetischen Zahlenfolge mit ganzzahligen Koeffizienten entspricht. Klingt kompliziert, daher hier einige… Praktische Beispiele Fangen wir mal ganz einfach an: ul.menu li:nth-child(3n) { color: red; } Damit wird der Text jedes dritten […]

Weiterlesen…

Der not() Selektor – Selten genutztes CSS #1


CSS ist mächtig. CSS ist allgegenwärtig. CSS ist mein täglich Brot. Dennoch (oder gerade deshalb) bin ich immer wieder überrascht das es doch noch das ein oder andere zu lernen gibt. Unbekannte Selektoren, seltsame Properties und noch nie genutzte Values. Damit ich (und ihr?) noch etwas lerne, werde ich hier eine kleine Serie von (zumindest mir) bis dato unbekannten Arbeitsweisen, Funktionen und Techniken mit CSS starten. Fangen wir mal mit einem Selektor an, der mir über die Jahre sicherlich eine ganze Menge Arbeit abgenommen hätte: Der :not() Selektor. Kurz gesagt: Damit wählt man ein Element aus das NICHT eine bestimmte Klasse hat. Man macht also genau das Gegenteil davon, wofür Selektoren eigentlich genutzt werden. Folgendes HTML Beispiel: <ul class=“samplemenu“> <li>Home</li> […]

Weiterlesen…

Ein Vimeo oder YouTube Video “responsive” einbinden


“Responsive” Webdesign ist heute in aller Munde. Um es auch den Schlagwort-Unwissenden kurz zu erklären: “Responsive” bedeutet in Bezug auf eine Internetseite im Prinzip nur, dass sich Layout und Design selbstständig an die Größe des Displays des Nutzers anpasst, egal ob dieser nun mit einem Handy, einem Tablet PC oder einem normalen Monitor surft. Es gibt also nicht mehr, wie in den Anfängen des mobilen Webdesigns, extra Versionen der Internetseite für Handys und andere Geräte, sondern nur eine Version. Das ist zeitsparend, da nicht verschiedene Versionen entwickelt und betreut werden müssen und zukunftssicherer, da die Seite auch automatisch mit der nächsten Generation von Mobiltelefonen funktioniert. Wichtig ist dabei jedoch das sich alle verwendeten Elemente skalieren lassen. Das ist mit Hilfe […]

Weiterlesen…