Design your way

Web development resources are a necessity today for web designers that want to get to the top and remain there. In the past, most business owners instructed the people who developed their websites to design a professional looking site only since they were not familiar with all of the requirements that were needed to drive customers to their site.

However, in time, business owners and their web designers and developers have started to look for more experienced web design resources in order to build an effective site to provide a great user experience.

For instance, the site that web design professional builds must be user friendly so that visitors want to come back again and again. To accomplish this objective, the designer use numerous apps to make the design process simpler.

Today, building an effective site requires many different types of online marketing tools, techniques, strategies and the best web resources in the industry. In fact, when a business owner employs web designers and developers, they can expect to obtain a site that will not only drive customers to the site on a regular basis, but also keep them engaged while they are there.

From making sure the site is well designed and coded to making sure the site is easy to navigate from one web page to the next, the best web designers can take advantage of numerous resources, tools and strategies, like these in this article, to build a site that is usable and efficient.

This is a large article so to make things easier, I organized them in a few categories:

JS plugins
CSS grids, frameworks and resources
Various tools and resources

JS Plugins

Top Notch jQuery Plugins To Use In 2016

In this article you will see useful jQuery plugins that will help you make your website look better and improve its user experience. Most of the plugins that you will see will refer to the latter. We’re focusing our attention on UX and you should too. A pretty site is useless if its visitors can’t use it with ease.

wallop

wallop is a minimal 4kb library for showing & hiding things. In a nutshell, wallop takes a collection of HTML elements and Previous & Next buttons, and adds helper HTML classes in the correct elements based on whether you want to navigate forwards or backwards.

Bliss

Want to use Vanilla JS but find native APIs a bit unwieldy? Bliss is for you. Bliss is just a collection of helpers and light syntactic sugar over Vanilla JS. It does not account for browser bugs or lack of support of certain APIs, although it only uses features that are both supported across most modern browsers and can be polyfilled.

clipboard.js

Copying text to the clipboard shouldn’t be hard. It shouldn’t require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn’t depend on Flash or any bloated framework. That’s why clipboard.js exists.

PriorityNav

PriorityNav is a lightweight pure javascript plugin that will move your menu items if they don’t fit its parent.

Popmotion

Make it pop with animation, physics, and input tracking. In the browser, on Node, anywhere.

Amalia.js

Amalia.js is a new extensible and versatile HTML5 multimedia player that allows you to view any type of metadata along with your video or audio streams. It follows the responsive design guidelines.

tauCharts

Taucharts is a data-focused javascript charting library based on D3 and designed with passion.

notie.js

notie.js is a clean and simple notification plugin (alert/growl style) for javascript, with no dependencies.

plotly.js

Built on top of d3.js and stack.gl, plotly.js is a high-level, declarative charting library. plotly.js ships with 20 chart types, including 3D charts, statistical graphs, and SVG maps.

Jump.js

Jump was developed with a modern JavaScript workflow in mind. To use it, it’s recommended you have a build system in place that can transpile ES6, and bundle modules.

Matreshka

Matreshka is a framework for massive and endlessly extending single page applications (within the Universe, of course), written in JavaScript. It allows you to build program architecture so that neither your team nor you can get confused in plentiful entities, logic described in HTML files, numerous restrictions of other frameworks and incomprehensible abstractions.

Stretchy

FieldKit

FieldKit provides real-time, text field formatting as users type. It simplifies input formatting and creates a more polished experience for users, while outputting standardized data.

Jets.js

Imagine a situation – your HTML markup renders at backend side, it contains some list of data. At one point you need to implement search by this list. It can be easily achieved by using Jets.js with a browser’s native search speed.

UpUp – Kickstarting the Offline First Revolution

UpUp is a tiny javascript library that makes sure your users can always access your site’s content, even when they’re on a plane, in an elevator, or 20,000 leagues under the sea.

Mobile-First has become the de-facto standard for building modern sites. But in a world where everyone is mobile, an always-on connection isn’t something we can rely on. It’s time to start thinking Offline First.

With UpUp you control the content your users see, even when they are offline. And you can do it with just a single JavaScript command.

fit.js

floatlabels.js

gulp.js

Slip.js

scrollReveal.js

A simple way to create and maintain how elements fade in, triggered when they enter the viewport.

clmtrackr

clmtrackr is a javascript library for fitting facial models to faces in videos or images. It currently is an implementation of constrained local models fitted by regularized landmark mean-shift, as described in Jason M. Saragih’s paper. clmtrackr tracks a face and outputs the coordinate positions of the face model as an array

Magnifier.js

Magnifier.js is a Javascript library enabling magnifying glass effect on an images.

Planetary.js

Adaptive backgrounds

A jQuery plugin for extracting dominant colors from images and applying it to its parent.

Switchery

Switchery is a simple component that helps you turn your default HTML checkbox inputs into beautiful iOS 7 style switches in just few simple steps. You can easily customize switches, so that they match your design perfectly.

countUp.js

countUp.js is a dependency-free, lightweight JavaScript “class” that can be used to quickly create animations that display numerical data in a more interesting way.

Sortable

Share

Simple, light, flexible, and good-looking share button jquery plugin

Unison.js

Unison.js is a small plugin (533 bytes minified, 164 bytes gzipped) that allows you to declare named breakpoints in one place and automatically sync them across your javascript and markup. When all of your front-end technologies share breakpoint information, complex responsive tasks such as conditional loading and image swapping become much simpler and straight-forward.

Simple State Manager

jQuery DrawSVG

jQuery DrawSVG is a lightweight, simple to use jQuery plugin to animate SVG paths.

AntiModerate

Reduce loading time of page to less than a second on slow connections by loading and rendering nicely blurred micro images on the page while loading full sized images in background which replace as they finish.

Has a nice blur effect thanks to StackBlur so you have a good looking page while it is loading.

roll.js

A little js library (~8kb min, 3kb gzip, no dependencies) to help you keep track of position, scrolling, and pagination.

notie.js

A clean and simple notification plugin (alert/growl style) for javascript, with no dependencies.

smartcrop.js

Smartcrop.js implements an algorithm to find good crops for images.

clipboard.js

ESLint

ESLint is an open source project originally created by Nicholas C. Zakas in June 2013. Its goal is to provide a pluggable linting utility for JavaScript.

Chart.js

JSHint

JSHint is a tool to detect errors and potential problems in JavaScript code and can be used to enforce coding conventions.

Progression.js

A jQuery plugin that gives users real time hints & progress updates as they complete forms

CollagePlus

This plugin for jQuery will arrange your images to fit exactly within a container. You can define the padding between images, give the images css borders and define a target row height.

Selectize.js

Selectize is a jQuery-based custom select UI control. It’s useful for tagging, contact lists, country selectors, and so on. It clocks in at around ~7kb (gzipped). The goal is to provide a solid & usable user-experience with a clean and powerful API.

WideArea

WideArea is simple and lightweight JavaScript and CSS library (2KB JS and 4KB CSS) which helps you to write better, simpler and faster.

Swiper

Mobile touch slider & framework with hardware accelerated transitions

FlipClock.js

So why use this library when there are many others with the same name? Well, this library was created because the other solutions weren’t abstract enough to provide a deep level of customization without rewriting the code.

Mason

Mason was created to solve a problem with most grid system currently available. Gaps. When using Masonry, Isotope or any of the other grid plugins out there sometimes your grid will contain gaps or ragged edges. Mason was made to fill those gaps in.

Built on the idea of true masonry when a grid is constructed there are bound to be holes, so Mason calculates where those holes are fills them in.

Buzz: A Javascript HTML5 Audio library

Buzz is a small but powerful Javascript library that allows you to easily take advantage of the new HTML5 audio element. It degrades gracefully on non-modern browsers.

jQuery Nested

Nested is a jQuery plugin which allows you to create multi-column, dynamic grid layouts. Unlike other libraries and jQuery plugins similar to Nested, this is (as far I as I’ve know) the first script out there that allows you a complete gap-free layout.

Parsley.js

Dynatable

Dynatable is a funner, semantic, interactive table plugin using jQuery, HTML5, and JSON. And it’s not just for tables.

bricks.js

A blazing fast masonry layout generator for fixed width elements. Bricks was developed with a modern JavaScript workflow in mind. To use it, it’s recommended you have a build system in place that can transpile ES6, and bundle modules.

GrapesJS

Free and Open source Web Template Editor. Next generation tool for building templates without coding.

particles.js

particles.js is a lightweight JavaScript library for creating particles.

Umbrella JS

Covers your javascript needs for those rainy days. A <3kb performant jquery-like library born from the question: You might not need jquery, then what do you need? You probably need awesome CSS (like Picnic CSS) and a lightweight, modern and performant javascript library. superplaceholder.js

superplaceholder.js is a library to bring your input placeholders to life by cycling multiple instructions in a single input placeholder.

okayNav jQuery Plugin

You know how navigations have only a desktop and a mobile state, right? I thought, “this might cost people money because it requires additional click for users to reach even the most important pages.”

This navigation aims at progressively collapsing navigation links into an off-screen navigation instead of doing it for all the links at the same time.

marginotes

Marginotes takes your jQuery selection and adds notes to the margin with the text provided in HTML attributes. If you don’t want to use jQuery, there’s also a version of marginotes without it.

Feathers

A minimalist, real-time JavaScript framework built for NodeJS, React-Native and the browser. Feathers is a real-time, micro-service web framework for NodeJS that gives you control over your data via RESTful resources, sockets and flexible plug-ins.

jqGifPreview

jQuery Plugin For GIF Preview As Like Facebook.

List.js

Tiny, invisible and simple, yet powerful and incredibly fast vanilla JavaScript that adds search, sort, filters and flexibility to plain HTML lists, tables, or anything.

JavaScript I/O

io.js is a JavaScript platform built on Chrome’s V8 runtime. This project began as a fork of Joyent’s Node.js™ and is compatible with the npm ecosystem.

FormatJS

FormatJS is a modular collection of JavaScript libraries for internationalization that are focused on formatting numbers, dates, and strings for displaying to people.

Riot

Riot is against the current trend of boilerplate and unneeded complexity. A powerful API and concise syntax are extremely important things on a client-side library.

Aurelia

Aurelia is a next generation JavaScript client framework that leverages simple conventions to empower your creativity.

Immutable

Immutable provides Persistent Immutable List, Stack, Map, OrderedMap, Set, OrderedSet and Record. They are highly efficient on modern JavaScript VMs by using structural sharing via hash maps tries and vector tries as popularized by Clojure and Scala, minimizing the need to copy or cache data.

Babel

Babel will turn your ES6+ code into ES5 friendly code, so you can start using it right now without waiting for browser support.

Vue.js

Vue.js is a library for building interactive web interfaces. It provides data-reactive components with a simple and flexible API.

nunchuck.js

A library for mobile web-based control of browser applications.

lining.js

An easy to use javascript plugin offers you complete DOWN-TO-THE-LINE control for radical web typography

PhotoSwipe – JavaScript gallery, no dependencies.

jQuery Face Detection Plugin

A jQuery/Zepto plugin to detect faces on images, videos and canvases to get theirs coordinates.

blockrain.js

HTML5 Tetris Game for jQuery. Embed & play the classic game on your site. Simple as that.

Walkway.js

An easy way to animate SVG images consisting of line, path, and polyline elements.

jQuery Mapael

jQuery Mapael is a jQuery plugin based on raphael.js that allows you to display dynamic vector maps.

CSS grids, frameworks and resources

CSS Reference

An extensive CSS reference with all the important properties and info to learn CSS from the basics.

MOTION UI

A Sass library for creating flexible CSS transitions and animations. Motion UI’s built-in effects make animating your UI a snap.

Skyline

Skyline is a starting point for building custom CSS frameworks. The starter kit provides a solid CSS architecture that acts as a scaffolding to support your unique design system. It promotes object-oriented CSS, written in SCSS using BEM notation.

Pure

A set of small, responsive CSS modules that you can use in every web project.

Avalanche

Avalanche gives you a choice of three naming conventions for your width class names: fraction (1/4), percentage (25) or fragment (1-of-4). No need to spend time working out how many columns are in your nested layout – if a cell needs to take up half the width of it’s container, tell it to!

SVG Loaders

Ink

Reach out your tentacles to a broad range of people who subscribe to your emails. Our CSS framework helps you craft HTML emails that can be read anywhere on any device. Gone are the days where you had to choose between Outlook and email optimized for smartphones and tablets. Ink’s responsive, 12-column grid blends flexibility and stability so your readers can view your emails perfectly from wherever they may be.

Materialize

A modern responsive front-end framework based on Material Design. Created and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology.

Google’s goal is to develop a system of design that allows for a unified user experience across all their products on any platform.

Tasty CSS-animated hamburgers

Sierra Library

This is a micro SCSS library to help you build websites, without all the arbitrary selectors.

Schema

A modular, front end framework to easily and quickly help you jumpstart your process in building complex interfaces for the web right out the box.

Material Design for Bootstrap

300+ material UI elements, 1000+ material icons, 74 CSS animations, helpers, templates, SASS files and many more. All fully responsive. All compatible with different browsers.

Grd

A CSS grid framework using Flexbox. Only 512 bytes (Gzipped).

Phoenix

Phoenix brings back the simplicity and joy in writing modern web applications by mixing tried and true technologies with a fresh breeze of functional ideas.

extractCSS

Myth

Myth is a preprocessor that lets you write pure CSS without having to worry about slow browser support, or even slow spec approval. It’s like a CSS polyfill.

Layers CSS

Lightweight. Unobtrusive. Style-agnostic. Build your look on the web, not Twitter’s – and build it fluid. Layers CSS is aimed for practical use and comes with zero bullshit.

Typesettings.css

Typesettings.css is the typography boilerplate for your minimal website or blog project. All typographic styles are inspired by traditional graphic design fundamentals—the boring stuff that you learn in Typography 101.

CSSgram

Simply put, CSSgram is a library for editing your images with Instagram-like filters directly in CSS. What we’re doing here is adding filters to the images as well as applying color and/or gradient overlays via various blending techniques to mimic these effects. This means less manual image processing and more fun filter effects on the web!

Shift.css

Shift.css provides a simple framework to build timed, contained CSS animations. Within your defined “Shift Container” you can animate a wealth of HTML elements, you can also animate nested elements and adaptive elements like the example above.

imagehover.css

Imagehover.css is a lovingly crafted CSS library allowing you to easily implement scaleable image hover effects. Choose from over 40 hover effect classes from a CSS library weighing in at a minified size of only 19KB.

Balloon.css

Balloon.css lets you add tooltips to elements without JavaScript and in just a few lines of CSS.

FitText: A jQuery plugin for inflating web type

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
Oh, and don’t you dare let us catch you using FitText on paragraph text. This is for gigantic display text only!

Cardinal

Cardinal is a small, “mobile first” CSS framework with some useful default styles, scalable typography, reusable modules, and a simple responsive grid system.

Corpus

Corpus is yet another CSS toolkit. It uses Flexbox for the grid system, viewport-based heights and percentage-based widths, is heavily influenced by Basscss’s White Space module, and has a few useful greyscale color utilities.

Aleutcss

Aleutcss is a powerful framework designed with scalability and performance in mind. It doesn’t make assumptions about what you want your design to look like. You can use as much or as little of the framework as you want and we try not to generate more lines of code than absolutely necessary.

Hover

A collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS and SASS.

SVGMagic

SVGMagic is a simple jQuery plugin that searchs for SVG images (including background-images) on your website and creates PNG versions if the browser doesn’t support SVG.

Bootstrap for Sass

bootstrap-sass is a Sass-powered version of Bootstrap, ready to drop right into your Sass powered applications.

SpinKit

SpinKit uses CSS animations to create smooth and easily customizable animations. The goal is not to offer a solution that works in every browser—if you’re supporting browsers that haven’t implemented the CSS animation property (e.g. IE9 and below), you’ll want to detect support for the animation property, and implement a fallback.

MUELLER

MUELLER is a modular grid system for responsive/adaptive and non–responsive layouts, based on Compass. You have full control over column width, gutter width, baseline grid and media–queries.

Gutenberg

Gutenberg is a flexible and simple–to–use web typography starter kit for web designers and developers. It’s a small step towards a better typography on the web. Beautiful typographic styles can be made by setting base type size, line-height (leading) and measure (max-width).

Gutenberg sets the baseline grid to establish a proper vertical rhythm and makes sure all elements fit into it. It sets up the macro typography so you can focus on the micro–typographic details.

Workbench

Workbench is a frontend boilerplate build for faster development. Out of the box it includes responsive typography, some basic styling and a paragraph system.

Workbench is not a frontend framework, it is a starting point for new projects to be customized to the need of your project.

Concise CSS

Concise CSS is a framework written in SASS carefully crafted by Keenan Payne and James Kolce, it provides all the basics without the bloat.

Neutron

A Sass framework that empowers you to create flexible, clear, and semantic website layouts. Neutron does more than just let you build your layout quickly, it lets you maintain your work or change direction entirely with much less effort than other frameworks require.

This flexibility lets you iterate faster and easier, your code can now keep up with the design changes that happen through the life of a project.

Various tools and resources

ESLint

ESLint is an open source project originally created by Nicholas C. Zakas in June 2013. Its goal is to provide a pluggable linting utility for JavaScript.

Squire

Squire is an HTML5 rich text editor, which provides powerful cross-browser normalisation, whilst being supremely lightweight and flexible.

Toolkit

Extensible front-end HTML, CSS, and JavaScript user interface components for the responsive, mobile, and modern web.

hyhyhy

A tool for creating nice looking HTML5 presentations.

Frameless

Frameless for iOS 8 is the browser that gets out of your way. It’s made for designers and developers who need an easy way to preview prototypes on iOS devices.

Flatdoc

Flatdoc is the fastest way to create a site for your open source project.

The WordPress Plugin Boilerplate

A standardized, organized, object-oriented foundation for building high-quality WordPress plugins.

Vivaldi

A browser for ourselves and a browser for our friends. A browser that is fast, but also a browser that is rich in functionality, highly flexible and puts the user first. A browser that is made for you.

MediumEditor

Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.

Font Famous

Stop wasting time searching Google Images and spinning out in Photoshop trying to format media logos for your site. Show off your recent press mentions with a couple lines of CSS and get back to making fame worthy products.

Browser.html

Browser.html is a research project aimed at building an experimental Servo browser in HTML.

Codeanywhere: a code editor in browser

Codeanywhere is a code editor in a browser with a powerful ftp client integrated, and all popular web formats are supported (HTML, PHP, JavaScript, CSS, and XML).

We all want everything here, now, fast and with no hassle (no need to install anything). This is what Codeanywhere does, it lets you code from anywhere, without the need to bring anything along with you. Just log on to Codeanywhere with any computer or smartphone, and all your servers, files, everything is waiting for you, even the files you left open will be open when you login again.

Pagekit

Pagekit is a modular and lightweight CMS built with Symfony components. No matter if it’s a personal blog or your company’s website. With Pagekit you can create powerful content for the web that works perfectly on every device.

Pagekit’s clean and intuitive interface allows you to focus on what matters most, managing your content.

SimpLESS: Simplifying website programming

Writing LESS is cool and lightning fast if you compare it to good old CSS and besides, it trains your thinking in solving functional problems. So far so good, but in the end the web needs a CSS file to show your website as it is. Either you embed a javascript file to live-transform your LESS-Code into CSS in your browser or you find out how to precompile your files into standard CSS.

Ready to print device templates for UI & UX designers

All files contain a blank and dotted grid template in .png and .pdf formats. New devices are being added all the time, feel free to suggest a device.

Sketchpacks

Sketchpacks is an unofficial plugin registry and directory for Sketch software by Bohemian Coding

Picksum Ipsum

Do you love movies as much as you love making cool websites? Then, boy – have we got the lorem ipsum for you! Our badass text generator will give you the best lines from some of the hardest Hollywood legends – we’re talking Eastwood, Caine, Carrey and Freeman – and mix them up ready to work their magic on your new website.

Pingendo

Quickly create rich layouts, with a clear DOM tree-editor, and dozens of ready-to-use snippets. Inspect and edit all CSS rules visually, producing clean, standardized CSS3. Enjoy simplified input for complex values such as colors, gradients and 2D transformations.

Secrets of the Browser Developer Tools

Over the last few years there has been one tool that has helped out every web developer more than any other – the browser developer tools. Working in harmony with the web browser, the developer tools allow us to manipulate DOM elements; gauge performance and debug JavaScript from within the browser window in real time.

Chrome Logger

Chrome Logger is a Google Chrome extension for debugging server side applications in the Chrome console.Most languages include their own logging capabilities, but sometimes it is easier to see your logs right in the browser. Chrome Logger used to be known as ChromePHP.

Life Jacket

The Life Jacket framework allows web designers/developers to quickly and naturally create a website (using standard HTML files) while allowing clients to safely update only the individual pieces of content that they need. Happy clients and happy designers.

Jekyll

Jekyll is a simple, blog-aware, static site generator. It takes a template directory containing raw text files in various formats, runs it through Markdown (or Textile) and Liquid converters, and spits out a complete, ready-to-publish static website suitable for serving with your favorite web server. Jekyll also happens to be the engine behind GitHub Pages, which means you can use Jekyll to host your project’s page, blog, or website from GitHub’s servers for free.

Canvas

Canvas is a project to simplify iOS development for both designers and developers. It had been difficult for designers to get hands on building the product with the lack of objective-c and Xcode experience, and a hard time for developer to use reasonable amount of time and lines of code just to achieve really simple effects.

With Canvas, creating stunning animations requires zero lines of code, trendy effects like the Parallax headers, Sticky sections, Blurred Backgrounds, will be as simple as few lines of code changes.

ionic

Ionic is a beautiful front-end framework for developing hybrid mobile apps in HTML5.

Clipping Magic

Easily remove the background from your photos to create masks, cutouts, or clipping paths, all done instantly online.

Dropify: Override your input files with style

Mondrian

Mondrian is a smart and easy-to-learn vector graphics web app.

Light Table

Light Table is a new interactive IDE that lets you modify running programs and embed anything from websites to games. It provides the real time feedback we need to not only answer questions about our code, but to understand how our programs really work.

Hugo

Introducing Hugo, a new idea around making website creation simple again. Hugo flexibly works with many formats and is ideal for blogs, docs, portfolios and much more. Hugo’s speed fosters creativity and makes building a website fun again.

Rails Assets

Mobile Angular UI

Mobile Angular UI is a mobile UI framework just like Sencha Touch or jQuery Mobile. If you know Angular JS and Twitter Bootstrap you already know it.

FontBase

FontBase is a blazing fast, beautiful and free font manager for Windows. Simply change the color, background, font size, line height and align of your fonts. Apply styles to the whole collection or just to individually selected fonts.

Pico

A stupidly simple & blazing fast, flat file CMS. Making the web easy.

Resizer

An interactive viewer to see and test how digital products respond to material design breakpoints across desktop, mobile, and tablet. With Resizer you can input a custom URL, or preview selected websites and demos. Using the action icons, you can view a site across Material Design breakpoints for desktop and mobile.

GistBox

GistBox uses GitHub’s backend but adds its own layer of label and search functionality. It was designed to be a curated, personal snippet library – like long term memory for the practicing software engineer.

Saved.io

Saved.io works on any device, and in any browser without needing any extensions or plugins. Your links are stored privately and not shared with anyone.

Phonon Framework

A light weight, scalable, flexible and customizable HTML5 Web – Hybrid Mobile App Framework. Working with a page manager / router inspired by Android Activities.

Cockpit