Trends

50 Free Resources for Web Designers from 2014

In this post, I have collated my top 50 free resources for web designers from 2014.

There are libraries for quickly creating CSS charts and animating SVG icons, tools for converting image files to data URIs, web-based apps for creating icon fonts from SVGs, jQuery plugins for touch-enabled sliders, JavaScript libraries for creating animated GIFs, generators for creating Flexbox layouts… and much, much more.

To help you find exactly what you’re looking for, I’ve broken the resources down into JavaScript Plugins & Tools, CSS Libraries, Tools & Frameworks, and Web-Based Tools & Services.

 

Free JavaScript Plugins & Tools

 

lightSlider is a lightweight and responsive content slider jQuery plugin with carousel thumbnails navigation.

lightSlider

 

BttrLazyLoading is a jQuery plugin that allows your web app or page to only load images within the viewport.

BttrLazyLoading

 

Gridscrolling.js is a jQuery plugin that lays outs an HTML5 article for you by positioning sections and asides in a grid, and offers an easy cursor navigation and overview map.

Gridscrolling.js

 

Adaptive Backgrounds is a jQuery plugin for extracting the dominant colors from images and applying it to its parent, allowing your layout to have a blended color scheme.

Adaptive Backgrounds

 

jNottery is a jQuery plugin that lets you add notes and markers to webpages. All the data is encoded as part of an URL which makes it easy to share or bookmark.

jNottery

 

HideSeek is a simple, yet customizable live search jQuery plugin.

HideSeek

 

fontFlex is a lightweight jQuery plugin for dynamically changing font sizes based on the container or browser width.

fontFlex

 

Gif Shot is a JavaScript library that can create animated GIFs from media streams, videos, or images.

Gif Shot

 

Ideal Image Slider is a slider plugin that has just the right amount of features, with no bloat.

Ideal Image Slider

 

SVG Morpheus is a JavaScript library that enables SVG icons to transition from one to the other in a Material Design style.

SVG Morpheus

 

The Shuffle Images jQuery plugin lets you display and shuffle multiple images by simply moving the cursor.

Shuffle Images

 

Timesheet.js is a simple JavaScript library for creating beautiful HTML time sheets.

Timesheet.js

 

Face Detection is an amazing jQuery (and Zepto) plugin for detecting faces on images and videos.

Face Detection

 

Sweep.js is a lightweight JavaScript library (5kb zipped) that enables proper color transitions through the HSL and HUSL spaces.

 

Data Img is a simple jQuery plugin for dealing with responsive image delivery. It works by simply swapping the 'image src' / 'background-image url' depending on screen width.

Data Img

 

Vivus.js is a lightweight JavaScript class that allows you to animate SVGs, giving them the appearence of being drawn.

Vivus.js

 

pagePiling.js is a jQuery plugin for creating a pile of sections that you can access by either scrolling or directly by URL.

pagePiling.js

 

Flow is a static type checker for JavaScript. It can be used to catch common bugs in JavaScript programs without any changes to the code.

Flow

 

Gif Player is a customizable jQuery plugin that allows you to add play and stop controls to animated gifs.

Gif Player

 

Naver is a simple jQuery plugin that will automatically turn a basic navigation system into a mobile friendly system.

Naver

 

Free CSS Libraries, Tools & Frameworks

 

Materialize is a lightweight CSS Framework that has been based on Google’s Material Design. The framework comes in two different forms, the standard with unminified CSS & JS, and the Sass version, which gives you more control over which components to include.

Materialize

 

Foundation for Apps (Sass) is an Angular-powered front-end framework for making fully immersive and flexible apps.

Foundation for Apps

 

Schema is a modular front-end framework (Less) to help you kick-start your process for creating complex interfaces right out the box.

Schema

 

Flexbox Grid, as the name suggests, is a grid system based on the flex display property.

Flexbox Grid

 

Blueplate is a lightweight plugin for the Webplate front-end framework. The plugin adds a responsive CSS layout engine and SASS mixin library to an already solid framework.

Blueplate

 

Magic Animations is a CSS3 animation library with some fantastic special effects.

Magic Animations

 

Material UI is a combines React components with a CSS (Less) Framework that implements Google’s Material Design. You can grab the Sass version here.

Material UI

 

Inspired by tools like Compass and Bourbon, Kouto Swiss is a complete CSS framework for Stylus. The framework comes packaged with a huge selection of mixins, functions and utilities , and also includes the power of the caniuse website to help your CSS fit your compatibility needs.

Kouto Swiss

 

Tumblr-Cog-Loaders is an amazing library of animated Tumblr-style cog loading icons. Built with only CSS and SVG.

Tumblr-Style-Cog-Loaders

 

CSS Plot is a small library of CSS-only charts and graphs.

CSS Plot

 

Animate.css is a collection of cross-browser animations for you to use in your projects.

Animate.css

 

Material Design for Bootstrap is a theme for Bootstrap 3 which lets you use Google’s new Material Design language in the worlds most popular front-end framework.

Material Design for Bootstrap

 

Imacss is a library that converts image files to data URIs and embeds them into a single CSS file as background images.

Imacss

 

NightTabs is a clean and responsive solution for creating a beautiful tabbed content navigation without any JavaScript.

NightTabs

 

CSSDevices is a pure-CSS library of flat Apple devices. It allows you to easily add a pure-CSS iOS device to your website to show off the screenshots of your cool new app.

CSSDevices

 

CSS-On-Diet (COD) is a new preprocessor built specifically for designers. Other preprocessors do have steep learning curves, while COD, with it’s simpler syntax, focuses on allowing you to write CSS faster.

CSS-On-Diet

 

Marka is an innovative and ‘transform-able’ collection of icons, beautifully and carefully designed to work on the web.

Marka

 

Web-Based Tools & Services

 

Font Flipper is a simple web-based tool for browsing and experimenting with the fonts that are installed on your computer.

Font Flipper

 

Font Family Reunion is a reference tool for looking-up the default font lists on different operating systems.

Font Family Reunion

 

Type-Finder is a tool for helping you navigate a curated library of typefaces by asking a set of questions that will help to select the perfect font family.

Type-Finder

 

BADA55.io is tool for finding the most ‘badass’ leet words for your CSS hex colors. You know #b000b5, #bada55, that kind of thing.

BADA55.io

 

Glyphter is a handy tool for creating icon fonts from SVGs.

Glyphter

 

SVG Circus is a web-based tool for creating cool animated SVG spinners, loaders and other looped animations quickly.

SVG Circus

 

Fibonacci is a generator that will allow non-developers to design web page layouts using Flexbox, all without having to learn HTML or CSS.

Fibonacci

 

Flexy Boxes is a flexbox code generator and learning playground.

Flexy Boxes

 

EnjoyCSS is an advanced CSS3 generator with an easy-to-use UI that allows you to adjust rich graphical styles quickly and without coding.

EnjoyCSS

 

Built for font design hobbyists, Glyphr Studio is a free, feature-rich web-based tool for designing fonts.

Glyphr Studio

 

PatternBolt is a library and generator of SVG pattern backgrounds that you can download as a single CSS or SCSS file.

PatternBolt

 

LoremFlickr is a simple and free image placeholder service. The images are pulled from Flickr and have a Creative Commons license.

LoremFlickr

 

StyleStats is a Node.js library and web-based tool for collecting and displaying useful CSS statistics.

StyleStats

 

SC5 Styleguide is a useful tool that helps you generate style guides from stylesheets. It can be used as a command line utility, gulp task or grunt task

SC5 Styleguide

 

Compressor.io is a tool for compressing the size of your images. It supports JPEG, PNG, GIF & SVG, and offers both ‘lossless’ or ‘lossy’ levels of compression.

Compressor

 

TinyJPG is a web-based tool for reducing/compressing the file size of your JPEG images.

TinyJPG

If you’re eager for some more free resources, you should check out this collection of free web-based CSS tools, this selection of useful Chrome Extensions for web designers, or even this extensive collection of cheatsheets for web designers.