50个最新Web开发与设计资源

50 New Resources and Tools for Developers and Designers(原文链接http://speckyboy.com/2013/06/24/50-new-resources-and-tools-for-developers-and-designers/)

June 24, 2013 by Paul AndrewWeb Design

• 21
  inShare

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 web design tools and resources 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, Javscript 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.

You might also like:
50 Free Web-Based Apps and Tools for Web Developers (from 2012) →
Our 50 Favorite Web Development Resources from 2012 (from 2012) →
50 New Resources and Tools for Web Developers (2012) →
50 Free Tools and Apps for Web Designers and Developers (2011) →

CSS & HTML Tools

CSS Trashman

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 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 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 is a drawing app to draw pixel art and get it in CSS.

piCSSel-artGitHub

Preboot

Preboot is a comprehensive and flexible collection of LESS utilities.

PrebootGitHub

Diagnosticss

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

Diagnosticss

Markdown.css

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

Markdown.cssGitHub

Popline

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

PoplineGitHub

Validatr – Cross Browser HTML5 Form Validation

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 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

Responsable Framework

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 is a modular grid system for responsive/adaptive and non–responsive layouts, based on Compass.

Mueller Grid System

Pure

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

PureGitHub

PocketGrid

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

PocketGridGitHub

Kraken

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

.FitgridGitHub

Mosto Framework for Forms

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

Mosto Framework for FormsGitHub

GroundworkCSS

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 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

TopcoatGitHub

Javascript Tools

JSHint

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

JSHintGitHub

Flatdoc

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

FlatdocGitHub

svg.js

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 makes it super easy to automatically center the responsive elements on your websites.

Midway.jsGitHub

WideArea

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 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 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 is a JavaScript function to add live paragraph-, word- and character-counting to an HTML element.

Countable.jsGitHub

Packery

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 highlights syntax in code examples on any web page. It will automatically detect a language and highlight it.

highlight.jsGitHub

Intern

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

Simple HTML5 Charts using the canvas element.

Chart.jsGitHub

Draggabilly

DraggabillyGitHub

Intro.js

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 is a JavaScript library from Facebook for building user interfaces.

ReactGitHub

Pedestal

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 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

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 is framework for making it easy to add product tours to web pages.

Hopscotch

Web Based Apps

Markdown Editor

Markdown Editor

Red Pen

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

Red Pen

CodeMirror

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 is a new interactive IDE that lets you modify running programs and embed anything from websites to games.

Light Table IDE

Fake Images Please?

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

Reference Resources

Screen Sizes

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

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

jQuery Learning Center

jQuery Learning Center

Browserhacks

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

Browserhacks

Superhero.js

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

Superhero.jsGitHub

You might also like…

• 50 Free Web-Based Apps and Tools for Web Developers (from 2012) →
• Our 50 Favorite Web Development Resources from 2012 (from 2012) →
• 50 New Resources and Tools for Web Developers (2012) →
• 50 Free Tools and Apps for Web Designers and Developers (2011) →
• 50 Most Useful jQuery Plugins from 2012
• Top 50 Useful jQuery Plugins from 2011