de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Machen Sie alle eingebetteten Inhalte mit Reframe.js Responsive

Der schwierigste Teil beim Einbetten von Videos ist, dass die Breite und Höhe korrekt sind. Diese Zahlen definieren das Seitenverhältnis und wenn sie ausgeschaltet sind, erhalten Sie einen wackeligen Videoplayer .

Dies gilt für alle eingebetteten Elemente wie Iframes und Social Media-Widgets. Und diese Dinge können mit Responsive Design noch kniffliger sein, weil sie normalerweise keine reagierenden Elemente sind .

Mit Reframe.js können Sie jedes Element für jedes Seitenverhältnis anpassen .

Dies ist vielleicht eines der einfachsten und wertvollsten JS-Plugins im Internet. Es wurde von Dollar Shave Club erstellt, der überraschenderweise eine eigene GitHub-Seite hat.

Reframe ist eines ihrer kostenlosen Plugins für Entwickler, die einen einfacheren Umgang mit Responsive Embedded Content wünschen.

Der offensichtliche Täter ist eingebettetes Video von Seiten wie YouTube und Vimeo. Es ist notorisch schwierig, diese Elemente ohne CSS-Hacks ansprechend zu machen .

Mit Reframe.js wählen Sie einfach das Element aus, das Sie anvisieren möchten, und wählen es mit der Funktion reframe() .

Beginnen Sie mit dem Hinzufügen des Reframe.js-Plugins zu Ihrer Webseite. Sie können eine Kopie von GitHub herunterladen, und es ist nur 1 KB minimiert.

Dann übergeben Sie der Funktion einfach einen Selektor für alle Elemente, die Sie neu zuordnen möchten. Lade die Seite und den Boom! Du solltest alles vorbereitet sein.

Angenommen, Sie haben ein paar Videos auf Ihrer Website eingebettet. Sie können der Einbettung die Klasse .video hinzufügen und diese als Selektor verwenden. Reframe fügt automatisch ein div und eine Klasse hinzu, um den responsiven Stil zu erstellen.

So würde Ihr JavaScript-Code wie folgt aussehen:

 Reframe ('. Video'); 

Ziemlich einfach, oder?

Dieser Code zielt auf alle Elemente mit der Klasse .video und macht sie .video . Keine zusätzlichen Hacks, kein extra CSS. Zugegeben, es ist nichts falsch daran, die CSS-Methode zu verwenden, aber Sie müssen alle eingebetteten Videos manuell mit der zusätzlichen Klasse umbrechen.

Reframe erspart Ihnen nur diesen zusätzlichen Schritt und bringt alles mit JavaScript. Besuchen Sie die Reframe.js-Homepage, um eine Demoversion zu sehen und einige grundlegende Code-Snippets zu finden . Sie können eine Kopie des Codes direkt aus dem GitHub Repo herunterladen .

9 Frauen, die verändert haben, wie wir das Internet nutzen

9 Frauen, die verändert haben, wie wir das Internet nutzen

Die Vielfalt in Technologieunternehmen ist eines der heißesten Themen im Cyberspace und zeigt keine Anzeichen dafür, dass sie aussterben. Dies wird hauptsächlich von den größten Tech-Konzernen wie Facebook, Twitter und Google ausgelöst, die ihre Diversity-Daten zu Arbeitern veröffentlichen, was eine neue Debatte darüber entfacht, warum nicht mehr Frauen in der Technologie arbeiten. Es hat

(Tech- und Design-Tipps)

So erstellen Sie einen Blog mit Jekyll - Ein Anfängerhandbuch

So erstellen Sie einen Blog mit Jekyll - Ein Anfängerhandbuch

WordPress, die demütig als Blogging-Plattform gestartet ist, hat sich nun in ein vollwertiges und sehr beliebtes CMS verwandelt. Mit WordPress können Sie (fast) jede Art von Website erstellen, von einem Portfolio bis zu einer E-Commerce-Website.Aber was ist, wenn Sie nur über das Bloggen besorgt sind, und Sie brauchen nicht vollgepackte Funktionen in WordPress wie benutzerdefinierte Taxonomie, Benutzerverwaltung, Kommentarmoderation und einen netten Medien-Uploader?Ku

(Tech- und Design-Tipps)