Templates
Handlebars.js
Handlebars provides the power necessary to let you build semantic templates effectively with no frustration. Handlebars is largely compatible with Mustache templates. In most cases it is possible to swap out Mustache with Handlebars and continue using your current templates.
Checkout the live demo at http://tryhandlebarsjs.com/.
http://handlebarsjs.com/
Animation
Viper
Viper is a fairly low-level animation library that allows you to change a property of an object over time.
Offizielle Webseite
Morpheus
Morpheus lets you „tween anything“ in parallel on multiple elements; from colors to integers of any unit (px, em, %, etc), with easing transitions and bezier curves, including CSS3 transforms (roate, scale, skew, & translate) — all in a single high-performant loop utilizing the CPU-friendly requestAnimationFrame standard.
Offizielle Webseite
Grafiken
Processing.js
Processing.js is the sister project of the popular Processing visual programming language, designed for the web. Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. You write code using the Processing language, include it in your web page, and Processing.js does the rest. It’s not magic, but almost.
Offizielle Webseite
Example: Khan Academy
RaphaelJS
Raphael JS is a lightweight and super-sexy JavaScript framework that allows you to draw vector graphics in your browser! In this tutorial, I will introduce you to some basic drawing functionality, take a look at animation, provide DOM access and finally finish off by creating a cool widget for your site…
D3 – Data-Driven Documents
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
Examples
Offizielle Webseite
Scrimba Course
three.js
The aim of the project is to create an easy to use, lightweight, 3D library with a default WebGL renderer. The library also provides Canvas 2D, SVG and CSS3D renderers in the examples.
Example Khan Academy
Offizielle Webseite
Paper.js
Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.
Offizielle Webseite
Datum/Uhrzeit
Moment.js
A lightweight JavaScript date library for parsing, validating, manipulating, and formatting dates.
Offizielle Webseite
Diagramme
gRaphael
gRaphael’s goal is to help you create stunning charts on your website. It is based on Raphael graphics library.
Offizielle Webseite
Templates
Handlebars.js
Handlebars provides the power necessary to let you build semantic templates effectively with no frustration. Handlebars is largely compatible with Mustache templates. In most cases it is possible to swap out Mustache with Handlebars and continue using your current templates.
Checkout the live demo at
Offizielle Webseite
mustache.js – Logic-less {{mustache}} templates with JavaScript
mustache.js is an implementation of the mustache template system in JavaScript.
Mustache is a logic-less template syntax. It can be used for HTML, config files, source code – anything. It works by expanding tags in a template using values provided in a hash or object.
We call it „logic-less“ because there are no if statements, else clauses, or for loops. Instead there are only tags. Some tags are replaced with a value, some nothing, and others a series of values.
Offizielle Webseite
CSS-Frameworks
Pure CSS
A set of small, responsive CSS modules that you can use in every web project.
„Pure ist ein Set von kleinen, responsiven CSS Modulen, die du in jedem Web Projekt benutzen kannst. Insgesamt besteht das Responsive Webdesign Set komprimiert auf einer 4kb großen CSS-Datei.
Neben den allgemeinen Stylings enthält Pure CSS für Grids, Formulare, Buttons, Tabellen und Menüs. Da Pure mit SMACSS modular aufgebaut ist, können bei Bedarf nur einzelne Komponenten von Pure genutzt und konfliktfreie Erweiterungen geschrieben werden. Pure liefert nur minimales Styling. So kann das Design durch das Hinzufügen, statt durch das Entfernen von Eigenschaften weiterentwickelt werden. Für die schnelle Individualisierung des Grund-Stylings steht ein Skin Builder zur Verfügung. Auf der Webseite von Pure findest du alles, um die ersten Schritte mit den Modulen machen zu können.“ – t3n
Offizielle Webseite
Skeleton
A dead simple, responsive boilerplate
„Skeleton liefert ein funktionales Grid und eine Menge hübscher HTML-Elemente mit den passenden Style. Egal ob Forms, Buttons oder Headlines – mit Skeleton sind wir gut gewappnet. Alle Schriften werden zudem in rem definiert und Media-Queries direkt mitgeliefert. Wer gerne mit Normalize arbeitet und sich noch Helper-Klassen wünscht, hat mit Skeleton das richtige Framework gefunden.“ – t3n
Offizielle Webseite
Materialize
A modern responsive front-end framework based on Material Design
„Wem das von Google entwickelte Material Design gefällt, sollte sich das CSS-Framework Materialize genauer anschauen. Webentwicklern stehen hier neben den üblichen in CSS beschriebenen Komponenten einige spannende JavaScript-Elemente zur Verfügung. Darunter Bilder mit Parallax-Effekten oder die im Material Design klassische Wellen-Animation beim Drücken eines Buttons. -t3n
Offizielle Webseite
Semantic UI
User Interface is the language of the web
„Semantic UI lässt sich in vielerlei Hinsicht mit Bootstrap vergleichen. Es gibt eine breite Auswahl an vordefinierten Komponenten in HTML, CSS und JavaScript. Ein wichtiger Bestandteil des Frameworks ist jedoch die Anpassbarkeit. So gibt es neben rund 50 Elementen auch über 3.000 Variablen, mit denen die vordefinierten Komponenten kinderleicht angepasst werden können. Die Individualisierungsmöglichkeiten gehen dabei weit über das simple Ändern von Button-Farben hinaus. Das Framework ermöglicht sogar das einfache Erstellen von komplett eigenen Themes.“ -t3n
Offizielle Webseite
Foundation
The most advanced responsive front-end framework in the world.
„Foundation ist ein weiteres Framework mit einer großen Anzahl an vordefinierten Elementen. Neben den einzelnen Komponenten gibt es auch komplett zusammengestellte HTML-Templates, Blöcke oder UI-Kits. Mit an Bord sind neben der Möglichkeit, Elemente mit Attributen anpassen zu können, auch Mobile-First- und Responsive Design. Die Individualisierung hat hier jedoch ihre Grenzen. Wer also Wert darauf legt, ein komplett eigenes Theme mit vielen individuell anpassbaren Möglichkeiten zu entwickeln, sollte sich lieber Semantic UI angucken. Für Anfänger mit wenig Programmiererfahrung oder für einen Projekt-Start mit schnellem Fortschritt dürfte Foundation ideal sein.“ – t3n
Offizielle Webseite
Bulma
Bulma is a free, open source CSS framework based on Flexbox
„Bulma ist ein kostenloses Open-Source-CSS-Framework auf Basis von Flexbox, das momentan von mehr als 150.000 Entwicklern genutzt wird. Es wurde 2016 veröffentlicht und trägt somit wenig Altlasten mit sich herum. Mit seiner sehr aktiven Community ist es eine ernstzunehmende Alternative zu Bootstrap. Bulma benötigt kein JavaScript, hat eine einfach zu lernende Syntax und bietet Support für die aktuelle Version von Font Awesome. Zum Lieferumfang gehören neben einem einfachen und schlanken Grid-System auch mehr als 100 kleine und hilfreiche CSS-Tools.“ – t3n
Offizielle Webseite
Normalize.css
A modern, HTML5-ready alternative to CSS resets
„Ein wohl niemals endendes Problem für Webentwickler sind die vielen verschiedenen Browser. Auch wenn die meisten inzwischen wohl Chrome, Firefox oder Safari nutzen, sollte die Website mit allen Web-Browsern gleich gut aussehen. Das will Normalize vereinfachen, denn jeder Browser hat einige vordefinierte CSS-Eigenschaften. Ein klassisches Beispiel sind unterschiedliche Padding- und Margin-Werte. Normalize ist dabei mehr als eine kleine CSS-Datei. Hier werden nicht einfach alle Browser-Einstellungen zurückgesetzt, sondern die nützlichsten beibehalten, viele Styles normalisiert (daher der Name) und Bugs behoben. Normalize unterstützt zusätzlich die neuen Elemente von HTML5 sowie die Browser Chrome, Firefox, Safari, Edge, Internet Explorer und Opera.“ – t3n
Offizielle Webseite
Milligram
A minimalist CSS framework
„Der Name ist Programm: Milligram ist ein sehr minimalistisches CSS-Framework, das komprimiert nur zwei Kilobyte groß ist. Beschränkt wird sich auf die wichtigsten Komponenten in einem einfachen Design. Wer bei seiner Website den Fokus auf Schnelligkeit und das Wesentliche legen will, sollte überlegen, Milligram der größeren Konkurrenz um Bootstrap und Co. vorzuziehen.“ – t3n
Offizielle Webseite
Kube UI
As a complete and self-sufficient web framework
„Nicht ganz so klein wie Milligram, aber trotzdem weniger als 300 Kilobyte groß ist das nächste CSS-Framework. Das finnische Unternehmen Imperavi hat mit Kube UI ein minimalistisches und schnell zu implementierendes Framework entwickelt. Kube wurde in Sass entwickelt und verspricht seinen Nutzern, mit nur grundlegenden HTML-, CSS- und optional JavaScript-Kenntnissen schnell zu einer eigenen Website zu kommen.“ – t3n
Offizielle Webseite
Diverses
jQuery UI
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you’re building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.
Offizielle Webseite