Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/syaning/awesome-frontend

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

List: awesome-frontend

frontend

Last synced: about 2 months ago
JSON representation

Awesome frontend, also my collections.

Awesome Lists containing this project

README 

        
# Awesome Frontend



## Table of Contents



- [Tools](#tools)

	- [Package Management](#package-management)

	- [Build](#build)

	- [Module](#module)

- [Compatibility](#compatibility)

- [CSS](#css)

	- [CSS Frameworks](#css-frameworks)

	- [Processors](#processors)

	- [CSS Animation](#css-animation)

	- [CSS Misc](#css-misc)

- [Icons](#icons)

	- [Icon Fonts](#icon-fonts)

	- [SVG Icons](#svg-icons)

	- [Icon Sites](#icon-sites)

- [JavaScript](#javascript)

	- [ECMAScript 5](#ecmascript-5)

	- [ECMAScript 6](#ecmascript-6)

	- [Promise](#promise)

	- [Code Quality](#code-quality)

	- [Code Style](#code-style)

	- [jQuery](#jquery)

	- [Angular](#angular)

	- [React](#react)

	- [Vue](#vue)

	- [Ember](#ember)

	- [Polymer](#polymer)

	- [Aurelia](#aurelia)

- [JavaScript Libs](#javascript-libs)

	- [Data Visualization](#data-visualization)

	- [Graphic](#graphic)

	- [Animation](#animation)

	- [File](#file)

	- [Clipboard](#clipboard)

	- [Editor](#editor)

	- [Presentation](#presentation)

	- [Template](#template)

	- [Multimedia](#multimedia)

	- [Misc](#misc)

- [Articles](#articles)

- [Design](#design)

- [Roadmap](#roadmap)



## Tools



### Package Management



- [npm](https://www.npmjs.com/) - A package manager for javascript.

- [yarn](https://yarnpkg.com/) - Fast, reliable, and secure dependency management.

- [bower](http://bower.io/) - A package manager for the web.



### Build



- [webpack](https://github.com/webpack/webpack) - A bundler for javascript and friends.

- [gulp](https://github.com/gulpjs/gulp) - The streaming build system.

- [grunt](https://github.com/gruntjs/grunt) - The JavaScript Task Runner.



### Module



- [rollup](https://github.com/rollup/rollup) - Next-generation ES6 module bundler.

- [browserify](https://github.com/substack/node-browserify) - Browser-side require() the node.js way.

- [RequireJS](http://requirejs.org/) - A file and module loader for JavaScript.



## Compatibility



- [Modernizr](https://github.com/Modernizr/Modernizr) - Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user's browser.

- [Can I Use](http://caniuse.com/) - "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](https://www.agnosticui.com/) - Accessible React component primitives that also work with Vue 3, Svelte, and Angular

- [Bootstrap](http://getbootstrap.com/) - Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

- [bootswatch](https://github.com/thomaspark/bootswatch/) - Bootswatch is a collection of free themes for Bootstrap.

- [Materialize](http://materializecss.com/) - A modern responsive front-end framework based on Material Design.

- [SemanticUI](http://semantic-ui.com/) - Semantic is a UI component framework based around useful principles from natural language.

- [AmazeUI](http://amazeui.org/) - A mobile-first and modular front-end framework.

- [Skeleton](https://github.com/dhg/Skeleton/) - Skeleton is a simple, responsive boilerplate to kickstart any responsive project.

- [bootstrap-material-design](https://github.com/FezVrasta/bootstrap-material-design) - Material design theme for Bootstrap 3.

- [MUI](https://github.com/muicss/mui) - MUI is a lightweight CSS framework that follows Google's Material Design guidelines.

- [Bulma](https://github.com/jgthms/bulma) - Bulma is a modern CSS framework based on [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes).



### Processors



- [Less](http://lesscss.org/) - The dynamic stylesheet language.

- [Sass](http://sass-lang.com/) - Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

- [Stylus](http://learnboost.github.com/stylus/) - Expressive, robust, feature-rich CSS language built for nodejs.

- [Postcss](https://github.com/postcss/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](https://github.com/jlong/css-spinners) - Simple CSS spinners and throbbers made with CSS and minimal HTML markup.

- [loaders.css](https://github.com/ConnorAtherton/loaders.css) - Delightful, performance-focused pure css loading animations.

- [Animate.css](http://daneden.github.io/animate.css) - A cross-browser library of CSS animations.

- [Hover](https://github.com/IanLunn/Hover) - A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on.

- [Animation Menus](http://freefrontend.com/css-menu/) - 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](http://usablica.github.io/front-end-frameworks/compare.html) - A collection of best front-end frameworks for faster and easier web development.

- [markdown-css-themes](https://github.com/jasonm23/markdown-css-themes) - A collection of css themes for Markdown.

- [filter.css](https://github.com/simurai/filter.css) - A collection of CSS filter combos.

- [colors](https://github.com/mrmrs/colors) - Smarter defaults for colors on the web.



## Icons



### Icon Fonts



- [Font-Awesome](https://github.com/FortAwesome/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](https://github.com/google/material-design-icons) - Material Design icons by Google.

- [Ionicons](https://github.com/driftyco/ionicons) - The premium icon font for Ionic.

- [Octicons](https://github.com/github/octicons) - GitHub's icon font.

- [Weather Icons](https://github.com/erikflowers/weather-icons) - 222 Weather Themed Icons and CSS.

- [Entypo](http://www.entypo.com/) - 411 carefully crafted premium pictograms by Daniel Bruce — CC BY-SA 4.0.

- [Typicons](http://www.typicons.com/) - 336 pixel perfect, all-purpose vector icons.

- [Iconic](https://useiconic.com/) - The definitive icon set designed for the modern web.

- [Fontello](http://fontello.com/) - This tool lets you combine icon webfonts for your own project.



### SVG Icons



- [Evil Icons](https://github.com/outpunk/evil-icons) - Simple and clean SVG icon pack with the code to support Rails, Sprockets, Node.js, Gulp, Grunt and CDN.

- [Feather](https://feathericons.com/) - Simply beautiful open source icons.

- [eva-icons](https://github.com/akveo/eva-icons/) - A pack of more than 480 beautifully crafted Open Source icons. SVG, Sketch, Web Font and Animations support.



### Icon Sites



- [Iconfinder](https://www.iconfinder.com/) - 600,000+ free and premium icons.

- [Noun Project](https://thenounproject.com/) - Icons for everything.

- [Material Icons](https://www.google.com/design/icons/) - Material icons are beautifully crafted, delightful, and easy to use in your web, Android, and iOS projects.

- [ConvertICO](http://convertico.com/) - ConvertICO is a free online ICO/PNG file converter.

- [ICO converter](https://www.icoconverter.com/) - 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](https://nerdfonts.com/) - Iconic font aggregator, collection, and patcher.



## JavaScript



### ECMAScript 5



- [ECMA 5.1 Specification](http://www.ecma-international.org/ecma-262/5.1/)

- [ECMAScript 5 compatibility table](http://kangax.github.io/compat-table/es5/)



### ECMAScript 6



- [ECMA 6 Specification](http://www.ecma-international.org/ecma-262/6.0/index.html)

- [ES6 Features](https://github.com/lukehoban/es6features) - Overview of ECMAScript 6 features.

- [ECMAScript 6 Tutorial](http://es6.ruanyifeng.com/) - An open-source ES6 tutorial.

- [ECMAScript 6 compatibility table](http://kangax.github.io/compat-table/es6/)

- [Babel](https://babeljs.io/) - Babel is a compiler for writing next generation JavaScript.

- [Traceur](https://github.com/google/traceur-compiler) - Traceur is a JavaScript.next-to-JavaScript-of-today compiler.

- [ES6 Tools](https://github.com/addyosmani/es6-tools) - An aggregation of tooling for using ES6 today.

- [Understanding ECMAScript 6](https://github.com/nzakas/understandinges6) - Content for the ebook "Understanding ECMAScript 6".

- [ES6 Overview in 350 Bullet Points](https://github.com/bevacqua/es6)

- [ES6-for-humans](https://github.com/metagrover/ES6-for-humans) - A kickstarter guide to writing ES6.



### Promise



- [Promises](https://www.promisejs.org/)

- [Promise/A+](https://promisesaplus.com/)

- [ES6 Promise - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)

- [JavaScript Promise Book](http://liubin.github.io/promises-book/)

- [How do Promises Work?](http://robotlolita.me/2015/11/15/how-do-promises-work.html)



### Code Quality



- [eslint](https://github.com/eslint/eslint) - The pluggable linting utility for JavaScript and JSX.

- [jshint](https://github.com/jshint/jshint) - JSHint is a tool that helps to detect errors and potential problems in your JavaScript code.

- [jslint](https://github.com/reid/node-jslint) - The JavaScript code quality tool.



### Code Style



- [Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html) ([ES5](https://google.github.io/styleguide/javascriptguide.xml))

- [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)

- [idiomatic.js](https://github.com/rwaldron/idiomatic.js) - Principles of Writing Consistent, Idiomatic JavaScript.



### jQuery



- [jQuery](http://jquery.com/), [github](https://github.com/jquery/jquery)

- [jQuery UI](https://jqueryui.com/) - jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of jQuery.



### Angular



- [AngularJS](https://angularjs.org/), [github](https://github.com/angular/angular.js)

- [AngularJS 2](https://angular.io/), [github](https://github.com/angular/angular)

- [UI Bootstrap](https://github.com/angular-ui/bootstrap/) - Native AngularJS (Angular) directives for Bootstrap.

- [Angular Style Guide](https://github.com/johnpapa/angular-styleguide) - A starting point for Angular development teams to provide consistency through good practices.

- [ui-router](https://github.com/angular-ui/ui-router) - The de-facto solution to flexible routing with nested views in AngularJS.

- [Dynamically Loading Controllers and Views with AngularJS/$controllerProvider and RequireJS](http://weblogs.asp.net/dwahlin/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs)

- [Mobile Angular UI](https://github.com/mcasimir/mobile-angular-ui) - Angular & Bootstrap 3 for Mobile web and applications.



### React



- [React](https://facebook.github.io/react/), [github](https://github.com/facebook/react)

- [Awesome React](https://github.com/enaqx/awesome-react) - A collection of awesome things regarding React ecosystem.

- [Elemental UI](https://github.com/elementalui/elemental) - A flexible and beautiful UI framework for React.js.

- [React-Bootstrap](https://github.com/react-bootstrap/react-bootstrap) - Bootstrap 3 components built with React.

- [React Color](https://github.com/casesandberg/react-color) - Color Pickers from Sketch, Photoshop, Chrome & more.

- [material-ui](https://github.com/callemall/material-ui) - React Components that Implement Google's Material Design.

- [react-router](https://github.com/rackt/react-router) - A complete routing solution for React.js.

- [React in patterns](https://github.com/krasimir/react-in-patterns) - List of design patterns/techniques used while developing with React.



### Vue



- [vue](http://vuejs.org/) - Intuitive, fast & component-oriented view library for building modern web interfaces.

- [element](http://element.eleme.io) - A Vue.js 2.0 UI Toolkit for Web.

- [iview](https://github.com/iview/iview) - A high quality UI Toolkit built on Vue.js.

- [Mint UI](https://mint-ui.github.io) - Mobile UI elements for Vue.js.

- [Muse-UI](http://www.muse-ui.org)



### Ember



- [Ember.js](http://www.emberjs.com/) - A JavaScript framework for creating ambitious web applications.



### Polymer



- [polymer](https://github.com/Polymer/polymer) - Build modern apps using web components.



### Aurelia



- [aurelia](https://github.com/aurelia/framework) - 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](http://d3js.org/) - A JavaScript library for manipulating documents based on data.

- [HighCharts](http://www.highcharts.com/) - (SVG) Create interactive charts easily for your web projects.

- [ECharts](http://echarts.baidu.com/) - (Canvas) A powerful charts library from Baidu.

- [Raphaël](http://raphaeljs.com/) - (SVG/VML) Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web.

- [Springy](http://getspringy.com/) - (Canvas) Springy is a force directed graph layout algorithm.

- [Sigma](http://sigmajs.org/) - (Canvas)Sigma is a JavaScript library dedicated to graph drawing.

- [jQuery Sparklines](http://omnipotent.net/jquery.sparkline/#s-about) - (Canvas) It generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.

- [Peity](http://benpickles.github.io/peity/) - (SVG) A simple jQuery plugin that converts an element's content into a simple chart.

- [cola.js](http://marvl.infotech.monash.edu/webcola/) - (SVG) Constraint-Based Layout in the Browser.

- [vis](https://github.com/almende/vis) - Dynamic, browser-based visualization library.

- [heatmap.js](https://github.com/pa7/heatmap.js) - (Canvas) JavaScript Library for HTML5 canvas based heatmaps.

- [Chart.js](http://www.chartjs.org/) - Simple HTML5 Charts using the `` tag.

- [techan.js](https://github.com/andredumas/techan.js) - A visual, technical analysis and charting (Candlestick, OHLC, indicators) library built on D3.

- [OpenLayers](http://openlayers.org/) - A high-performance, feature-packed library for all your mapping needs.

- [Leaflet](http://leafletjs.com/) - Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps.

- [plotly.js](https://plot.ly/javascript/) - The open source JavaScript graphing library that powers Plotly.

- [vx](https://github.com/hshoff/vx) - react + d3 = vx | visualization components.

- [charts](https://github.com/frappe/charts) - Simple, responsive, modern SVG Charts with zero dependencies.

- [g2](https://github.com/antvis/g2) - The Grammar of Graphics in JavaScript.

- [BizCharts](https://github.com/alibaba/BizCharts/) - Powerful data visualization library based on G2 and React.



### Graphic



- [p5.js](https://github.com/processing/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](https://github.com/paperjs/paper.js) - The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas.



### Animation



- [GreenSock](http://greensock.com/) - Ultra high-performance, professional-grade animation for the modern web.

- [popmotion](https://github.com/Popmotion/popmotion) - A 12kb Javascript motion engine. Use for animation, physics and input tracking.

- [ramjet](https://github.com/Rich-Harris/ramjet) - Morph DOM elements from one state to another with smooth transitions.

- [jquery.transit](https://github.com/rstacruz/jquery.transit) - Super-smooth CSS3 transformations and transitions for jQuery.

- [iconate](https://github.com/bitshadow/iconate) - Transform your icons with trendy animations.

- [vivus](https://github.com/maxwellito/vivus) - JavaScript library to make drawing animation on SVG.

- [mojs](https://github.com/legomushroom/mojs) - motion graphics library for the web.

- [ScrollReveal](https://github.com/jlmakes/scrollreveal.js) - Easy scroll animations for web and mobile browsers.

- [anime](https://github.com/juliangarnier/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](https://github.com/SheetJS/js-xlsx) - XLSX / XLSM / XLSB / XLS / SpreadsheetML (Excel Spreadsheet) / ODS parser and writer.

- [PapaParse](https://github.com/mholt/PapaParse) - Fast and powerful CSV (delimited text) parser that gracefully handles large files and malformed input.

- [FileSaver.js](https://github.com/eligrey/FileSaver.js) - An HTML5 saveAs() FileSaver implementation.

- [pdf.js](https://github.com/mozilla/pdf.js) - PDF.js is a Portable Document Format (PDF) viewer that is built with HTML5.



### Clipboard



- [clipboard.js](https://github.com/zenorocha/clipboard.js) - Modern copy to clipboard. No Flash. Just 2kb.

- [zeroclipboard](https://github.com/zeroclipboard/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](https://github.com/ajaxorg/ace) - Ace is a standalone code editor written in JavaScript.

- [quill](https://github.com/quilljs/quill) - A cross browser rich text editor with an API.

- [MediumEditor](https://github.com/yabwe/medium-editor) - Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.

- [Substance](https://github.com/substance/substance) - A JavaScript library for web-based content editing.

- [Draft.js](https://github.com/facebook/draft-js) - Draft.js is a JavaScript rich text editor framework, built for React and backed by an immutable model.

- [monaco-editor](https://github.com/Microsoft/monaco-editor) - A browser based code editor.

- [slate](https://github.com/ianstormtaylor/slate) - A completely customizable framework for building rich text editors in the browser.



### Presentation



- [reveal.js](https://github.com/hakimel/reveal.js) - A framework for easily creating beautiful presentations using HTML.

- [impress.js](https://github.com/impress/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](https://github.com/imakewebthings/deck.js) - Modern HTML Presentations.



### Template



- [mustache.js](https://github.com/janl/mustache.js) - mustache.js is an implementation of the mustache template system in JavaScript.

- [rivets](https://github.com/mikeric/rivets) - Lightweight and powerful data binding + templating solution.



### Carousel



- [slick](https://github.com/kenwheeler/slick) - The last carousel you'll ever need.

- [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) - Full featured javascript lightbox gallery. No dependencies.



### Multimedia



- [howler.js](https://github.com/goldfire/howler.js) - Javascript audio library for the modern web.

- [amplitudejs](https://github.com/521dimensions/amplitudejs) - Amplitude.js is the HTML5 Audio Player for the modern era. No dependencies required.



### Misc

- [garn-validator](https://github.com/jupegarnica/garn-validator) - Create validations with ease.

- [underscore](https://github.com/jashkenas/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](https://github.com/lodash/lodash/) - A JavaScript utility library delivering consistency, modularity, performance, & extras.

- [director](https://github.com/flatiron/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](https://github.com/moment/moment) - Parse, validate, manipulate, and display dates in javascript.

- [JSVerbalExpressions](https://github.com/VerbalExpressions/JSVerbalExpressions) - VerbalExpressions is a JavaScript library that helps to construct difficult regular expressions.

- [TheaterJS](https://github.com/Zhouzi/TheaterJS) - Typing effect mimicking human behavior.

- [dragula](https://github.com/bevacqua/dragula) - Drag and drop so simple it hurts.

- [layzr.js](https://github.com/callmecavs/layzr.js) - A small, fast, modern, and dependency-free library for lazy loading.

- [smartcrop.js](https://github.com/jwagner/smartcrop.js) - Smartcrop.js implements an algorithm to find good crops for images.



## Articles



- [How browsers work](http://taligarsiel.com/Projects/howbrowserswork1.htm)

- [浏览器的渲染原理简介](http://coolshell.cn/articles/9666.html)

- [Best Practices for Speeding Up Your Web Site](https://developer.yahoo.com/performance/rules.html)

- [Critical Rendering Path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/?hl=en)

- [Chrome DevTools Overview](https://developer.chrome.com/devtools)

- [Ideas for Subtle Hover Effects](http://tympanus.net/codrops/2014/06/19/ideas-for-subtle-hover-effects/)

- [Exploring canvas drawing techniques](http://perfectionkills.com/exploring-canvas-drawing-techniques/)

- [Centering in CSS: A Complete Guide](https://css-tricks.com/centering-css-complete-guide/)

- [Learn CSS Layout](http://learnlayout.com/)

- [一文读懂前端缓存](https://zhuanlan.zhihu.com/p/44789005)



## Design



- [Material design](http://www.google.com/design/spec/material-design/introduction.html)

- [Collect UI](http://collectui.com/) - Daily inspiration collected from daily ui archive and beyond. Based on Dribbble shots, hand picked, updating daily.

- [日本の伝統色](http://nipponcolors.com/) - The traditional colors of Japan.

- [colour code](http://colourco.de/) - Find your colour scheme.

- [WEB色見本 原色大辞典](http://www.colordic.org/)



## Roadmap



- [Frontend Developer - Roadmap](https://roadmap.sh/frontend)