Awesome Frontend

Table of Contents

• Tools
  • Package Management
  • Build
  • Module
• Compatibility
• CSS
  • CSS Frameworks
  • Processors
  • CSS Animation
  • CSS Misc
• Icons
  • Icon Fonts
  • SVG Icons
  • Icon Sites
• JavaScript
  • ECMAScript 5
  • ECMAScript 6
  • Promise
  • Code Quality
  • Code Style
  • jQuery
  • Angular
  • React
  • Vue
  • Ember
  • Polymer
  • Aurelia
• JavaScript Libs
  • Data Visualization
  • Graphic
  • Animation
  • File
  • Clipboard
  • Editor
  • Presentation
  • Template
  • Multimedia
  • Misc
• Articles
• Design
• Roadmap

Tools

Package Management

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

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.
• RequireJS - A file and module loader for JavaScript.

Compatibility

• 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 Frameworks

• AgnosticUI - Accessible React component primitives that also work with Vue 3, Svelte, and Angular
• Bootstrap - Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
• bootswatch - Bootswatch is a collection of free themes for Bootstrap.
• Materialize - A modern responsive front-end framework based on Material Design.
• SemanticUI - Semantic is a UI component framework based around useful principles from natural language.
• 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.

Processors

• Less - The dynamic stylesheet language.
• Sass - Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
• 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.

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.
• Animate.css - A cross-browser library of CSS animations.
• Hover - A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on.
• Animation Menus - Collection of HTML and CSS menu with little JavaScript: accordion, circular, dropdown, fullscreen, horizontal, mobile, off-canvas, side, toggle and sliding.

CSS Misc

• Front-end Frameworks - A collection of best front-end frameworks for faster and easier web development.
• markdown-css-themes - A collection of css themes for Markdown.
• filter.css - A collection of CSS filter combos.
• colors - Smarter defaults for colors on the web.

Icons

Icon Fonts

• 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.
• Ionicons - The premium icon font for Ionic.
• Octicons - GitHub's icon font.
• Weather Icons - 222 Weather Themed Icons and CSS.
• Entypo - 411 carefully crafted premium pictograms by Daniel Bruce — CC BY-SA 4.0.
• Typicons - 336 pixel perfect, all-purpose vector icons.
• Iconic - The definitive icon set designed for the modern web.
• Fontello - This tool lets you combine icon webfonts for your own project.

SVG Icons

• Evil Icons - Simple and clean SVG icon pack with the code to support Rails, Sprockets, Node.js, Gulp, Grunt and CDN.
• Feather - Simply beautiful open source icons.
• eva-icons - A pack of more than 480 beautifully crafted Open Source icons. SVG, Sketch, Web Font and Animations support.

Icon Sites

• Iconfinder - 600,000+ free and premium icons.
• Noun Project - Icons for everything.
• Material Icons - Material icons are beautifully crafted, delightful, and easy to use in your web, Android, and iOS projects.
• ConvertICO - ConvertICO is a free online ICO/PNG file converter.
• 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.
• Nerd Fonts - Iconic font aggregator, collection, and patcher.

JavaScript

ECMAScript 5

• ECMA 5.1 Specification
• ECMAScript 5 compatibility table

ECMAScript 6

• ECMA 6 Specification
• ES6 Features - Overview of ECMAScript 6 features.
• ECMAScript 6 Tutorial - An open-source ES6 tutorial.
• ECMAScript 6 compatibility table
• Babel - Babel is a compiler for writing next generation JavaScript.
• Traceur - Traceur is a JavaScript.next-to-JavaScript-of-today compiler.
• ES6 Tools - An aggregation of tooling for using ES6 today.
• Understanding ECMAScript 6 - Content for the ebook "Understanding ECMAScript 6".
• ES6 Overview in 350 Bullet Points
• ES6-for-humans - A kickstarter guide to writing ES6.

Promise

• Promises
• Promise/A+
• ES6 Promise - MDN
• JavaScript Promise Book
• How do Promises Work?

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

• Google JavaScript Style Guide (ES5)
• Airbnb JavaScript Style Guide
• idiomatic.js - Principles of Writing Consistent, Idiomatic JavaScript.

jQuery

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

Angular

• AngularJS, github
• AngularJS 2, github
• UI Bootstrap - Native AngularJS (Angular) directives for Bootstrap.
• 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.
• Dynamically Loading Controllers and Views with AngularJS/$controllerProvider and RequireJS
• Mobile Angular UI - Angular & Bootstrap 3 for Mobile web and applications.

React

• React, github
• 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.
• material-ui - React Components that Implement Google's Material Design.
• react-router - A complete routing solution for React.js.
• React in patterns - List of design patterns/techniques used while developing with React.

Vue

• vue - Intuitive, fast & component-oriented view library for building modern web interfaces.
• element - A Vue.js 2.0 UI Toolkit for Web.
• iview - A high quality UI Toolkit built on Vue.js.
• Mint UI - Mobile UI elements for Vue.js.
• Muse-UI

Ember

• Ember.js - A JavaScript framework for creating ambitious web applications.

Polymer

• polymer - Build modern apps using web components.

Aurelia

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

JavaScript Libs

Data Visualization

• D3.js - A JavaScript library for manipulating documents based on data.
• HighCharts - (SVG) Create interactive charts easily for your web projects.
• 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.
• Sigma - (Canvas)Sigma is a JavaScript library dedicated to graph drawing.
• jQuery Sparklines - (Canvas) It generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.
• Peity - (SVG) A simple jQuery plugin that converts an element's content into a simple chart.
• cola.js - (SVG) Constraint-Based Layout in the Browser.
• vis - Dynamic, browser-based visualization library.
• heatmap.js - (Canvas) JavaScript Library for HTML5 canvas based heatmaps.
• Chart.js - Simple HTML5 Charts using the <canvas> tag.
• techan.js - A visual, technical analysis and charting (Candlestick, OHLC, indicators) library built on D3.
• OpenLayers - A high-performance, feature-packed library for all your mapping needs.
• Leaflet - Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps.
• plotly.js - The open source JavaScript graphing library that powers Plotly.
• vx - react + d3 = vx | visualization components.
• charts - Simple, responsive, modern SVG Charts with zero dependencies.
• g2 - The Grammar of Graphics in JavaScript.
• BizCharts - Powerful data visualization library based on G2 and React.

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.

Animation

• GreenSock - Ultra high-performance, professional-grade animation for the modern web.
• 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.
• mojs - motion graphics library for the web.
• 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.

File

• js-xlsx - XLSX / XLSM / XLSB / XLS / SpreadsheetML (Excel Spreadsheet) / ODS parser and writer.
• 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.

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.

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.

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.

Carousel

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

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.

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.

Articles

• How browsers work
• 浏览器的渲染原理简介
• Best Practices for Speeding Up Your Web Site
• Critical Rendering Path
• Chrome DevTools Overview
• Ideas for Subtle Hover Effects
• Exploring canvas drawing techniques
• Centering in CSS: A Complete Guide
• Learn CSS Layout
• 一文读懂前端缓存

Design

• Material design
• Collect UI - Daily inspiration collected from daily ui archive and beyond. Based on Dribbble shots, hand picked, updating daily.
• 日本の伝統色 - The traditional colors of Japan.
• colour code - Find your colour scheme.
• WEB色見本 原色大辞典

Roadmap

• Frontend Developer - Roadmap