Tuesday, May 19, 2015

50 CSS and JavaScript Tools, Frameworks and Libraries from 2015



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 Libraries & Frameworks 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


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




The post 50 CSS and JavaScript Tools, Frameworks and Libraries from 2015 appeared first on Speckyboy Web Design Magazine.



50 CSS and JavaScript Tools, Frameworks and Libraries from 2015

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.