Skip to content

syaning/awesome-frontend

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

113 Commits

README.md

README.md

 
 

Repository files navigation

Awesome Frontend

Table of Contents

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

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

ECMAScript 6

Promise

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

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

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

Design

Roadmap

About

Awesome frontend, also my collections.

Topics

frontend

Resources

Readme
Activity

Stars

676 stars

Watchers

25 watching

Forks

75 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 9