Einer der einfachsten Wege, deiner Website tolle Funktionen hinzuzufügen, ist, ein gutes Plugin zu finden und zu verwenden.
Etwa gibt es eine Menge Seiten, die dynamische Effekte nutzen. Um ebenfalls so ein Ergebnis zu erzielen, kannst du ein AOS-Plugin wählen, was für “Animation On Scrolling” steht. Es hat einen Haufen kleiner Effekte in seinem Arsenal. Füge dem gewünschten „div“ einfach die nötigen Klassen hinzu und deine Oberfläche bekommt einen Hauch von Dynamik und die Nutzererfahrung wirkt innovativ. Wenn du ein Parallax brauchst, gibt es tolle Lösungen namens Parallax.js oder Jump.js. Das gleiche gilt, wenn es darum geht, kleine Verbesserungen, wie modale Pop-up Fenster, elegante Kurzinfos oder Vollbild-Videos einzubauen. Es gibt erprobte Methoden für alles. Selbst Dinge, wie Duotone-Effekte, Partikelanimationen oder reponsive Navigationen können mit ein paar simplen Snippets in dein Projekt eingebaut werden. Du musst der Technik noch nicht einmal auf den Grund gehen – erfreue dich einfach an den Vorteilen. Das Plugin mit seiner sorgfälig verschachtelten Funktionalität wird die schweren Gewichte stemmen. In einem Wort: es gibt eine Lösung für jedes Problem, du musst nur ein bisschen suchen.
Um dir dieses Suchen zu ersparen, erstellen wir jedes Jahr eine Liste mit 100 nützlichen Plugins aus verschiedenen Bereichen. Auch dieses Jahr haben wir eine Sammlung von kostenlosen Ressourcen für Webentwickler zusammengestellt, welche dir hilft, dynamische Effekte hinzuzufügen, Animationen zu erstellen, CSS-basierte Filter auf Bilder anzuwenden, und vieles mehr.
Webentwickler haben nie genügend Werkzeug. Denn das Werkzeug entwickelt sich so rasant fort, dass du nie zu dem Punkt gelangst, an dem du aufhören könntest, zu optimieren. Dazu kommt, dass sich Trends ebenso rasch verbreiten. Zu rasch als dass es sich lohnen würde, tief einzusteigen. Nimm lieber ein Tool, dass dir die meiste Arbeit abnimmt, so dass du dich auf deine eigentlich Arbeit konzentrieren kannst. Zeit ist schließlich Geld. Einige solcher moderner Tools für Webentwickler stellen wir dir heute vor.
Sicherlich ist die Erstellung einer Website eine erfreuliche Aufgabe, die im Grunde Spaß macht. Allerdings kommt irgendwann der Punkt in der Umsetzung, an dem es beginnt, anstrengend und langwierig zu werden. Dann nämlich, wenn an den kleine Teilchen, die doch immer wieder gleich oder ähnlich sind, geschraubt werden muss. Das lässt sich zwar nicht vermeiden, aber mit den richtigen Tools doch wenigstens auf ein Minimum verkürzen. Solche Tools zeige ich dir heute.
Kernel.CSS
Dieses leichtgewichtige Framework kann dich beim im Grunde jeden Projekt unterstützen. Dabei ist es unerheblich, ob du einen Prototypen einer Website oder einer App bauen willst.
Erstellt von: ionogy
Lizenz: LICENSE.txt beachten
Flexbox Patterns
CJ Cenizal bringt dir einen ganzen Satz voll tauglicher Muster für Flexbox, die du nur noch verwenden musst. Flexbox ist bei allen Bausteinen im Kern des Geschehens. Du findets Module für Tabs, Header, Feature-Listen und mehr.
Erstellt von: CJ Cenizal
Lizenz: frei für die persönliche und kommerzielle Nutzung, auch in Kundenprojekten
Date Dropper
Bist du auf der Suche nach einer funktionsreichen Date-Picker-Lösung für deine Projekte? Du kannst aufhören, zu suchen. Verwende einfach den Date Dropper. Neben den ganzen Standard-Features bietet er die Möglichkeit beliebiger Sprachlokalisierung.
Erstellt von: Felice Gattuso
Lizenz: MIT License, CC BY 4.0.
Vidlery
Vidlery ist ein neue Website, die dich kostenlos mit Bewegtbildern, vornehmlich Animationen versorgt, die du dann etwa als Hero in deinem Header einsetzen klannst.
Erstellt von: Animations World
Lizenz: CC0 1.0 Universal (CC0 1.0).
CMS.js
CMS.js ist ein Website-Builder auf der Basis von JavaScript, der sich um das Verhübschen und Darstellen deines Contents kümmert. Der Generator liefert dir einen fertigen OnePager.
Erstellt von: cdmedia
Lizenz: MIT-Lizenz, also frei für die persönliche und kommerzielle Nutzung, auch in Kundenprojekten
CSS Peeper
CSSPeeper ist eine dieser Chrome-Extensions, die für Entwickler lebensverlängernd wirken. Mit dem CSSPeeper erhältst du schnellen Zugriff auf Farbwerte, Typografie, Objektgrößen und vieles mehr, was du dir sonst umständlich selber aus dem CSS frickeln müsstest.
Erstellt von: Dawid Mlynarz & Jedrzej Sadowski.
Lizenz: als „Free“ bezeichnet, aber keine exakte Lizenz angegeben
Clippy
Möchtest du interessante Bildmasken verwenden, dafür aber nicht Photoshop anwerfen, sondern das Ganze mit CSS erledigen, dann ist Clippy das Tool, das du benötigst. Das simple Interface dieser Web-App erlaubt dir einfache, aber auch sehr komplexe Maskenformen.
Erstellt von: Bennett Feely
Lizenz: als „Free“ bezeichnet, aber keine exakte Lizenz angegeben
Awsm.css
Igor Adamenko schenkt der Community eine handgeklöppelte CSS-Bibliothek, die dir eine solide Grundlage für deine Projekte liefert. Dabei kommt ausschlißlich modernstes Markup zum Einsatz.
Erstellt von: Igor Adamenko
Lizenz: MIT-Lizenz, also frei für die persönliche und kommerzielle Nutzung, auch in Kundenprojekten
Masonry
Masonry ist eine grlßartige Lösung, wenn du eine Galerie oder dein Portfolio als Grid präsentieren willst. Das Beste an Masonry ist, dass es stets versucht, Bilder mit so wenig Abstand voneinander wie möglich anzuordnen. Dadurch erhältst du sehr kompakte, sehr ansehnliche Darstellungen.
Dave DeSandro
Lizenz: MIT-Lizenz, also frei für die persönliche und kommerzielle Nutzung, auch in Kundenprojekten
Vaunt
Anhand moderner Algorithmen zieht diese einfache App zuverlässig die dominanten Farben aus jedem Bild. Diese kannst du dann per Clipboard in deine Projekte ziehen.
Erstellt von: Guled.
Lizenz: als „Free“ bezeichnet, aber keine exakte Lizenz angegeben
CSS Animate
CSSAnimate ist ein kleiner Generator für Keyframe-Animationen. Du brauchst kein CSS mit der Hand zu schreiben. Das Werkzeug gibt dir bequemen Zugriff auf alle Aspekte moderner Animation im Browser.
Erstellt von: CSSAnimate
Lizenz: Als „Free“ bezeichnet, keine echte Lizenz angegeben.
Mobile Editing
Mobile Editing ist ein quelloffener Pagebuilder, der dir ein komfortables WYSIWYG-Interface liefert, mit dem du deine Designs bauen kannst. Wie der Name verrät, liegt der Einsatzfokus auf mobilen Anwendungen.
Erstellt von: Ben Pines
Lizenz: Frei verwendbar für jeden Zweck
Elementor
Elementor ist ein funktionsreicher Pagebuilder für WordPress-Nutzer. Auch hier gilt, dass keinerlei manuelles Coding erforderlich ist, um beeindruckende Layouts zu erschaffen.
Erstellt von: Ben Pines
Lizenz: Als „Free“ bezeichnet, keine echte Lizenz angegeben.
Simple CSS Media Queries
Mit dieser großen Sammlung an Media Queries kannst du dein Projekt gezielt an viele populäre und weniger populäre Geräte anpassen.
Erstellt von: Simplecss
Lizenz: Als „Free“ bezeichnet, keine echte Lizenz angegeben.
Reframe.js
Reframe.js macht nicht responsive Elemente responsiv. Erdacht für die Verwendung mit iFrames und Videos, belastet das lediglich 1,3 KB große JavaScript-Plugin die Ladezeit deiner Website nur unmerklich.
Erstellt von: Dollar Shave Club Engineering
Lizenz: Als „Free“ bezeichnet, keine echte Lizenz angegeben.
Wait! Animate
Dieses kleine Tool brauchst du nur, wenn du Einfluss auf den Ablauf der von dir erstellten Animationen dergestalt nehmen willst, dass sie benutzerdefinierten Pausen enthalten sollen. Ohne das Werkzeug sind Animationspausen auf den intialen Start der Animation beschränkt. Mit Wait! Animate erstellst du Verzögerungen an beliebiger Stelle.
Erstellt von: EggBox
Lizenz: Als „Free“ bezeichnet, keine echte Lizenz angegeben.
Tachyons
Tachyons ist eine Sammlung wiederverwendbarer Module für das Rapid Prototyping. Damit erstellst du sehr schnell moderne und voll responsive Interfaces, die funktionieren.
Erstellt von: Tachyons-css
Lizenz: Open Source, frei verwendbar für jeden Zweck.
Apostrophe
Apostrophe ist ein neues CMS auf der Basis von Node.js und MongoDB. Der frische Ansatz ist noch sehr rudimentär, aber dennoch mehr als einen kurzen Blick wert.
Erstellt von: P’unk Avenue
Lizenz: Open Source, frei verwendbar für jeden Zweck.
Fontastic
Mit Fontastic generierst du Icon-Fonts aus deinem eigenen Material. Wenn du solches nicht hast, kannst du aus mehr als dreitausend über die Website frei verfügbaren Piktogrammen wählen.
Erstellt von: Fontastic
Lizenz: Als „Free“ bezeichnet, keine echte Lizenz angegeben.
AniJS
Entwickler: dariel_noel.
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Bideo
Entwickler: Rishabh
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
AOS
Entwickler: Michal Sajnóg
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Jump.js
Entwickler: Michael Cavalea
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Bonsai
Entwickler: David Aurelio
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Mo.js
Entwickler: Oleg Solomka
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Snabbt
Entwickler: Daniel Lundin
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Philter
Entwickler: Liudas Dzisevicius
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
CSSFilter
Entwickler: Indrashish Ghosh
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
CSSGram
Entwickler: Una Kravets
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Materialize
Entwickler: Alan Chang
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Grapes.js
Entwickler: Artur Arseniev
Lizenz: 3-Klausel-BSD.
Descartes
Entwickler: Jon H.M. Chan
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Absurd.js
Entwickler: Krasimir Tsonev
Lizenz: Lies die Lizenz.
Picnic CSS
Entwickler: Francisco Presencia
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Intense Image Viewer
Entwickler: Tim Holman
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Zingtouch
Entwickler: Zingchart
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Loud Links
Entwickler: Mahdi.
Lizenz: Siehe LICENSE Datei für Lizenzrechte und Einschränkungen (MIT).
jQuery FormBuilder
Entwickler: Kevin Chappell
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Snap.js
Entwickler: jakiestfu
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Dynamics.js
Entwickler: Michael Villar
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Create.js
Entwickler: Grant Skinner
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Grade.js
Entwickler: Ben Howdle
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Umbrella.js
Entwickler: Francisco Presencia
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Modal
Entwickler: Humaan
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Mobile Editing
Entwickler: Ben Pines
Lizenz: Als kostenlos deklariert, keine Lizenz angegeben
Blend
Entwickler: Colin Keany
Lizenz: Als kostenlos deklariert, keine Lizenz angegeben
Free CSS Generator
Entwickler: simplecss.eu
Lizenz: Als kostenlos deklariert, keine Lizenz angegeben
FormLinter
Entwickler: thoughtbot inc.
Lizenz: Als kostenlos deklariert, keine Lizenz angegeben
LostGrid
Entwickler: Peter Ramsing
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Bootstrap 4 Classes List Reference
Entwickler: Bootstrap Creative LLC
Lizenz: Als kostenlos deklariert, keine Lizenz angegeben
Headroom.js
Entwickler: Jeferson Koslowski
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
PaymentFont
Entwickler: Alexander Manfred Pöllmann.
Lizenz: MIT und SIL OFL 1.1.
DIV Table Generator
Entwickler: wwweeebbb
Lizenz: Als kostenlos deklariert, keine Lizenz angegeben
Hammer.js
Entwickler: Alexander Schmitz, Chris Thoburn, Jorik Tangelder
Lizenz: Als kostenlos deklariert, keine Lizenz angegeben
Kute.js
Entwickler: dnp_theme
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Cleave.js
Entwickler: Max Huang
Lizenz: Apache Lizenz Version 2.0.
Numeral.js
Entwickler: Adam Draper
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
PatternsLib
Entwickler: Cornelis G. A. Kolbach
Lizenz: Lies die Lizenz.
AlloyFinger
Entwickler: dntzhang
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
In-view.js
Entwickler: Cam Wiegert
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Choreographer.js
Entwickler: Christine Cha
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Zenmix.io
Entwickler: Logan Nickleson
Lizenz: Frei für nicht-kommerzielle Zwecke.
Coverr
Entwickler: CodersClan and Veed.Me teams
Lizenz: CC0 1.0 Universal.
Granim.js
Entwickler: Benjamin Blonde
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Plottable.js
Entwickler: Palantir Technologies.
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Eg.js
Entwickler: YongWoo Jeon
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Shave
Entwickler: Dollar Shave Club Engineering.
Lizenz: Als kostenlos deklariert, keine Lizenz angegeben
CSSNano
Entwickler: Ben Briggs
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Useful.ly
Entwickler: Tim Moreton Jr
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
JsPsych
Entwickler: Josh de Leeuw
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
TableFilter
Entwickler: koalyptus
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Blueprint
Entwickler: Palantir Technologies
Lizenz: BSD.
McGriddle
Entwickler: Jonathan Suh
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Choo
Entwickler: Yoshua Wuyts
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Cesium
Entwickler: Analytical Graphics, Inc. (AGI) and Bentley Systems.
Lizenz: Als kostenlos deklariert, keine Lizenz angegeben
Huebee
Entwickler: Metafizzy
Lizenz: Open Source, kommerziell und OEM.
Textpression
Entwickler: Takeshi Takahashi
Lizenz: Als kostenlos deklariert, keine Lizenz angegeben
Timeline.js
Entwickler: KnightLab
Lizenz: Mozilla Public License Version 2.0.
Brick.js
Entwickler: Michael Cavalea
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
CSSCo
Entwickler: Lauren Waller
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Particles.js
Entwickler: Vincent Garreau
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
okayNav jQuery Plugin
Entwickler: VPenkov
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
List.js
Entwickler: Jonny Strömberg
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Balloon.css
Entwickler: Claudio Holanda
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Tasty CSS-animated hamburgers
Entwickler: Jonathan Suh
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Imagehover.css
Entwickler: Ciaran Walsh
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Aleut.css
Entwickler: Knut Melvær
Lizenz: Als kostenlos deklariert, keine Lizenz angegeben
GRD
Entwickler: Shogo Sensui
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Rich.css
Entwickler: Richardson Dackam and numerous contributors
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Bricklayer
Entwickler: Adem Ilter
Lizenz: Lies die Lizenz.
SweetAlert 2
Entwickler: Limon Monte
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Feature.js
Entwickler: Viljami Salminen
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Isomer
Entwickler: Jordan Scales
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Stage.js
Entwickler: Ali Shakiba
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Circles
Entwickler: Lugo Labs
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Progress.js
Entwickler: Afshin Mehrabani
Lizenz: Lies die Lizenz.
Turntable.js
Entwickler: Polar Notion
Lizenz: Als kostenlos deklariert, keine Lizenz angegeben
Flexbox Patterns
Entwickler: CJ Cenizal
Lizenz: Als kostenlos deklariert, keine Lizenz angegeben
Blaze.css
Entwickler: Greg
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Push.js
Entwickler: Tyler Nickerson
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Wait!Animate
Entwickler: Will Stone
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Simple Grid
Entwickler: Zach Cole
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Flexbox Grid
Entwickler: Kristofer Joseph
Lizenz: Apache Lizenz, Version 2.0.
Force.js
Entwickler: René Tanczos
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Driveway
Entwickler: jhey tompkins
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Timesheet.js
Entwickler: Sebastian Müller
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Epoch
Entwickler: Ryan Sandor Richards and contributors
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Vis.js
Entwickler: Almende B.V.
Lizenz: Apache 2.0 und frei verwendbar unter der liberalen MIT-Lizenz
Responsive Nav
Entwickler: Viljami Salminen
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Popper.js
Entwickler: Federico Zivolo & Contributors
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Sly
Entwickler: darsain
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Family.scss
Entwickler: Patrik Affentranger
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Image Hover Effects
Entwickler: Michael Young
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Starability.css
Entwickler: Anna Migas
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Repaintless.css
Entwickler: Anna Migas
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Timedropper
Entwickler: Felice Gattuso
Lizenz: MIT-Lizenz, CC BY 4.0.
Progress Bar.js
Entwickler: Kimmo Brunfeldt
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
Tabslet
Entwickler: Dimitris Krestos
Lizenz: Apache Lizenz.
Cutestrap
Entwickler: Tyler Childs
Lizenz: frei verwendbar unter der liberalen MIT-Lizenz
5 Antworten zu „Die 100 besten Ressourcen für Webentwickler – Plugins, Tools und Lösungen“
— was ist Deine Meinung?
Colle Tools – optisch sehr ansprechend. Aber leider nur javascript und css? im Bereich php möchte ich http://rexo.ch erwähnen – ein Tool, mit welchem sich effizient Webanwendungen schreiben lassen. Ein bisschen gewöhnungsbedürftig, da keine OOP, aber dafür starke Funktionen, welche die Entwicklungszeit drastisch verkürzen. Interessant wäre sicher auch mal eine Übersicht über Webbaukastensysteme. Nur so als Anregung 😉
Vielen Dank für den tollen Artikel. Da sind wirklich interessante Tools dabei, die ich selber gut gebrauchen kann.
Mit besten Grüßen,
Daniel
Vielen Dank. Das ist sehr hilfreich
Das erleichtert mir einiges
Das sind ja interessante Tools, vor allem die Grids und die Hamburger-Effekte werde ich testen. Auch interessante Hover-Effekte für Bilder sind dabei.
Danke für diese auführliche Tool-Übersicht!
Vielen Dank für die gigantische Auswahl! Man braucht ja Tage, um sich alles anzusehen …