Skip to content

Latest commit

 

History

History
627 lines (584 loc) · 50.1 KB

awesome-frontend.md

File metadata and controls

627 lines (584 loc) · 50.1 KB
Raw

Awesome frontend

Initially forked from Awesome frontend

UI Frameworks

  • Material design
  • Material design lite - Material Design Lite Components in HTML/CSS/JS
  • base - Responsive CSS framework with IE7+ support
  • BASSCSS - Low-level CSS toolkit
  • bootflat - Bootstrap with a flat design theme
  • cardinal - Cardinal is a small mobile first CSS framework
  • caramel - A simple, beautiful, responsive, modern CSS framework
  • famo.us - Framework that helps you to create UIs
  • kube - Minimalistic Web framework
  • materialize - A modern responsive front-end framework based on Material Design
  • papier - Material design like minimal CSS framework
  • pure - A set of small, responsive CSS modules
  • semantic-ui - UI Kit with lots of themes and elements
  • skeleton - A dead simple, responsive boilerplate. Here is an unofficial SASS port of skeleton
  • uikit - A lightweight and modular front-end framework
  • Formstone - Library of modular front end components
  • Angular Material - Material design for Angular
  • Milligram - A minimalist CSS framework
  • Bulma - Modern CSS framework based on Flexbox
  • Spectre - A lightweight, responsive and modern CSS framework
  • Tachyons - Functional css for humans
  • Concise - A CSS framework that's lightweight and easy-to-use

Templates

Boilerplates

Visualisation

  • Awesome d3
  • d3 - A JavaScript visualization library for HTML and SVG
  • nvd3 - Re-usable charts and chart components for d3.js
  • c3 - D3-based reusable chart library
  • dc - For heavy amounts of data
  • D3xter - Straight forward plotting built on D3
  • D3 Extended - Extends D3 with some common jQuery functions and more
  • epoch - A general purpose, real-time visualization library
  • metricsgraphics - Optimized for visualizing time-series data
  • chartjs - Simple, clean and engaging charts for designers and developers
  • chartist - Simple responsive charts
  • dimple - An object-oriented API for business analytics powered by d3
  • sparkline - Sparkline charts library
  • sparky - Sparkline charts library based on rapahel
  • peity - Progressive mini pie, donut, bar and line charts
  • jsplumb - Visual connectivity for webapps (flowcharts, sequence diagrams, etc)
  • taucharts - Charts with a focus on design and flexibility
  • vis.js - A dynamic, browser based visualization library.
  • timesheet.js - HTML5 & CSS3 time sheets
  • morrisjs - SVG charts based on jquery and Raphael
  • Knob - Nice, downward compatible, touchable, jQuery dial
  • VIS - Dynamic, browser-based visualization library

Forms

  • Garlic - Automatically persist your forms' text and select field values locally, until the form is submitted
  • Card - Make your credit card form better in one line of code
  • Hide Show Password - Easily reveal or hide password field contents via JavaScript or a nifty inner toggle button. Supports touch quite nicely!
  • Toscani - A progressively-enhanced solution for creating a single-field credit card input
  • WFT Forms - Friendlier HTML form controls with a little CSS magic
  • JCF - Advanced form elements customization using CSS/JS
  • select2 - JQuery based replacement for select boxes
  • chosen - Library for making long, unwieldy select boxes more friendly
  • iCheck - Highly customizable checkboxes and radio buttons (jQuery & Zepto)
  • Autocomplete - Ultra lightweight, usable, beautiful autocomplete with zero dependencies
  • Labelauty - A lightweight and beautiful jQuery plugin for radio and checkbox inputs.
  • Input Types Tester
  • Progression - A jQuery plugin that gives users real time hints & progress updates as they complete forms
  • Parsley - Validate your forms, frontend, without writing a single line of javascript
  • Strectchy - Form element autosizing
  • Cleave - Format your content when you are typing

Validation

Numbers & Currencies

  • Numeral.js - Formatting and manipulating numbers
  • accounting.js - Number, money and currency formatting
  • money.js - Currency conversion library
  • AutoNumeric - autoNumeric is a jQuery plugin that automatically formats currency (money) and numbers as you type on form inputs.

Maps

  • Google static maps v2
  • leaflet - Library for mobile-friendly interactive maps
  • Snazzy maps - Free styles for google maps
  • Mapael - Ease the build of pretty data visualizations on dynamic vector maps
  • JQV Map - jQuery Vector Maps
  • Jquery Vector Map - A vector-based, cross-browser and cross-platform component for interactive geography-related data visualization on the web
  • topojson - An extension to GeoJSON that encodes topology
  • planetary - Interactive globes for the web
  • smallworld - A small utility for generating a small world
  • turf - A modular geospatial engine
  • osmbuildings - Library for visualizing buildings as pseudo 3D objects on interactive maps
  • openlayers3 - Mapping library that supports different projections
  • Kartograph - Simple and lightweight framework for building interactive map applications without Google Maps
  • mapsicon - Collection of maps for nearly every country in the world in PNG and SVG
  • Cesium - JavaScript library for creating 3D globes and 2D maps in a web browser without a plugin.
  • Maps icon - A free collection of maps for every country in the world, available in 11 sizes or in SVG
  • Map Glyphs - The Ultimate CSS Map Font

Typography

Video

Audio

Tables

  • Tablesaw - A group of plugins for responsive tables
  • sortable - Makes tables sortable
  • handson table - Minimalist Excel-like data grid editor
  • dynatables - Semantic and interactive table plugin using jQuery, HTML5, and JSON
  • DataTables - jQuery plugin which adds sorting, paging and filtering abilities to plain HTML tables with minimal effort
  • Footable - jQuery plugin to make HTML tables responsive

Statistics

  • datalib - Javascript data utility library
  • jstat - Javascript Statistical Library
  • simple-statistics - simple statistics for node & browser javascript

Module Loaders

  • Browserify - Lets you require('modules') in the browser
  • RequireJS - A file and AMD module loader
  • stealjs - Dependency loader and builder
  • Systemjs - ES6, AMD and CommonJS loader
  • webpack - CommonJs and AMD module loader

Lazy-Loading

  • loadXT - Lazy loading for any elements
  • Async - Async utilities for node and the browser
  • Aload - Asynchronously loads images, scripts, styles and more
  • echo - Standalone JavaScript lazy-loading image micro-library
  • Unveil - Lightweight plugin to lazy load images for jQuery or Zepto.js
  • aLoad - Loads images, background images, scripts, styles, iframes, videos and audios asynchronously (just 260 bytes)
  • Images Loaded - Detect when images have been loaded
  • Layzr - A small, fast, modern, and dependency-free library for lazy loading images
  • Lazy Loading Google Maps
  • Responsively Lazy - Lazy load responsive images
  • Antimoderate - The progressive image loading library for great good
  • LoadJS - A tiny async loader / dependency manager for modern browsers

Scrolling

  • Scroll reveal - Easy scroll animations for web and mobile browsers
  • scrollme - A jQuery plugin for adding simple scrolling effects to web pages
  • WOW - Reveal CSS animation as you scroll down a page
  • ScrollMagic - Library for scroll interactions
  • fracs - Plugin to determine the visible fractions of HTML elements
  • skrollr - Stand-alone parallax scrolling library for mobile and desktop
  • Overscroll - Javascript for adding small easter eggs when over scrolling on apple devices
  • Page piling - Create a scrolling pile of sections
  • Fart scroll - You want fart noises as you scroll? We've got you covered!

Animations and Transitions

  • animate.css - A cross-browser library of CSS animations
  • impulse - Dynamic physics interactions for the mobile web
  • velocity - Accelerated JavaScript animation
  • GSAP - Fast animation library
  • bounce.js - CSS3 powered animations
  • snabbt - Animations with JavaScript and CSS transforms
  • semantic ui - transition - Simple CSS3 Animations and transitions
  • tween.js - Tweening engine
  • Hover.css - CSS3 Hover Effects
  • Animsition - A simple and easy jQuery plugin for css animated page transitions
  • Waves - Click effect inspired by Google's Material Design
  • Vivus - JavaScript library to make drawing animation on SVG
  • Dynamics - Javascript library to create physics-based CSS animations
  • Motion UI - Sass library for creating transitions and animations
  • Smooth State - Unobtrusive page transitions with jQuery
  • Animate on scroll library
  • MoJS - motion graphics toolbelt for the web

Sliders, Carousels and Lightboxes

  • Slick - the last carousel you'll ever need
  • Flickity - Touch, responsive, flickable galleries
  • Viewer - JavaScript image viewer
  • Owl Carousel - Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider
  • Magnific Popup - Magnific Popup is a responsive lightbox & dialog script
  • Photo Swipe - JavaScript image gallery for mobile and desktop, modular, framework independent
  • Swiper - Most modern mobile touch slider with hardware accelerated transitions
  • CSS Modal - A modal built out of pure CSS
  • Flex Slider - An awesome, fully responsive jQuery slider plugin
  • Medium's Image Zoom for jQuery
  • Wallop - Much more than just a slider
  • Remodal - Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking
  • Vex - A modern dialog library which is highly configurable and easy to style
  • Chocolat - Responsive jQuery Lightbox Plugin
  • Light Gallery - jQuery - A customizable, modular, responsive, lightbox gallery plugin for jQuery
  • Light Gallery - VanillaJS - Full featured JavaScript image & video gallery. No dependencies
  • Modaal - An accessible dialog window library for all humans
  • Zooming - Image zoom that makes sense
  • Siema - Lightweight and simple carousel in pure JavaScript

Navigation

  • Slideout - A touch slideout navigation menu for your mobile web apps
  • mmenu - A jQuery plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp
  • Snap - A Library for creating beautiful mobile shelfs in Javascript (Facebook and Path style side menus)
  • Menu Aim - jQuery plugin to fire events when user's cursor aims at particular dropdown menu items. For making responsive mega dropdowns like Amazon's
  • Paradeiser - Small and sleek mobile navigation
  • Burger - The minimal hamburger menu with fullscreen navigation
  • NavNav - A ton of CSS, jQuery, and JavaScript responsive navigation examples, demos, and tutorials from all over the web
  • Hamburgers - Tasty CSS-animated hamburgers
  • okayNav - The world's okayest responsive navigation, Codepen example.
  • MenuSPY - A JavaScript library to make navigation menus highlight the item based on currently in view section.

UI Elements

  • awesomplete - Lightweight autocomplete
  • tether - Marrying UI Elements (dropdown, tooltips, guide, selects)
  • button concepts - List of CSS button variations
  • Pace - Automatically add a progress bar to your site
  • NProgress - Slim progress bars for Ajax'y applications. Inspired by Google, YouTube, and Medium
  • PleaseWait.js - A simple library to show your users a beautiful splash page while your application loads
  • SweetAlert - An awesome replacement for JavaScript's alert
  • MProgress.js - Google Material Design Progress Linear bar
  • countUp.js - Count up or down animation effects for numbers
  • Messenger.js - Client-side growl-like notifications with actions and auto-retry.
  • Sortable.js - Reorderable drag-and-drop lists
  • Lists - The perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements
  • Unicorn UI Buttons - A CSS button library built using Sass and Compass
  • UI Gradients - Dual tone colour gradients for design and code
  • Medium editor - Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution
  • Zxcvbn - A realistic password strength estimator from dropbox
  • Buttons - Bulletproof email buttons
  • side-comments - Medium style comments
  • Screenfull - Simple wrapper for cross-browser usage of the JavaScript Fullscreen API
  • Full Page - Create full screen pages fast and simple
  • Headroom - A lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user's scroll
  • Pour Over - A library for simple, fast filtering and sorting of large collections in the browser
  • The Background Pattern Library
  • Loaders - Delightful, performance-focused pure css loading animations
  • Material preloader - A jQuery plugin that recreates the Material Design pre-loader (as seen on inbox)
  • Tabulous - A jQuery tabs module for todays web
  • Toolkit - A front-end UI toolkit built with HTML5, CSS3, jQuery, Sass and Gulp
  • Material Refresh - Google Material Design swipe(pull) to refresh by using JavaScript and CSS3
  • CSS Spinners
  • Loading Buttons - Loading buttons
  • Popper - A kickass library to manage your poppers
  • Bttn - Awesome buttons for awesome projects!
  • Push - A compact, cross-browser solution for the JavaScript Notifications API

Templating

  • nunjucks - A rich and powerful templating language
  • mustache - Minimal templating with {{mustaches}} in JavaScript
  • dotjs - Fast templating engine
  • Hogan - JavaScript templating
  • paperclip.js - Reactive DOM template engine built for speed, and extensibility
  • Handlebars - Handlebars.js is an extension to the Mustache templating language

HTTP requests

  • reqwest - Browser asynchronous HTTP requests
  • superagent - Client-side HTTP request library
  • aja - Asynchronous JavaScript And JSON(P)
  • fetch - A window.fetch javascript polyfill

Date and time

  • Knwl - Find Dates, Places, Times, and More. A .js library for parsing text for specific information
  • moment.js - Parse, validate, manipulate, and display dates
  • sugar - Parse, create, manipulate, compare, format and display dates
  • jQuery Age - Age is a jQuery plugin that formats and tracks dates and times as human readable text
  • datedropper - datedropper is a jQuery plugin that provides a quick and easy way to manage dates for input fields.
  • Pikaday - A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS

Events

General

  • HTML5 Boilerplate - A professional front-end template for building fast, robust, and adaptable web apps or sites
  • Timeline JS - A Storytelling Timeline built in JavaScript
  • accounting.js - Number, money and currency formatting
  • YMNNJQ - See jQuery functions in natural JS. No libraries.
  • CSS Shrink - Minify CSS
  • JPG glitch - Image glitch experiment
  • Planetary - Awesome interactive globes for the web
  • Easings - Easing Functions Cheat Sheet
  • fit.js - Fit things into other things
  • Shine.js - A library for pretty shadows
  • Webshim - Webshims Lib is a modular capability-based polyfill-loading library
  • Responsible.js - Give Users the choice of what mobile experience they want. Adds Toggle for mobile to desktop switching without page reloads
  • Markdownify - The simplest markdown editor with built in cloudinary image upload
  • Trianglify Generator
  • Caret generator
  • Hammer - A javascript library for multi-touch gestures
  • Social count - Simple barebones project to show share counts from various social networks
  • Background blur - Ultra light cross browser image blurring plugin for jQuery
  • Unsplash it - Beautiful placeholders using images from unsplash
  • Pure CSS Apple Devices
  • Rucksack - A little bag of CSS superpowers, built on PostCSS
  • qTip2 - Pretty powerful tooltips
  • Balloon - Simple tooltips made of pure CSS
  • UpUp - UpUp is a tiny javascript library that makes sure your users can always access your site's content
  • Offline.js - Automatically display online/offline indication to your users
  • Jets - Native CSS search engine
  • Algebra - Build, display, and solve algebraic equations
  • Clipboard - Modern copy to clipboard
  • CSSGram - CSS library for Instagram filters
  • Color Filter - Duotone filters made with CSS
  • Smart Crop - Content aware image cropping
  • Notie - A clean and simple notification plugin (alert/growl style) for javascript, with no dependencies
  • Jump - A small, modern, dependency-free smooth scrolling library
  • Mo.js - Motion graphics toolbelt for the web
  • Feature - Feature.js is a fast, simple and lightweight browser feature detection library in 1kb
  • Embed - A JavaScript plugin that embeds emojis, media, maps, tweets, gists, code, services and markdown
  • Fuse - Lightweight fuzzy-search, in JavaScript
  • Tippy - A lightweight, pure JS tooltip library
  • CSS Generator - A CSS generator that helps you demonstrate and quickly generate CSS declarations for your website
  • debugCSS - CSS to highlight potentially malformed, invalid or questionable markup

Icons

Colors

  • chromajs - Library for all kinds of color manipulations
  • coolors - Super fast color scheme generator
  • Flag colors - A 600+ color collection available in sass, less, stylus and css
  • bootflat color picker - Color picker for flat design
  • color - Intuitive color picker
  • colourco - Color scheme tool
  • uiGradients - A handpicked collection of beautiful colour gradients for design and code
  • Colors - Smarter Default colors on the web.
  • colorbrewer2 - Color advice for cartography
  • Background check - Automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it
  • Color Peek - Simply share one or more CSS colors
  • Adaptive Backgrounds - A jQuery plugin for extracting the dominant color from images and applying the color to their parent
  • Gradient Animator
  • Colors - Smarter defaults for colors on the web
  • Material Palette - Material Design Color Palette Generator
  • Colorrrs - A simple tool for converting HEX values to RGB and vice versa
  • Vibrant - Extract prominent colors from an image. JS port of Android's Palette.
  • Brand colors - Official color codes for the world's biggest brands
  • Crayon - Crayon.css is a list of css variables linking color names to hex values
  • Color Hunt - Curated collection of beautiful colors, updated daily
  • CSS Filters - Custom and Instagram like photo filter playgorund for CSS
  • Color Safe - Accessible web color combinations
  • Color Lisa - Color palette masterpieces from the world's greatest artists
  • Colorion - Curated color palettes
  • Grade - JavaScript library produces complementary gradients generated from the top 2 dominant colours in supplied images
  • Open Color - Open-source color scheme
  • Accessible color palette builder

Keyboard Events

  • jwerty - Handling of keyboard events
  • Mousetrap - Simple library for handling keyboard shortcuts in Javascript
  • Keypress - A keyboard input capturing utility in which any key can be a modifier key
  • Konami code - Using the Konami code, easily configure and Easter Egg for your page or any element on the page
  • keymaster - Simple key listener

Favicons

Databases

  • ForerunnerDB - Database with mongo-like query language and data-binding support
  • localForage - Library like a localStorage API with fallback store for browsers with no IndexedDB or WebSQL support
  • LokiJS - Embeddable / in-memory database
  • lovefield - SQL-like, relational query engine for the browser
  • store.js - LocalStorage wrapper for all browsers without using cookies or flash. Uses localStorage, globalStorage and userData behavior
  • pouchdb - Created to help developers build applications that work as well offline as they do online
  • taffydb - Brings database features into your JavaScript applications

Local storage

  • store.js - LocalStorage wrapper for all browsers without using cookies or flash. Uses localStorage, globalStorage and userData behavior
  • localForage - Library like a localStorage API with fallback store for browsers with no IndexedDB or WebSQL support
  • Basil - The missing Javascript smart persistent layer
  • Storage - Asynchronous browser storage with multiple back-ends (IndexedDB, WebSQL, localStorage)

Social

  • socialcount - Custom sharing buttons with share count
  • whatsapp button - Creates a whatsapp sharing button
  • rrssb - Ridiculously Responsive Social Sharing Buttons
  • share-button - Fast, beautiful, and painless social shares
  • Social Likes - Single-style sharing buttons with counters for jQuery
  • Share Buttons - Super fast and easy Social Media Sharing Buttons. No JavaScript. No tracking

Accessibility

Flexbox

Performance

  • Justice - Embeddable script for displaying web page performance metrics
  • Postscribe - Asynchronously write javascript, even with document.write.

Internationalization

  • l10ns - Internationalization workflowand formatting
  • globalize - A JavaScript library for internationalization and localization that leverages the official Unicode CLDR JSON data

Codepen collection

Email newsletter

Repositories

Here I collect those repositories that are educational and cover more than one aspect of web design & development

CSS Secrets

Articles

Tools

  • Parker - Stylesheet analysis tool