Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

awesome-frontend

Awesome frontend, also my collections.
https://github.com/syaning/awesome-frontend

Last synced: 21 days ago
JSON representation

Articles

Misc

Compatibility

Module

  • Modernizr - Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user's browser.
  • Can I Use - "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

CSS

CSS Animation

  • css-spinners - Simple CSS spinners and throbbers made with CSS and minimal HTML markup.
  • loaders.css - Delightful, performance-focused pure css loading animations.
  • Hover - A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on.

CSS Frameworks

  • AgnosticUI - Accessible React component primitives that also work with Vue 3, Svelte, and Angular
  • AmazeUI - A mobile-first and modular front-end framework.
  • Skeleton - Skeleton is a simple, responsive boilerplate to kickstart any responsive project.
  • bootstrap-material-design - Material design theme for Bootstrap 3.
  • MUI - MUI is a lightweight CSS framework that follows Google's Material Design guidelines.
  • Bulma - Bulma is a modern CSS framework based on Flexbox.

CSS Misc

Processors

  • Stylus - Expressive, robust, feature-rich CSS language built for nodejs.
  • Postcss - PostCSS is a tool for transforming styles with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.

Design

Misc

  • 日本の伝統色 - The traditional colors of Japan.
  • Collect UI - Daily inspiration collected from daily ui archive and beyond. Based on Dribbble shots, hand picked, updating daily.

Icons

Icon Fonts

  • Iconic - The definitive icon set designed for the modern web.
  • Font-Awesome - Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
  • Material design icons - Material Design icons by Google.
  • Weather Icons - 222 Weather Themed Icons and CSS.

Icon Sites

  • Iconfinder - 600,000+ free and premium icons.
  • Noun Project - Icons for everything.
  • ICO converter - ICO converter is a simple online .ico image converter. It will take any image and convert it to ICO file, for web site favicon or Windows applications.
  • Material Icons - Material icons are beautifully crafted, delightful, and easy to use in your web, Android, and iOS projects.

SVG Icons

  • Feather - Simply beautiful open source icons.

JavaScript

Angular

  • AngularJS
  • Angular Style Guide - A starting point for Angular development teams to provide consistency through good practices.
  • ui-router - The de-facto solution to flexible routing with nested views in AngularJS.
  • Mobile Angular UI - Angular & Bootstrap 3 for Mobile web and applications.

Aurelia

  • aurelia - The aurelia framework brings together all the required core aurelia libraries into a ready-to-go application-building platform.

Code Quality

  • eslint - The pluggable linting utility for JavaScript and JSX.
  • jshint - JSHint is a tool that helps to detect errors and potential problems in your JavaScript code.
  • jslint - The JavaScript code quality tool.

Code Style

ECMAScript 5

ECMAScript 6

jQuery

  • jQuery UI - jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of jQuery.
  • jQuery

Polymer

  • polymer - Build modern apps using web components.

Promise

React

  • Awesome React - A collection of awesome things regarding React ecosystem.
  • Elemental UI - A flexible and beautiful UI framework for React.js.
  • React-Bootstrap - Bootstrap 3 components built with React.
  • React Color - Color Pickers from Sketch, Photoshop, Chrome & more.
  • React in patterns - List of design patterns/techniques used while developing with React.
  • react-router - A complete routing solution for React.js.
  • material-ui - React Components that Implement Google's Material Design.

Vue

  • iview - A high quality UI Toolkit built on Vue.js.
  • Muse-UI
  • Mint UI - Mobile UI elements for Vue.js.

JavaScript Libs

Animation

  • popmotion - A 12kb Javascript motion engine. Use for animation, physics and input tracking.
  • ramjet - Morph DOM elements from one state to another with smooth transitions.
  • jquery.transit - Super-smooth CSS3 transformations and transitions for jQuery.
  • iconate - Transform your icons with trendy animations.
  • vivus - JavaScript library to make drawing animation on SVG.
  • ScrollReveal - Easy scroll animations for web and mobile browsers.
  • anime - Anime is a flexible yet lightweight JavaScript animation library. It works with CSS, Individual Transforms, SVG, DOM attributes and JS Objects.
  • Framer Motion - An open source React library to power production-ready animations with simple declarative APIs.
  • mojs - motion graphics library for the web.

Carousel

  • slick - The last carousel you'll ever need.
  • lightgallery.js - Full featured javascript lightbox gallery. No dependencies.

Clipboard

  • clipboard.js - Modern copy to clipboard. No Flash. Just 2kb.
  • zeroclipboard - The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface.

Data Visualization

  • ECharts - (Canvas) A powerful charts library from Baidu.
  • Raphaël - (SVG/VML) Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web.
  • Springy - (Canvas) Springy is a force directed graph layout algorithm.
  • vis - Dynamic, browser-based visualization library.
  • heatmap.js - (Canvas) JavaScript Library for HTML5 canvas based heatmaps.
  • techan.js - A visual, technical analysis and charting (Candlestick, OHLC, indicators) library built on D3.
  • charts - Simple, responsive, modern SVG Charts with zero dependencies.
  • g2 - The Grammar of Graphics in JavaScript.
  • Peity - (SVG) A simple jQuery plugin that converts an element's content into a simple chart.
  • BizCharts - Powerful data visualization library based on G2 and React.
  • HighCharts - (SVG) Create interactive charts easily for your web projects.
  • cola.js - (SVG) Constraint-Based Layout in the Browser.

Editor

  • ace - Ace is a standalone code editor written in JavaScript.
  • quill - A cross browser rich text editor with an API.
  • MediumEditor - Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.
  • Substance - A JavaScript library for web-based content editing.
  • Draft.js - Draft.js is a JavaScript rich text editor framework, built for React and backed by an immutable model.
  • monaco-editor - A browser based code editor.
  • slate - A completely customizable framework for building rich text editors in the browser.

File

  • PapaParse - Fast and powerful CSV (delimited text) parser that gracefully handles large files and malformed input.
  • FileSaver.js - An HTML5 saveAs() FileSaver implementation.
  • pdf.js - PDF.js is a Portable Document Format (PDF) viewer that is built with HTML5.

Graphic

  • p5.js - p5.js is a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.
  • paper.js - The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas.

Misc

  • garn-validator - Create validations with ease.
  • underscore - Underscore.js is a utility-belt library for JavaScript that provides support for the usual functional suspects (each, map, reduce, filter...) without extending any core JavaScript objects.
  • lodash - A JavaScript utility library delivering consistency, modularity, performance, & extras.
  • director - A routing library that works in both the browser and Node.js environments with as few differences as possible. Simplifies the development of Single Page Apps and Node.js applications. Dependency free.
  • moment - Parse, validate, manipulate, and display dates in JavaScript.
  • JSVerbalExpressions - VerbalExpressions is a JavaScript library that helps to construct difficult regular expressions.
  • TheaterJS - Typing effect mimicking human behavior.
  • dragula - Drag and drop so simple it hurts.
  • layzr.js - A small, fast, modern, and dependency-free library for lazy loading.
  • smartcrop.js - Smartcrop.js implements an algorithm to find good crops for images.

Multimedia

  • howler.js - Javascript audio library for the modern web.
  • amplitudejs - Amplitude.js is the HTML5 Audio Player for the modern era. No dependencies required.

Presentation

  • reveal.js - A framework for easily creating beautiful presentations using HTML.
  • impress.js - It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.
  • deck.js - Modern HTML Presentations.

Template

  • mustache.js - mustache.js is an implementation of the mustache template system in JavaScript.
  • rivets - Lightweight and powerful data binding + templating solution.
  • Handlebars - A popular logic-less templating engine built on top of Mustache, with extended features like helpers and partials.

Roadmap

Misc

Tools

Build

  • webpack - A bundler for javascript and friends.
  • gulp - The streaming build system.
  • grunt - The JavaScript Task Runner.

Module

  • rollup - Next-generation ES6 module bundler.
  • browserify - Browser-side require() the node.js way.

Package Management

  • npm - A package manager for javascript.
  • yarn - Fast, reliable, and secure dependency management.