50 New Resources and Tools for Developers and Designers

As every designer or developer knows, anything that can save you just a little bit of time everyday is truly priceless. So, what we have for you today will delight you. We have 50 fantastic resources and tools for developers and designers that have all been released this year and have one common goal: To in one way or another offer a time-saving solution to many of the modern design and development issues you may have.
Tools that will help save you time? You can’t beat that can you!

The post has been split into into the following categories: CSS & HTML Tools, CSS, HTML & PHP Frameworks, Javascript Tools, Javascript Frameworks and finally Web Based Apps.

Something worth noting about this post is that it doesn’t include any jQuery resources. If you are looking for jQuery specific resources, you should check out last months 30 New jQuery Plugins Worth Taking a Look At.

Resources and Tools for Developers and Designers

CSS & HTML Tools

CSS Trashman

CSS Trashman - New Resources for Web Designers and Developers

CSS Trashman will automatically refactor your CSS and generate a new stylesheet for your site. It works by examining your site's live DOM in the browser and reverse engineering a new, more elegant definition that captures styles down to the pixel.

CSS Trashman

Prepros

Prepros - New Resources for Web Designers and Developers

Prepros is a web based app that will compile Less, Sass, Scss, Compass, Coffeescript, Stylus, Jade, Slim, Markdown and Haml files with live browser refresh.

PreprosGitHub

CSS Modal

CSS Modal - New Resources for Web Designers tools for Developers

CSS Modal is built out of pure CSS and they work on all screen sizes from a small mobile phone up to high resolution screens.

CSS ModalGitHub

piCSSel-art

piCSSel-art - New Resources for Web Designers tools tools for Developers

piCSSel-art is a drawing app to draw pixel art and get it in CSS.

piCSSel-artGitHub

Preboot

Preboot - New Resources for Web Designers tools for Developers

Preboot is a comprehensive and flexible collection of LESS utilities.

PrebootGitHub

Diagnosticss

Diagnosticss - New Resources for Web Designers tools for Developers

Diagnostic CSS stylesheet that helps visually detect any potentially invalid, inaccessible or erroneous HTML markup.

Diagnosticss

Markdown.css

Markdown.css - New Resources for Web Designers and Developers

Markdown.css is a web based tool for making regular HTML look like plain-text Markdown.

Markdown.cssGitHub

Popline

Popline - New Resources for Web Designers and Developers

Popline is a HTML5 Rich-Text-Editor toolbar that will float around the selected text.

PoplineGitHub

Validatr – Cross Browser HTML5 Form Validation

Validatr - Cross Browser HTML5 Form Validation - New Resources for Web Designers and Developers

ValidatrGitHub

Glue

Glue is a handy command line tool for generating CSS sprites.

Glue

CSS Embed

CSSEmbed is a small tool to automate embedding data URIs in CSS files.

CSS Embed

LESS Prefixer

LESS Prefixer is a set of LESS mixins that let you use vendor-prefixed CSS properties without the prefixes. It uses some simple conventions and gets out of the way so you can use the CSS you already know, but with less typing.

LESS PrefixerGitHub

csscss -A CSS Redundancy Analyze

csscss -A CSS Redundancy Analyze

csscss is a Ruby gem that will parse any CSS file and tell you which rulesets have duplicated declarations. To learn how to use cssscss, click here.

csscssGitHub

Helium CSS – JS Tool To Scan Your Site and Show Unused CSS

Helium is a tool for finding unused CSS across many pages on a web site. Helium takes a list of URLs for different sections of a site then loads and parses each page to build up a list of all stylesheets. It then visits each page in the URL list and checks if the selectors found in the stylesheets are used on the pages. It will then generate a report with details of each stylesheet and the selectors that were not found to be used on any of the given pages.

Helium CSS

CSSO – Structural Optimization of CSS Files

As well as being a CSS minimizer, CSSO also can perform structural optimization of CSS files, resulting in a much smaller file size compared to other minifiers. It will merge blocks with identical selectors and properties, remove overridden properties, remove duplicate selectors, partially merge blocks, remove empty rulesets and will also minimize margin and padding properties

CSSOGitHub

CSS Frameworks

Cascade Framework

Cascade Framework - New Resources for Web Designers and Developers

Cascade Framework

Responsable Framework

Responsable Framework - New Resources for Web Designers and Developers

Responsable is a clean responsive grid system with a typographic baseline powered by LESS/SCSS and based on Semantic.gs.

Responsable FrameworkGitHub

Mueller Grid System

Mueller Grid System - New Resources for Web Designers and Developers

MUELLER is a modular grid system for responsive/adaptive and non–responsive layouts, based on Compass.

Mueller Grid System

Pure

Pure - New Resources for Web Designers and Developers

From Yahoo!, Pure is a set of small, responsive CSS modules that you can use in every web project.

PureGitHub

PocketGrid

PocketGrid - New Resources for Web Designers and Developers

PocketGrid is a lightweight pure CSS resposnive grid system allowing for an unlimited number of columns and breakpoints.

PocketGridGitHub

Kraken

Kraken - New Resources for Web Designers and Developers

Kraken is a lightweight, mobile-first boilerplate for front-end web developers. It includes just the essentials: A CSS reset to ensure cross-browser compatibility; A responsive, mobile-first grid; A well-designed, fluid typographic scale; CSS3 buttons; Basic form styling; Optional add-ons for more functionality.

KrakenGitHub

.Fitgrid

Fitgrid - New Resources for Web Designers and Developers

.FitgridGitHub

Mosto Framework for Forms

Mosto Framework for Forms - New Resources for Web Designers and Developers

Mosto is a framework for building forms using minimal markup and implicit label association.

Mosto Framework for FormsGitHub

GroundworkCSS

GroundworkCSS - New Resources for Web Designers and Developers

GroundworkCSS is a fully responsive HTML5, CSS and Javascript toolkit to rapidly prototype and build accessible web apps that work on virtually any device.

GroundworkCSSGitHub

Typeplate

Typeplate - New Resources for Web Designers and Developers

Typeplate is a typographic starter kit that doesn't make aesthetic design choices, but defines proper markup with extensible styling for common typographic patterns.

TypeplateGitHub

Topcoat – CSS for Clean & Fast Web Apps

Topcoat - CSS for Clean & Fast Web Apps - New Resources for Web Designers and Developers

TopcoatGitHub

Javascript Tools

JSHint

JSHint - New Resources for Web Designers and Developers

JSHint is a tool for detecting errors in JavaScript code and enforce your team's coding conventions.

JSHintGitHub

Flatdoc

Flatdoc - New Resources for Web Designers and Developers

Flatdoc is a small JavaScript file that fetches Markdown files and renders them as full pages.

FlatdocGitHub

svg.js

svg.js - New Resources for Web Designers and Developers

svg.js is a lightweight library for manipulating and animating SVG with no dependencies and aims to be as small as possible.

svg.jsGitHub

Midway.js

Midway.js - New Resources for Web Designers and Developers

Midway.js makes it super easy to automatically center the responsive elements on your websites.

Midway.jsGitHub

WideArea

WideArea - New Resources for Web Designers and Developers

Widearea is a lightweight JavaScript/CSS library to create an expandable textarea and to write large volumes of text easily.

WideAreaGitHub

gif.js

gif.js - New Resources for Web Designers and Developers

gif.js is a JavaScript GIF encoder that runs in your browser that uses typed arrays and web workers to render each frame in the background.

gif.jsGitHub

instano.js

instano.js - New Resources for Web Designers and Developers

instano.js allows you to instantly detect if JavaScript is disabled after the page is loaded. It modifies the standard <noscript> tags so that the messages inside can be shown immediately whenever JS is disabled.

instano.jsGitHub

Countable.js

Countable.js - New Resources for Web Designers and Developers

Countable is a JavaScript function to add live paragraph-, word- and character-counting to an HTML element.

Countable.jsGitHub

Packery

Packery - New Resources for Web Designers and Developers

Packery is a JavaScript layout library that uses a bin-packing algorithm. In other words it fills all empty gaps. Packery layouts can be intelligently ordered or organically wild. Elements can be stamped in place, fit in an ideal spot, or dragged around.

PackeryGitHub

highlight.js

highlight.js - New Resources for Web Designers and Developers

Highlight.js highlights syntax in code examples on any web page. It will automatically detect a language and highlight it.

highlight.jsGitHub

Intern

Intern - New Resources for Web Designers and Developers

Intern is a complete test stack for JavaScript designed to help you write and run consistent, high-quality test cases for your JavaScript libraries and applications.

InternGitHub

Chart.js

Chart.js - New Resources for Web Designers and Developers

Simple HTML5 Charts using the canvas element.

Chart.jsGitHub

Draggabilly

Draggabilly - New Resources for Web Designers and Developers

DraggabillyGitHub

Intro.js

Intro.js - New Resources for Web Designers and Developers

Intro.jsGitHub

Headtrackr

headtrackr is a javascript library for real-time face tracking and head tracking, tracking the position of a users head in relation to the computer screen, via a web camera and the webRTC/getUserMedia standard.

Headtrackr

Javascript Frameworks

React

React - New Resources for Web Designers and Developers

React is a JavaScript library from Facebook for building user interfaces.

ReactGitHub

Pedestal

Pedestal - New Resources for Web Designers and Developers

Pedestal is a web application framework written in Clojure that aims to bring both the language and its principles to client and server-side development.

PedestalGitHub

Helios

Helios - New Resources for Web Designers and Developers

Helios is an open-source framework that provides essential backend services for iOS apps allowing developers to get a client-server app up-and-running in just a few minutes.

HeliosGitHub

RoughDraft.js

RoughDraft.js - New Resources for Web Designers and Developers

Quickly create and prototype a full interactive HTML mock-up without duplicating markup, server-side loops/code, or having to source fake content (lorem ipsum text/images).

RoughDraft.jsGitHub

Hopscotch

Hopscotch - New Resources for Web Designers and Developers

Hopscotch is framework for making it easy to add product tours to web pages.

Hopscotch

Web Based Apps

Markdown Editor

Markdown Editor - New Resources for Web Designers and Developers

Markdown Editor

Red Pen

Red Pen - New Resources for Web Designers and Developers

Red Pen lets you upload your design, share a short URL, and get live, annotated feedback super-fast.

Red Pen

CodeMirror

CodeMirror - New Resources for Web Designers and Developers

CodeMirror is a JavaScript component that provides a code editor in the browser. When a mode is available for the language you are coding in, it will color your code, and optionally help with indentation.

CodeMirror

Light Table IDE

Light Table IDE - New Resources for Web Designers and Developers

Light Table is a new interactive IDE that lets you modify running programs and embed anything from websites to games.

Light Table IDE

Fake Images Please?

Fake Images Please? - New Resources for Web Designers and Developers

Fakeimg.pl is a tool that will generate an images with an URL. You can choose the size, the colors, and the text.

Fake Images Please?

PlaceIMG

PlaceIMG - New Resources for Web Designers and Developers

PlaceIMG

Reference Resources

Screen Sizes

Screen Sizes - New Resources for Web Designers and Developers

Screen Sizes helps you quickly find the screen specifications of the most popular devices and monitors currently on the market.

Screen Sizes

The iOS Design Cheat Sheet

The iOS Design Cheat Sheet - New Resources for Web Designers and Developers

This resource teaches the CSS fundamentals that are used in any website's layout.

The iOS Design Cheat Sheet

Learn CSS Layout

Learn CSS Layout - New Resources for Web Designers and Developers

Learn CSS Layout

jQuery Learning Center

jQuery Learning Center - New Resources for Web Designers and Developers

jQuery Learning Center

Browserhacks

Browserhacks - New Resources for Web Designers and Developers

Browserhacks is an extensive list of browser specific CSS and JavaScript hacks.

Browserhacks

Superhero.js

Superhero.js - New Resources for Web Designers and Developers

Superhero.js is a collection of the best articles we've found on the topic.

Superhero.jsGitHub

Author: (645 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.

Comments