A Collection Of Resources For An Up To Date Web Designer – 30 New Tools

Almost a month has passed since the last web design & web development resources article and it is time for a new one. This one doesn’t contain as many tools and plugins as the last one, but has a few really good and useful.

I’m inviting you to check them out and see which apply to your needs. Hopefully there are a few that make your work better or easier, or, in case of the CSS experiments, enlarge your horizon and give you a hint of what can be done in the near future on all browsers, not just Chrome or Safari.

34 Responsive Grid System

34 Responsive Grid System

34Grid is a Responsive Grid System based on “equally distributed columns” layout basis. In contrast to other great grid systems (@see bottom of page), 34Grid provides equally distributed columns for each row. (and also column complements for inequal distributions)

Makisu: CSS 3D DROPDOWN CONCEPT

Makisu: CSS 3D DROPDOWN CONCEPT

Opal

Opal

Opal is a ruby to javascript compiler. It is source-to-source, making it fast as a runtime. Opal includes a compiler (which can be run in any browser), a corelib and runtime implementation. The corelib/runtime is also very small (10.8kb gzipped).

Sly

Sly

jQuery plugin for one-directional scrolling with item based navigation support

Orion: Open Source Platform For Cloud Based Development

Orion: Open Source Platform For Cloud Based Development

Responsive design testing tool

Responsive design testing tool

Viewport resizer is a browser-based tool to test any website’s responsiveness. Just save the bookmarklet, go to the page you want to test, click on your created bookmarklet and check all kinds of screen resolutions of the page.

The smartest way to share your defined environment of devices and breakpoints directly with your team and client.

This bookmarklet should not replace a real device simulation. It rather helps you, your team and client testing statuses, transitions, text length etc. throughout different device types.

Emmet — the essential toolkit for web-developers

Emmet — the essential toolkit for web-developers

Emmet (previously known as Zen Coding) is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow.

Basically, most text editors out there allow you to store and re-use commonly used code chunks, called “snippets”. While snippets are a good way to boost your productivity, all implementations have common pitfalls: you have to define the snippet first and you can’t extend them in runtime.

Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.

Cedvel, an application for designing grid systems

Cedvel, an application for designing grid systems

Cedvel aims to ease the grid design process and help you explore more alternatives. It is still far from being finished but you can test the prototype and if you do so, please send in any feedback regarding your experience.

duri.me: a super simple dataURI tool

duri.me: a super simple dataURI tool

Jim Knopf: a small JavaScript library to create knobs using SVG

Jim Knopf: a small JavaScript library to create knobs using SVG

Cut&Slice me

Cut&Slice me

Use Cut&Slice me to export your assets to different devices in seconds. Improve your workflow by just naming your layers.

Adobe Edge Inspect

Adobe Edge Inspect

Pods

Pods

Pods is a framework for WordPress that allows you to create, extend, manage, and deploy customized content types and fields.

Stripe

Stripe

Stripe makes it easy to start accepting credit cards on the web today. You don’t need a merchant account or gateway. Stripe handles everything, including storing cards, subscriptions, and direct payouts to your bank account.

Stripe.js lets you build your own payment forms while still avoiding PCI requirements.

ReactiveUI: Reactive Programming for WPF, Silverlight, WinRT, and Windows Phone 7

ReactiveUI: Reactive Programming for WPF, Silverlight, WinRT, and Windows Phone 7

Ratchet: Prototype iPhone apps with simple HTML, CSS and JS components.

Ratchet: Prototype iPhone apps with simple HTML, CSS and JS components.

jq-tiles: Slideshow with many cool css3 effects

jq-tiles: Slideshow with many cool css3 effects

Neat

Neat

Neat is an open source semantic grid framework built on top of Sass and Bourbon. It is simple enough to get you up and running in minutes, and powerful enough to handle almost anything you throw at it.

Numeral.js: A javascript library for formatting and manipulating numbers

Numeral.js: A javascript library for formatting and manipulating numbers

Webasyst Framework

Webasyst Framework

Open source PHP framework for creating sleek multi-user web apps for businesses and teams, and complex websites.

Fabric.js

Fabric.js

Dashing: The exceptionally handsome dashboard framework.

Dashing: The exceptionally handsome dashboard framework.

One% CSS Grid: 12 Columns Fluid CSS Grid System

One% CSS Grid: 12 Columns Fluid CSS Grid System

One% CSS Grid is a 12 column fluid CSS grid system. It’s been designed as a base for building responsive web layouts easily, quickly and with minimum effort. You don’t have to take care of resizing and rearranging your layout for each platform separatelly. One% CSS Grid will do all this for you.

One% CSS Grid is a percentage based grid system, it means that it will perfectly adapt to all screen resolutions (mobile, tablets and big screens).

One% CSS Grid has 2 starting options, one which fits 1280px screens (in full screen view) and another one which fits 1024px screens (in full screen view).

uptime: A simple remote monitoring utility using Node.js and MongoDB

uptime: A simple remote monitoring utility using Node.js and MongoDB

Instant Sprite: the fastest way for you to make CSS sprites

Instant Sprite: the fastest way for you to make CSS sprites

Nitro

Nitro

More than a map

More than a map

XLSX.js

XLSX.js is a library that converts base64 strings into object representations of XLSX spreadsheets, and vice versa. Now, some of you may be thinking, “I get the object representation of an XLSX spreadsheet part, I like that, but what good is a base64 string?” Well, actually, there are a lot of things you can do with base64 strings. Though sometimes a conversion from binary is required, you can obtain them from XHRs, FileReader, or Silverlight/Flash uploaders. And, similarly, you can send them to web services, FileWriter, Data URIs, or Sliverlight/Flash downloaders. In other words, this library will allow you to read and write Excel-compatible XLSX files when paired with an appropriate file access mechanism.

jQuery Burn: Some men just want to watch the text burn

jQuery Burn: Some men just want to watch the text burn

jQuery Burn is a plugin which adds a flame-like effect to text using multiple text-shadows, animated by repeatedly changing their horizontal offsets.

 
 
 
 
 

Sponsors