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: 3 days ago
JSON representation

  • JavaScript

  • Tools

    • Package Management

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

    • Module

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

    • Build

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

  • Articles

  • CSS

    • 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.
      • 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).
      • MUI - MUI is a lightweight CSS framework that follows Google's Material Design guidelines.
      • bootstrap-material-design - Material design theme for Bootstrap 3.
      • Skeleton - Skeleton is a simple, responsive boilerplate to kickstart any responsive project.

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

    • CSS Animation

      • Animation Menus - Collection of HTML and CSS menu with little JavaScript: accordion, circular, dropdown, fullscreen, horizontal, mobile, off-canvas, side, toggle and sliding.
      • Hover - A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on.
      • loaders.css - Delightful, performance-focused pure css loading animations.
      • css-spinners - Simple CSS spinners and throbbers made with CSS and minimal HTML markup.

  • Icons

    • Icon Sites

      • Noun Project - Icons for everything.
      • Iconfinder - 600,000+ free and premium icons.
      • 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.
      • ConvertICO - ConvertICO is a free online ICO/PNG file converter.

    • 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.
      • Entypo - 411 carefully crafted premium pictograms by Daniel Bruce — CC BY-SA 4.0.

    • SVG Icons

      • Feather - Simply beautiful open source icons.

  • JavaScript Libs

    • Data Visualization

      • 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.
      • jQuery Sparklines - (Canvas) It generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.
      • plotly.js - The open source JavaScript graphing library that powers Plotly.
      • ECharts - (Canvas) A powerful charts library from Baidu.
      • g2 - The Grammar of Graphics in JavaScript.
      • charts - Simple, responsive, modern SVG Charts with zero dependencies.
      • 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.
      • vis - Dynamic, browser-based visualization library.
      • 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.
      • Peity - (SVG) A simple jQuery plugin that converts an element's content into a simple chart.
      • 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.

    • Editor

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

    • Animation

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

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

    • Misc

      • dragula - Drag and drop so simple it hurts.
      • 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.
      • JSVerbalExpressions - VerbalExpressions is a JavaScript library that helps to construct difficult regular expressions.
      • moment - Parse, validate, manipulate, and display dates in JavaScript.
      • smartcrop.js - Smartcrop.js implements an algorithm to find good crops for images.
      • layzr.js - A small, fast, modern, and dependency-free library for lazy loading.
      • 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.
      • TheaterJS - Typing effect mimicking human behavior.
      • garn-validator - Create validations with ease.
      • lodash - A JavaScript utility library delivering consistency, modularity, performance, & extras.

    • File

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

    • Presentation

      • 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.
      • reveal.js - A framework for easily creating beautiful presentations using HTML.

    • Template

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

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

    • 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.
      • lightgallery.js - Full featured javascript lightbox gallery. No dependencies.
      • slick - The last carousel you'll ever need.

  • Design

  • Roadmap

  • 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.
Programming Languages
JavaScript 54 CSS 7 TypeScript 7 HTML 2 Vue 1 SCSS 1
Categories
JavaScript Libs 59 JavaScript 46 CSS 17 Icons 10 Articles 10 Tools 7 Design 4 Compatibility 2 Roadmap 1
Sub Categories
Misc 25 Data Visualization 16 Vue 14 Animation 9 ECMAScript 6 7 Editor 7 CSS Frameworks 6 React 6 Icon Fonts 5 Angular 5 CSS Misc 5 CSS Animation 4 Module 4 Icon Sites 4 Presentation 3 Code Style 3 Build 3 Promise 3 Code Quality 3 Template 3 File 3 Clipboard 2 Multimedia 2 Package Management 2 jQuery 2 Carousel 2 Graphic 2 Processors 2 Aurelia 1 ECMAScript 5 1 Polymer 1 SVG Icons 1
Keywords
javascript 27 css 9 react 5 animation 5 typescript 5 svg 4 es6 4 web 4 html 4 editor 4 canvas 3 es2015 3 nodejs 3 framework 3 frontend 2 css-framework 2 visualization 2 design 2 material 2 icons 2 angularjs 2 dom 2 clipboard 2 eslint 2 education 2 graphics 2 chart 2 text-editor 2 wysiwyg 2 rich-text-editor 2 browser 2 javascript-library 2 css3-features 1 es2018 1 feature-detection 1 es2017 1 es2016 1 arrow-functions 1 modernizr 1 bootstrap 1 sprites 1 material-design 1 ios 1 react-components 1 android 1 art 1 slate 1 rich-text 1 mui 1 meteor 1