Frontend Frameworks – Teil 3

Frontend Frameworks – Teil 3

Im dritten Teil unserer Frontend Framework Reihe kommen wir zu den etwas anspruchsvolleren Frameworks, die eher für Leute mit Berufserfahrung als Developer angemessen sind.

Da hätten wir zum einen Foundation, welches von Großunternehmen wie eBay, Facebook oder Mozilla benutzt wird. Dieses Framework unterstützt GPU Beschleunigungen, was gleichmäßige und blitzschnelle Animationen ermöglicht. Ebenso hat es keine Lock-In bei Styles, sodass man flexibler arbeiten kann. Zudem benutzt es REMS statt Pixel. Das hat den Nutzen, dass man sich nicht an bestimmte Höhen oder Breiten bei jedem Endgerät richten muss.

Foundation gilt als Framework für Entwickler mit einem gewissen Erfahrungspensum, die vor Allem schnelle, reaktionsfähige Webseiten programmieren.

 

Sucht ihr nach einem Framework, mit dem ihr simpel Google’s Material Design Richtlinien befolgt, dann macht ihr mit Material UI nichts falsch, denn es ist das am besten ausgearbeitete Framework, um die Richtlinien umzusetzen. Aber: es ist kein geeigneter Ansatzpunkt, um ein neues Webdesign Projekt aufzusetzen.

Mit gebrauchsfertigen CSS- und Materialdesign-kompatiblen Klassen beladen, wird Material UI auf dem LESS Preprocessor aufgebaut. Weil es React-Komponenten verwendet, ist ein gewisses Verständnis von React hilfreich.

Absolut bezeichnend für dieses Framework ist, dass es individuell anpassbare Stile enthält, die in einzelne Dateien getrennt sind. So können Sie LESS CSS-Variablen überschreiben, ohne Framework-Komponenten zu beeinflussen.

Insgesamt ist es daher für Entwickler geeignet, die Erfahrung mit React.js haben und einen einfachen Weg einschlagen wollen, um die Material Design Richtlinien umzusetzen.

 

Entwickelt von Yahoo Developern ist Pure ein Framework, mit dem man so gut wie jedes Projekt angehen kann. Mit einem Array an CSS Modulen kann man mit Pure reaktionsfähige Buttons, Menüs, Grids, Tabellen und anderen interessanten Features kreieren. Dennoch ist hierbei zu beachten, dass momentan noch keine jQuery oder JavaScript PlugIns dafür vorhanden sind, da das Framework Pure ausschließlich .css Dateien umfasst.

Wenn es mit Gzip minimiert und komprimiert wird, verkleinert sich die Dateigröße bereits auf 4,75 kB, was es zu einem der schnellsten, platzsparendsten und geschicktesten Frameworks macht. Das ist der Grund, weshalb gerade so viele Mobile Developer so begeistert von Pure sind.

Folglich ideal für Entwickler, die sich mit Responsive Development beschäftigen.

 

UIKit ist ein höchst modulares Framework, welches sich von anderen Frontend Frameworks hervorhebt. Einer der vielen Gründe hierbei ist wohl, dass es sich SASS CSS preprocessors und LESS gleichsam bedient.
Mit einer Anordnung von leichten, reaktionsfähigen Klassen mit den gleichbleibend, gleichnamigen conventions wurde UIKit zu einem der beliebtesten Frontend Frameworks.
Durch die 30 modularen und erweiterbaren Komponenten kann es kombiniert werden, um noch mehr Einsatzflexibilität zu bieten.

Es enthält Navigationskomponenten wie side navigation bars, Elemente wie HTML-Formulare und Tabellen, JavaScript-Komponenten wie Off-Canvas-Bars und modale Dialoge; verbreitete Elemente wie Buttons, Abzeichen, Overlays und Layoutkomponenten, einschließlich eines flüssigen, vollständig ansprechenden Grids.

Das Framework hat zwar unglaublich viel an Angebot zu bieten, ist jedoch durch seinen relativ neuen Status für Beginner nicht zwingend geeignet, da es dementsprechend wenige Entwickler gibt, die damit schon repräsentative Projekte oder Tutorials dazu angefertigt haben.
Daher stehen hier Möglichkeiten gegen die Schwierigkeit des Neuheitsgrades. Folglich ist es besser, wenn sich Entwickler mit einer ansehnlichen Erfahrung an Programmierung daran versuchen. Letzten Endes ist es ein sagenhaftes Framework für simple sowie für komplexe Projekte und eine echte Alternative mit viel Nutzungspotential.

 

Für Diejenigen unter uns, die besondere Layout Bedürfnisse haben, ist Susy ein geeignetes Tool. Der Begriff Tool fällt hier deshalb, weil viele Susy als Grid Maker klassifizieren. Dennoch rüstet dieses Layout Tool einen unabdingbar für individuelle, anspruchsvolle und kreative Layout Wünsche auf. Es übernimmt alle Kalkulationen für den Benutzer, sodass man viel an Zeit und Energie spart.

 

 

Alles in Einem sollte die Entscheidung, welches Framework man verwenden möchte, nicht auf ihrer Beliebtheit beruhen, sondern vielmehr darauf, was für den Bedarf der Entwicklung am besten passt.

 

 

Hilfreiche jQuery / Javascript Plugins – Teil 4

Hilfreiche jQuery / Javascript Plugins – Teil 4

Heute stellen wir euch ein paar der jQuery Plugins für den Frontend Bereich vor, die wir persönlich für kreativ und nützlich erachten und warum.

  • Material Design Hierarchical Display
    Wenn ihr dem Link, unterlegt im Bild, folgt, seht ihr wie aus vielen verschiedenen Elementen, ein einziges großes entsteht. An den Beispielen könnt ihr euch mit den Animationseffekten ausprobieren. In jedem Fall ist hier ein einschlägiger Effekt gegeben, wenn man diese Plugins auf Internetshops als Logo oder auf Unternehmenswebsites nutzt. Der Kreativität sind dabei keine Grenzen gesetzt, denn sowohl Effekte als auch Elementenanordnung und ob man aus vielen kleinen überhaupt ein großes zusammenhängendes machen möchte, sind individuell gestaltbar.

Einen Einblick in den Code seht ihr hier:

Mit 2 Zeilen ist diese Codierung also recht kurz und simpel gehalten, erzielt aber einen einschlägigen Effekt für einen professionellen Internet-Auftritt.

  • TwentyTwenty

    Das perfekte Plugin, um einen Vergleich zwischen zwei Aspekten visuell hervorzuheben.
    Das Tool sorgt dafür, dass man zwei Bilder übereinander legen kann, ohne dass man zwei Bilder nebeneinander posten muss. Dabei kann man ganz einfach mittels eines Sliders das obere Bild schieben, um das untere zu sehen. Das eignet sich optimal für Vergleiche, in dem man diverse Änderungen an Gebäuden beispielsweise darstellen möchte. Durch den Slider bestimmt man selbst bis zu welchem Abschnitt man das obere Bild zur Seite schiebt und wie viel man vom anderen, unten gelegenen, offenbart. Somit kann man ganz genau Stück für Stück die übereinander liegenden Bilder live miteinander vergleichen. Für einen Vorher/Nachher-Effekt ideal.
    Hier der Code dazu:
  • RoundSlider

Hier haben wir einen Slider, den man ebenfalls individuell designen kann und für verschiedene Zwecke für sich nutzen kann. Auch hier sind Online-Shops als Beispiel zu nennen. Diese haben des Öfteren Funktionen, mit denen man die Mindest- sowie Maximal-Preishöhe einstellen kann. Dafür sind die modern gestalteten Slider ein Blickfang. Auch bei Abbildungen von Prozentzahlen können die Slider eine innovative Darstellungsform bieten, sodass man sich von anderen digitalen Präsenzen unterscheidet.
Hier könnt ihr euch die verschiedenen Optionen der Slides ansehen:

Das waren einige wenige Plugin Beispiele, in die man sich sowohl von der Programmierer-Seite als auch von einem unternehmerischen Standpunkt aus einarbeiten kann. Simple Codierung mit prägnantem Effekt durch Animation und Design ergeben Plugins, die jede digitale Präsenz nach Außen entsprechend vermarkten. In der heutigen Zeit ist das Visuelle aller anderen Vermarktung voraus. Daher lohnt es sich mit den einfachsten Mitteln auf Blickfang zu setzen.

 

Hilfreiche jQuery/Javascript Plugins – Teil 3

Hilfreiche jQuery/Javascript Plugins – Teil 3

Willkommen zum dritten Teil unserer JS/jQuery Reihe. Wie immer gibt es eine Aufteilung zwischen Front- und Backend.

Frontend

  • Hamburgers

    null
    Hamburger, Cheeseburger, Big Mac! Hamburgers ist ein JS Plugin, das einem verhilft den berühmten Hamburger Button zu erstellen. Man hat eine große Vielfalt an vordefinierten Buttons mit schönen Animationen. Alles ist CSS basierend und somit gut anpassbar. Das Beste daran ist die Länge und Komplexität des Codes:

  • superplaceholder

    superplaceholder
    Sehr schönes Plugin, womit man mit wenig Code das Befüllen von Feldern animieren kann. Es ist sehr gut animiert und dazu kleiner als 1 kb. Ein nützliches Gimmick für Seiten mit Suchfunktionen.

  • vivus

    vivus
    Wir haben zwar bereits ein SVG Plugin vorgestellt, doch dieses ist einfach genial. Es besitzt 3 verschiedene Animationstypen (Delayed, Asnyc und OneByOne), die jede Darstellung von SVGs zu einem Erlebnis machen. Sogar das Problem, des richtigen Timings wird von dem Plugin gelöst. Es gibt diverse Timing Funktionen, die sich an das SVG anpassen lassen und die Animation perfekt aussehen lassen. Ein Blick darauf lohnt sich!

  • A-FRAME

    A-Frame
    Virtual Reality, eine Technik die in aller Munde ist. Mit A-Frame kann jeder VR auf seine Seite integrieren, und das so unglaublich simpel. Es gibt eine große Anzahl an vordefinierten 3D-Formen, die man mit zwei Zeilen Code einbinden kann. Weiterhin kann man selbst Formen erstellen, 3D Bilder animieren und, und, und. Mit diesem Plugin kann man definitiv Aufmerksamkeit erregen.

Backend

  • clipboard.js

    clipboard.js
    Die wirklich einfachste Methode dem Benutzer einen „Copy to Clipboard“ Button zu geben. Der User muss nicht immer und immer wieder Texte markieren, alles per Knopfdruck, direkt in seine „Clipboard“. Sehr nützlich für Seiten, bei denen die Markierfunktion unterdrückt wird.

Hilfreiche jQuery/Javascript Plugins – Teil 2

Hilfreiche jQuery/Javascript Plugins – Teil 2

Heute geht es weiter mit der JQuery/JS Plugin Reihe. Der Beitrag ist wieder in Frontend und Backend unterteilt.

Frontend:

  • JinvertScroll

    Adieu langweiliges Scroll-Down, ahoi innovatives Side Scrolling. Das Plugin ermöglicht es einem mit wenig Aufwand einen Sidescroll Effekt zu erzeugen, der etwas an das Metro Menü in Windows 8 erinnert. Das Ganze hat auch einen Parallax Effekt und wirkt somit umso schöner.

  • Animsition


    Ihr habt es satt auf einen Link zu klicken und einen normalen Seitenaufbau zu sehen? Animsition tut etwas dagegen. Mit diesem kleinen Plugin ist es möglich Webseiten beim Laden einen CSS Effekt ausführen zu lassen. Derzeit sind 58 Effekte vordefiniert, die verschiedene Fade Effekte beinhalten, als auch Rotate und Flip. Es lohnt sich reinzuschauen!

  • Photopile JS


    Jeder kennt sie, jeder nutzt sie aber will sie auch jeder? Es geht um die Imagegallery, meistens ein Grid mit mehreren Bildern. Photopile schafft diese Mechanik ab und erstellt einen zusammengewürfelten Haufen aus Fotos, der schön animiert ist. Sehr empfehlenswert für unkonventionelle Fotoausstellungen.

  • Splitchar


    Einfarbige Fonts sind gestern gewesen. Splitchar erlaubt es euch euren Fonts mehrere Farben zu geben und das sowohl vertikal als auch horizontal.

Backend

  • BttrLazyLoading


    Dieses Plugin ist schwer in einem der beiden Bereiche einzuordnen. Die Hauptfunktion ist ein verzögertes Laden von Bilder. Diese werden erst dann geladen, wenn sie in den Viewport kommen. Das hat den Vorteil, dass Webseiten sich viel schneller aufbauen und bei mobilen Endgeräten das Datenvolumen gespart werden kann. Es ist komplett responsiv und Retina ready. Weiterhin gibt es diverse Einstellungen, die man tätigen kann um die Effekte von der Bildanzeige anzupassen. Sehr gelungenes Plugin!

  • Face Detection


    Facetagging gesucht, Facetagging gefunden! Mit Face Detection könnt ihr mit extrem wenig Code die Gesichter auf Bilder auslesen. Das Plugin liefert euch ein „Face“ Objekt mit Koordinaten, Höhe und Breite. Diese können für verschiedene Dinge genutzt werden, wie im Bild zu sehen ist.

  • SVGMagic


    SVGMagic ist zwar sehr simpel aber trotzdem sehr mächtig. Es ist ein Muss für Webseiten, die ältere Browser supporten sollen. Das Plugin checkt ob der Browser SVG Bilder unterstützt, wenn dem nicht so ist wandelt es alle Bilder direkt in PNG Bilder um und das im Grunde genommen ohne Qualitätsverlust.

Wie immer, wenn ihr weitere gute Plugins kennt einfach in die Kommentare schreiben.