Die 100 besten Ressourcen für Webentwickler – Plugins, Tools und Lösungen

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