Javascript Frameworks

50 CSS and JavaScript Frameworks, Tools and Libraries

Keeping up with the new releases in web design is not easy. There are new tools, libraries and frameworks seemingly released every other day. The good news is we’re here to summarize everything up for you.

In total, we have trimmed this CSS and JavaScript resource collection down to our 50 favorites, just to make things easier for you.

All of the tools, libraries and frameworks have been categorized into the following categories: CSS Libraries & Toolkits, Flexbox Tools, Responsive Web Frameworks, Material Design Frameworks, Random CSS Stuff, JavaScript Frameworks & Libraries and finally a bunch of Web-Based Apps.

CSS Libraries & Toolkits

Fileicon, a collection of pure CSS file icons.
Fileicon, a collection of pure CSS file icons

Marx, the stylish CSS reset with no Javacript or Classes. Just raw CSS.
Marx, the stylish CSS reset with no Javacript or Classes. Just raw CSS

Transformicons – Animated icons, symbols and buttons using SVG and CSS.
Transformicons - Animated icons, symbols and buttons using SVG and CSS

sanitize.css makes browsers render elements consistently and allows you to style with today’s best practices out-of-the-box.
sanitizecss

Loaders.css, a collection of performance-focused pure css loading animations.
Loaders.css, a collection of performance-focused pure css loading animations

SassyFlags is a simple library for adding flags to your websites.
sassyflags

Primer, the CSS toolkit and guidelines that power GitHub.
Primer, the CSS toolkit and guidelines that power GitHub

Flickity, a CSS library that makes galleries & sliders feel lively and effortless.
Flickity, a CSS library that makes galleries & sliders feel lively and effortless

Pushy, a responsive off-canvas navigation menu using CSS transforms & transitions.
Pushy, a responsive off-canvas navigation menu using CSS transforms & transitions

CSS Stats, a tool that will visualize useful stats about your CSS.
CSS Stats, a tool that will visualize useful stats about your CSS

Flexbox Tools

flexbox in 5 minutes, an interactive tour of all the major features of the CSS property: flexbox.
flexbox in 5 minutes, an interactive tour of all the major features of the CSS property: flexbox

Flexbugs, a community-curated list of flexbox issues and cross-browser workarounds
Flexbugs

cssPlus, a robust, fast and cross browser layout scaffolding based on Flexbox.
cssPlus

Responsive Web Frameworks

flexible.gs, a responsive and flexible grid system CSS framework (CSS, Sass, LESS and Stylus).
flexible.gs responsive and flexible grid system CSS framework

Rin, a lean, gulp-based HTML and SASS boilerplate for better front-end coding.
Rin, a lean, gulp-based HTML and SASS boilerplate for better front-end coding

Wee, a lightweight front-end framework for logically building complex, responsive web projects.
Wee, a lightweight front-end framework for logically building complex, responsive web projects

spaceBase, a Sass-based responsive CSS framework.
spaceBase, a Sass-based responsive CSS framework

Decorator, a new HTML, CSS, and JavaScript front-end framework.
Decorator, a new HTML, CSS, and JavaScript front-end framework

Rebar, a new Sass / Stylus grid framework.
Rebar,  a new Sass / Stylus grid framework

Lost, a SCSS or Stylus fractional grid system built with calc().
Lost, a SCSS or Stylus fractional grid system built with calc()

RWDGRID, a responsive grid system based on the 960 grid system.
RWDGRID, a responsive grid system based on the 960 grid system

Manhattan, a clean, lightweight and customisable CSS grid system.
Manhattan

Material Design Frameworks

Material, a HTML5 UI framework based on Material Design.
Material, a HTML5 UI framework based on Material Design

LumX, the first responsive front-end framework based on AngularJS & Material Design specs.
LumX, the first responsive front-end framework based on AngularJS & Material Design specs

MUI, a lightweight Material Design web framework.
MUI, a lightweight Material Design web framework

Random CSS Stuff

icono, a set of pure CSS icons with only one element.
icono, a set of pure CSS icons with only one element

CSS Gradient Animator, a web-based tool for generating animated gradients.
CSS Gradient Animator, a web-based tool for generating animated gradients

localFont, a web app for implementing localStorage web font caching in seconds.
localFont, a web app for implementing localStorage web font caching in seconds

Web Font Load – The easiest way to install all of the Google Web Fonts on OSX.
Web Font Load - The easiest way to install all of the Google Web Fonts on OSX

ai2html, an open-source script for Adobe Illustrator that converts Illustrator documents into HTML and CSS.
ai2html, an open-source script for Adobe Illustrator that converts Illustrator documents into HTML and CSS

JavaScript Libraries & Frameworks

Marx, the stylish CSS reset with no Javacript or Classes. Just raw CSS.
Marx, the stylish CSS reset with no Javacript or Classes. Just raw CSS

Sprint, a tiny, lightning fast jQuery-like library for modern browsers.
Sprint, a tiny, lightning fast jQuery-like library for modern browsers

Svidget.js, a JavaScript framework for building fantastic SVG widgets.
Svidget.js, a JavaScript framework for building fantastic SVG widgets

Challenger.js, a drop-in JS library that adds interactive programming pop-up challenges to any page.
Challenger.js, a drop-in JS library that adds interactive programming pop-up challenges to any page

Vorlon.JS, an open source, extensible, platform-agnostic tool for remotely debugging and testing JS.
Vorlon.JS, an open source, extensible, platform-agnostic tool for remotely debugging and testing JS

Layzr.js, a small, fast, modern, and dependency-free library for lazy loading.
Layzr.js, a small, fast, modern, and dependency-free library for lazy loading

Clusterize.js, a tiny vanilla JS plugin to display large data sets easily.
Clusterize.js a tiny vanilla JS plugin to display large data sets easily

Elevator.js, a “back to top” button that behaves like a real elevator.
back to top" button that behaves like a real elevator

egg.js, a simple javascript library to add easter eggs to web pages.
egg.js, a simple javascript library to add easter eggs to web pages

epicGrid, a pure, lightweight, responsive Javascript solution for building grid systems.
epicGrid, a pure, lightweight, responsive Javascript solution for building grid systems

ramjet.js, a library that morphs DOM elements from one state to another with smooth transitions.
ramjet.js a library that morphs DOM elements

ItemSlide.js, a simple JavaScript touch carousel with support for touch swiping & mousewheel scrolling.
ItemSlide.js a simple JavaScript touch carousel

Plumin.js – Create and manipulate fonts using Javascript.
Plumin.js - Create and manipulate fonts using Javascript

Smiley.js, a script for rotating smiley faces on your site to the correct viewing.
Smiley.js, a script for rotating smiley faces on your site to the correct viewing

vivus.js, a lightweight JavaScript class that allows you to animate SVGs.
vivus.js, a lightweight JavaScript class that allows you to animate SVGs

Rimg – A pure JS responsive image solution for browsers that support mediaqueries.
Rimg - A pure JS responsive image solution for browsers that support mediaqueries

Animsition, a simple and easy jQuery plugin for CSS animated page transitions.
Animsition, a simple and easy jQuery plugin for CSS animated page transitions

Unicoder.js, a JS library that converts text to some of the more artistic unicode alphabets.
Unicoder.js, a JS library that converts text to some of the more artistic unicode alphabets

Space.js, an HTML-driven JavaScript library for narrative 3D-scrolling.
Space.js an HTML-driven JavaScript library for narrative 3D-scrolling

cta.js, a lightweight library for animating your “action-to-effect” paths.
cta.js a lightweight library for animating

Awesomplete, an ultra lightweight, highly customizable and simple autocomplete jQuery plugin.
Awesomplete, an ultra lightweight, highly customizable and simple autocomplete jQuery plugin

Select or Die, a jQuery plugin to style <select> elements.
select-die

Textures.js — a set of SVG elements for data visualization.
texturesjs

datedropper, a jQuery plugin that offers an easy way to manage dates for input fields.
datedropper, a jQuery plugin that offers an easy way to manage dates for input fields

underline.js, a Javascript library that sets out draw and animate the most perfect and playful text underline.
underline.js, a Javascript library that sets out draw and animate the most perfect and playful text underline

lory.js, a touch enabled minimalistic slider written in vanilla JavaScript.
lory.js, a touch enabled minimalistic slider written in vanilla JavaScript

snabbt.js, a minimalistic Javascript animation library that will translate, rotate, scale, skew and resize elements.
snabbt.js, a minimalistic Javascript animation library that will translate, rotate, scale, skew and resize elements

Slideout.js, a touch slideout navigation menu for your mobile web apps.
Slideout.js, a touch slideout navigation menu for your mobile web apps

JavaScript Garden, a collection of docs about the quirkier parts of JavaScript.
JavaScript Garden

Web-Based Apps

Epic Favicon Generator, a tool for generating 20 favicon sizes.
Epic Favicon Generator, a tool for generating 20 favicon sizes

gitgoodies, a collection of shortcuts for the Git commands you use everyday.
gitgoodies, a collection of shortcuts for the Git commands you use everyday

CIRCULUS.SVG, an SVG circular menu generator.
CIRCULUS.SV, an SVG circular menu generator

CSS Ruler, a handy web-based tool for exploring CSS lengths.
CSS Ruler, a handy web-based tool for exploring CSS lengths

Stickshift – A clean & modern SQL data interface.
Stickshift - A clean & modern SQL data interface

T3 JavaScript Framework, a minimalist JavaScript framework that provides core structure to code.
T3 JavaScript Framework, a minimalist JavaScript framework that provides core structure to code

SVGOMG, a web-based app for optimizing and configuring SVGO.
SVGOMG, a web-based app for optimizing and configuring SVGO

HTML Arrows, a clean and colorful place for all HTML symbol codes.
HTML Arrows, a clean and colorful place for all HTML symbol codes

.resizr, a simple app for testing your CSS media queries.
resizr, a simple app for testing your CSS media queries

A super simple Pie Menu Generator.
A super simple Pie Menu Generator

Related Posts: