Skip to content

A continuously expanded list of framework/libraries and tools I used/want to use when building things on the web. Mostly Javascript stuff.

License

Notifications You must be signed in to change notification settings

riklamme/frontend-stuff

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 

Repository files navigation

Frontend stuff

A continuously expanded list of framework/libraries and tools I used/want to use when building things on the web. Mostly Javascript stuff.

Table of Contents

CSS/UI Frameworks

  • base - Responsive CSS framework with IE7+ support
  • BASSCSS - Low-level CSS toolkit
  • bootflat - Bootstrap with a flat design theme
  • Bootswatch - A collection of themes for Bootstrap
  • bulma - CSS framework based on Flexbox
  • cardinal - Cardinal is a small mobile first CSS framework
  • caramel - A simple, beautiful, responsive, modern CSS framework
  • corpus - A collection of CSS things
  • HTML Starterkit - HTML5 template to kick off your responsive websites
  • kube - Minimalistic Web framework
  • Material Design Lite - Material Design Lite Components in HTML/CSS/JS
  • materialize - A modern responsive front-end framework based on Material Design
  • Metro UI - A front-end framework for developing website in Windows Metro Style
  • milligram - Minimal setup of styles for a fast starting point.
  • mini.css - A minimal, responsive, style-agnostic CSS framework/toolkit
  • mui - A Lightweight HTML/CSS/JS Framework implementing Material Design
  • papier - Material design like minimal CSS framework
  • pavilion - Unopinionated CSS framework
  • picnicss - Lightweight UI library
  • pure - A set of small, responsive CSS modules
  • semantic-ui - UI Kit with lots of themes and elements
  • skeleton - A dead simple, responsive boilerplate
  • tachyons - Modular UI framework
  • tacit - CSS framework without classes
  • uikit - A lightweight and modular front-end framework
  • wing - Minimal CSS framework

⬆ back to top

Frontend Frameworks/ Ui Component Libraries

  • Angular - HTML enhanced for web apps
  • Aurelia - UI framework for the browser, mobile or desktop apps
  • choo - Isomorphic, single state, functional frontend framework
  • deku - Library for rendering interfaces using pure functions and virtual DOM
  • inferno - Isomorphic library for building high-performance user interfaces
  • jsblocks - MV-ish framework for single page apps
  • mercury - Modular frontend framework
  • mithril - Client-side MVC framework
  • preact - React ES6 API + Components & Virtual DOM
  • React - Library for building user interfaces
  • react-lite - Implementation of React that optimizes for small script size
  • riot - User interface micro-library
  • skatejs - Web component library
  • svelte - The magical disappearing UI framework
  • vue - Library for building web interfaces

⬆ back to top

Allrounder (jQuery like)

  • bliss - A collection of helpers and light syntactic sugar over Vanilla JS
  • cash - Library that provides jQuery style syntax to wrap modern Vanilla JS features
  • jQuery - Feature-rich JavaScript library
  • NodeList.js - Use the Native DOM APIs as easily as jQuery
  • umbrella - DOM, Event and AJAX library
  • zeptojs - Library with a largely jQuery-compatible API

⬆ back to top

Charts

  • chartist - Simple responsive charts
  • chartjs - Simple, clean and engaging charts for designers and developers
  • Cytoscape.js - Graph theory / network library for analysis and visualisation
  • c3 - D3-based reusable chart library
  • dc - For heavy amounts of data
  • dimple - An object-oriented API for business analytics powered by d3
  • D3xter - Straight forward plotting built on D3
  • ECharts - Charting library and interactive data visualization tool
  • epoch - A general purpose, real-time visualization library
  • flowchart.js - Draws flow charts from textual representation of the diagram
  • ggraph - Graph visualization of big messy data
  • jsplumb - Visual connectivity for webapps (flowcharts, sequence diagrams, etc)
  • metricsgraphics - Optimized for visualizing time-series data
  • morrisjs - SVG charts based on jquery and Raphael
  • nvd3 - Re-usable charts and chart components for d3.js
  • peity - Progressive mini <svg> pie, donut, bar and line charts
  • sparkline - Sparkline charts library
  • sparky - Sparkline charts library based on rapahel
  • taucharts - Charts with a focus on design and flexibility
  • timesheet.js - HTML5 & CSS3 time sheets
  • uvCharts - Simple, robust, extensible charting library built using d3
  • vis.js - A dynamic, browser based visualization library
  • VivaGraph - Extensible graph drawing library
  • Z3d - 3d plots with three.js

⬆ back to top

Maps

  • Cesium - Library for creating 3D globes and 2D maps in a web browser without a plugin
  • Kartograph - Simple and lightweight framework for building interactive map applications without Google Maps
  • leaflet - Library for Mobile-Friendly Interactive Maps
  • leaflet plugins - Notable Leaflet Plugins
  • leaflet topojson support - TopoJSON-aware Leaflet layer
  • Mapbox GL JS - Interactive WebGL maps from vector tiles
  • mapmap.js - A data-driven API for interactive thematic maps
  • mapsicon - Collection of maps for nearly every country in the world in PNG and SVG
  • osmbuildings - Library for visualizing buildings as pseudo 3D objects on interactive maps
  • openlayers3 - Mapping library that supports different projections
  • planetary - Interactive globes for the web
  • smallworld - A small utility for generating a small world
  • Tangram - WebGL based map renderer
  • topojson - An extension to GeoJSON that encodes topology
  • turf - A modular geospatial engine

⬆ back to top

Tables

  • Clusterize.js - Vanilla plugin to display large data sets
  • DataTables - jQuery plugin which adds sorting, paging and filtering abilities to plain HTML tables with minimal effort
  • dynatables - Semantic and interactive table plugin using jQuery, HTML5, and JSON
  • handson table - Minimalist Excel-like data grid editor
  • ListJS - Adds search, sort, filters and flexibility to plain HTML lists, tables, or anything
  • sortable - Makes tables sortable

⬆ back to top

Selects

  • awesomplete - Lightweight autocomplete
  • chosen - Library for making long, unwieldy select boxes more friendly
  • select2 - JQuery based replacement for select boxes

⬆ back to top

Loaders

  • Loaders.css - Delightful, performance-focused pure css loading animations
  • MProgress.js - Google Material Design Progress Linear bar
  • NProgress - Slim progress bars for Ajax'y applications. Inspired by Google, YouTube, and Medium
  • nanobar - Lightweight progress bars without jQuery
  • PACE - Automatic page load progress bar. Needs zero config. Easy themeable.
  • PleaseWait.js - A simple library to show your users a beautiful splash page while your application loads

⬆ back to top

UI Elements

  • button concepts - List of CSS button variations
  • countUp.js - Count up or down animation effects for numbers
  • Flipside - A button that seamlessly transitions from action to confirmation with flipping animation
  • Messenger.js - Client-side growl-like notifications with actions and auto-retry.
  • nouislider - Range slider
  • Slideout.js - A touch slideout navigation menu for mobile web apps
  • Sortable.js - Reorderable drag-and-drop lists
  • SweetAlert - An awesome replacement for JavaScript's alert
  • Toastr - Simple toast notifications
  • vex - A modern dialog library which is highly configurable and easy to style

⬆ back to top

Content Slider/Carousels

  • lory - Minimalistic slider written in vanilla JavaScript
  • ItemSlide.js - Touch carousel (needs jquery)
  • Siema - Carousel with no dependencies
  • slick - Fully responsive carousel (needs zepto or jquery)
  • swipe - Touch slider with React and Angular support
  • swiper - Slider with touch support

⬆ back to top

Typography/Text

  • bacon - Wraps text around a Bézier curve or a line
  • bigfoot.js - Responsive popover footnotes
  • dropcap.js - CSS dropcaps
  • flowtype - Responsive typography
  • grande.js - Library that implements features from Medium's editing experience
  • lining.js - A complete DOWN-TO-THE-LINE control for radical web typography
  • lettering - JQuery web typography plugin
  • pen - Editor with markdown support
  • Plumin.js - Create and manipulate fonts using javascript
  • shave - Plugin for truncating text within an html element
  • side-comments - Medium style comments
  • slabText - jQuery plugin for producing big, bold & responsive headlines
  • smart underline - Descender-aware underlines for every browser
  • typeahead.js - Foundation for building robust typeaheads
  • Typeplate - A typographic starter kit
  • Typeset.js - HTML pre-processor for web typography

⬆ back to top

Video

  • Fitvid - Responsive videos
  • medialementjs - Video and audio handling
  • Plyr - A simple HTML5 media player with custom controls and WebVTT captions
  • talkie - Combines audio and animations
  • Videojs - Open source HTML5 video player

⬆ back to top

Audio

  • audio5js - The HTML5 Audio Compatibility Layer
  • blip - Web Audio API wrapper
  • howler - Audio library
  • SoundCite - Inline audio player
  • soundjs - Audio library + simple interface
  • timbre.js -Library for Objective Sound Programming
  • vexflow - HTML5 Music Engraving
  • tone.js - Framework for interactive music

⬆ back to top

Canvas and SVG

  • D3 - A JavaScript visualization library for HTML and SVG
  • Easeljs - Library for building canvas based interactive 2D content
  • Fabric.js - Canvas Library, SVG-to-Canvas (& Canvas-to-SVG) Parser
  • GraphicsJS - Graphics library with an intuitive API, based on SVG/VML technology
  • Konva - Framework that extends the 2d context by enabling canvas interactivity
  • panzoom - Pan and zoom SVG elements
  • Paper.js - Canvas based vector graphics scripting framework
  • Paths.js - Generate SVG paths for geometric shapes
  • pixi.js - 2D WebGL rendering engine with Canvas fallback
  • p5js - Processing for Javascript
  • Raphael - Library that simplify your work with vector graphics on the web
  • rune.js - A Library for programming graphic design systems with SVG
  • svg.js - A Library for manipulating and animating SVG
  • two.js - A two-dimensional drawing api
  • vizflow - Interactive visualization engine

⬆ back to top

3D/WebGL Frameworks

  • babylonJS - Framework for building 3D games with HTML5, WebGL and Web Audio
  • sceneJS - WebGL-based 3D visualization engine
  • three.js- 3D Library which makes WebGL simpler
  • voxel.js - Voxel game building toolkit
  • WhitestormJS - Framework for developing 3D web apps with physics

⬆ back to top

Image Processing

  • camanjs - Combination of a simple-to-use interface with advanced and image/canvas editing techniques
  • grafijs - Library with basic image processing functions
  • smartcrop - Content aware image cropping

⬆ back to top

Scrolling

  • fracs - Plugin to determine the visible fractions of HTML elements
  • in-view - Get notified when a element enters/exits the viewport
  • midnight.js - Make your header looks great with the content below it as you scroll
  • scroll-scope.js - Keep parent element still when scrolling an element to its boundary
  • scrollme - A jQuery plugin for adding simple scrolling effects to web pages
  • ScrollMagic - Library for scroll interactions
  • scrollMonitor - API to monitor elements as you scroll
  • scrollreveal - Scroll animations for web and mobile browsers
  • ScrollToFixed - Used to fix elements on the page and move with the horizontal scroll
  • skrollr - Stand-alone parallax scrolling library for mobile and desktop
  • space.js - A HTML-driven JavaScript-library for narrative 3D-scrolling
  • superscrollorama - The jQuery plugin for supercool scroll animation
  • WOW - Reveal CSS animation as you scroll down a page
  • headroom - Hide your header until you need it:

⬆ back to top

Touch Gestures

  • AlloyFinger - Multi-touch gestures library
  • Hammer.js - Add support for touch gestures and remove 300ms delay from clicks

⬆ back to top

Animations

  • animate.css - A cross-browser library of CSS animations
  • Anime - Anime is a flexible yet lightweight animation library
  • bounce.js - CSS3 powered animations
  • choreographer - Library to take care of complicated css animations
  • Dynamics.js - Library to create physics-based CSS animations
  • GSAP - Fast animation library
  • Hover.css - CSS3 Hover Effects
  • impulse - Dynamic physics interactions for the mobile web
  • KUTE.js - animation engine, memory efficient & modular code
  • mojs - Motion for the web
  • popmotion - Motion Engine. Use for animation, physics and input tracking.
  • rebound - Library that models Spring dynamics for driving physical animations
  • repaintless - Animation library that consists of animations that don't cause reflows and repaints
  • semantic ui - transition - Simple CSS3 Animations and transitions
  • Sequence.js - Responsive CSS animation framework
  • shifty - Tweening engine
  • snabbt - Animations with JavaScript and CSS transforms
  • snapsvg - Library for animating and manipulating SVG's
  • tween.js - Tweening engine
  • velocity - Accelerated JavaScript animations
  • vivus - Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn

⬆ back to top

Templating

  • dotjs - Fast templating engine
  • Handlebars - Minimal Templating on Steroids
  • Hogan - JavaScript templating
  • marko - Fast and lightweight HTML-based templating engine that compiles templates to CommonJS modules and supports streaming, async rendering, custom tags and a concise syntax
  • mustache - Minimal templating with {{mustaches}} in JavaScript
  • nunjucks - A rich and powerful templating language
  • paperclip.js - Reactive DOM template engine built for speed and extensibility
  • vdo - Minimal JSX compatible html focused templating engine

⬆ back to top

HTTP Requests

  • aja - Asynchronous JavaScript and JSON(P)
  • axios - Promise based HTTP client
  • d3-request - A convenient alternative to XMLHttpRequest
  • fetch - A window.fetch javascript polyfill
  • intercooler-js - Making AJAX as easy as anchor tags
  • qwest - Ajax library with XHR2, promises and request limit
  • reqwest - Browser asynchronous HTTP requests
  • superagent - Client-side HTTP request library

⬆ back to top

Events

⬆ back to top

Icons

⬆ back to top

Colors

⬆ back to top

Databases/Storage

  • basil.js - Persistence layer
  • Dexie.js - Wrapper for IndexedDB
  • ForerunnerDB - Database with mongo-like query language and data-binding support
  • localForage - Library like a localStorage API with fallback store for browsers with no IndexedDB or WebSQL support
  • LokiJS - Embeddable / in-memory database
  • lovefield - SQL-like, relational query engine for the browser
  • store.js - LocalStorage wrapper for all browsers without using cookies or flash. Uses localStorage, globalStorage and userData behavior
  • pouchdb - Created to help developers build applications that work as well offline as they do online
  • taffydb - Brings database features into your JavaScript applications

⬆ back to top

Validation

⬆ back to top

Dates

  • datedropper - JQuery plugin that provides a way to manage dates for input fields
  • dateformat - Library for formatting dates
  • date-fns - Toolset for manipulating dates
  • flatpickr - Lightweight date time picker without dependencies
  • instadate - A minimal date library
  • moment.js - Parse, validate, manipulate, and display dates
  • Pikaday - A lightweight Datepicker
  • sugar - Parse, create, manipulate, compare, format and display dates

⬆ back to top

Internationalization

  • l10ns - Internationalization workflowand formatting
  • globalize - A library for internationalization and localization that leverages the official Unicode CLDR JSON data

⬆ back to top

Numbers & Currencies

  • Numbro.js - Formatting and manipulating numbers in more than 30 languages
  • accounting.js - Number, money and currency formatting
  • money.js - Currency conversion library
  • cleave.js - Format input text content when you are typing

⬆ back to top

Statistics & data analysis

  • datakit - Framework for data analysis
  • datalib - Data utility library
  • gauss - Statistics, analytics, and data library
  • jstat - Javascript Statistical Library
  • science.js - Scientific and statistical computing in JavaScript
  • simple-statistics - simple statistics for node & browser javascript
  • statkit - Statistics toolkit

⬆ back to top

Module Loaders

  • Browserify - Lets you require('modules') in the browser
  • RequireJS - A file and AMD module loader
  • stealjs - Dependency loader and builder
  • Systemjs - ES6, AMD and CommonJS loader
  • webpack - CommonJs and AMD module loader

⬆ back to top

Lazy Loading

  • Aload - Asynchronously loads images, scripts, styles and more
  • echo - Standalone lazy loading image micro-library
  • Lazy Progressive Enhancement - A lazy image loader designed to enforce progressive enhancement and valid HTML
  • layzr.js - Dependency-free library for lazy loading images
  • lazysizes - fast and self-initializing lazyloader for images, iframes and more
  • loadXT - Lazy loading for any elements
  • Unveil - Lightweight plugin to lazy load images for jQuery or Zepto.js

⬆ back to top

Neural Networks

  • brain - Neural networks in JavaScript
  • ConvNetJS - Library for training Deep Learning models
  • dn2a-javascript - Digital Neural Networks Architecture
  • Mind - Flexible neural networks
  • synaptic.js - Architecture-free neural network

⬆ back to top

Social

  • js socials - Social network sharing jQuery plugin
  • rrssb - Ridiculously Responsive Social Sharing Buttons
  • share-button - Fast, beautiful, and painless social shares
  • sharingbuttons - Social media sharing buttons without JavaScript
  • socialcount - Custom sharing buttons with share count
  • Social Likes - Single-style sharing buttons with counters for jQuery
  • whatsapp button - Creates a whatsapp sharing button

⬆ back to top

Utility Libraries

  • lazy.js - A functional utility library
  • lodash - Utility library delivering modularity, performance & extras.
  • underscore - Library that provides functional programming helpers
  • pareto.js - Functional utility library
  • ramdajs - A practical functional library

⬆ back to top

General

  • dat.GUI - Minimal interface for live control of variables in JS
  • embed.js - Automatically embeds emojis, media, maps, tweets, code and services
  • formstone - Collection of handy useful scripts
  • golden-layout - A multi-screen layout manager for webapps
  • interact.js - Drag and drop, resizing and multi-touch gestures with inertia and snapping
  • jwerty - Handling of keyboard events
  • keymaster - Simple key listener
  • modernizr - Feature Detection Library
  • tether - Marrying UI Elements (dropdown, tooltips, guide, selects)
  • UpUp - Offline First library. Let users visit your site, even without a connection.

⬆ back to top

About

A continuously expanded list of framework/libraries and tools I used/want to use when building things on the web. Mostly Javascript stuff.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published