This is our web design and web development news series where we share our favorite design/development related articles, resources, tutorials and awesome freebies.

NEW DEVELOPMENT RESOURCES AND TOOLS

How to Create An Advanced Animation SVG Path

In this post you will learn some neat SVG techniques that will help you on your daily web dev route. This particular post is dedicated to defining advanced animation path.

Create Special Effects with Magic CSS3 Animations

Magic CSS3 Animations is a package of CSS3 animations with special effects that you can freely use for your web projects. Simple include the CSS style: magic.css or include the mynified version: magic.min.css. The project is now hosted on GitHub. There are specialeffects like bling, perspective, rotate, slide, tin, bomb and etc.

Drag and Drop jQuery File Uploader with Progress Bar

jQuery File Uploader is a jQuery plugin to drag and drop files, including ajax upload and progress bar. The idea for this plugin is to keep it very simple; unlike other options/plugins that mess up a lot with the markup and provide some really ‘hacky’ ways to make it available for prehistoric browsers.

Open Source Data Package Managment – Dat

Dat is an open source tool that enables the sharing of large datasets, the goal being a collaboration flow similar to what git offers for source code. The dat project is officially a project of the US Open Data Institute, a not-for-profit organization based in the United States, but they work towards sharing data across the galaxy.

Jeet – Smart CSS Grid System for Humans

Jeet is the most advanced, yet intuitive, grid system on the market today. You can think of it like the spiritual successor to Semantic.gs.

By making use of the power of pre-processors, we can now pass real fractions (or float numbers) as context that generates a percentage based width and gutter for grids. We’re able to do this while maintaining a consistently sized infinitely nestable gutter.

Flick Through Content with Flickerplate jQuery Plugin

Flickerplate is a cool jQuery plugin that lets you flick through content. This plugin is by definition a jQuery plugin and so is required. It also requires Modernizr for touch detection and the jQuery.Finger library for touch events. Both jQuery and a custom build of Modernizr are supplied.

Gridlover – Typographic System with Modular Scale

Gridlover gives you adjustable css for font sizes, line heights and margins. The default CSS output is for body, p and h1 – h4 headings, but you can of course apply your adjusted values to any element by editing the css.

jQuery Plugin for Drawing Feynman Diagrams with SVG – Feyn

jQuery.Feyn is a plugin for drawing Feynman diagrams with SVG (Scalable Vector Graphics).

jQuery Plugin to Scroll by Speed – scrollToBySpeed

scrollToBySpeed is a jQuery plugin for scrolling page to an element with speed instead of duration.

Picturefill – A Smart Responsive Images Approach

Picturefill is a Responsive Images approach that you can use today that mimics the proposed picture element using spans, for safety sake. Picturefill natively supports HD(Retina) image replacement. While numerous other solutions exist, picturefill has the added benefit of performance for the user in only being served one image.

FREE TEMPLATES AND THEMES

Responsive Email Patterns

TemplateVamp: [FREE] Twitter Bootstrap Admin Template

Based on Twitter Bootstrap, TemplateVamp is a fully functional and customizable admin template that leverages the power and flexibility of HTML5 & CSS3. It can be used as a front-end toolkit for rapidly developing web applications that are lightweight, faster, and mobile-friendly; a great starting point. TemplateVamp contains HTML and CSS-based design templates for typography, forms, buttons, charts, navigation and JavaScript extensions.

Free Premium HTML Admin/Backend Template For Web Applications: BlueWhale Admin

BlueWhale is a Free Premium HTML Admin/Backend Template for Web Applications based on 960 Grid CSS it has an elegant fluid layout which adjusts automatically as you change the screen size.

Creating Style Guides

A style guide is a living document of code, which details all the various elements and coded modules of your site or application. Beyond its use in consolidating the front-end code, it also documents the visual language, such as header styles and color palettes, used to create the site. This way, it’s a one-stop place for the entire team—from product owners and producers to designers and developers—to reference when discussing site changes and iterations.

DESIGN FREEBIES

Awesome UX Kit – Create iOS7 Wireframes, Easy and Free!

Awesome UX kit is a free set of 26 Adobe Illustrator wireframe templates and two custom brushes, designed by George Vasyagin. At this point “Awesome UX kit” is totally FREE and comes for iOS7 (iPhone) version only.

280 Vector Line Icons Pack

This set can become a powerful tool for any designer. Huge pack of 280 vector line icons presented in 8 categories and will be useful for many purposes. This wonderful project created by Jonas Nullens available for free download. The package presented in 8 EPS files. Enjoy!

Freebie: Metro Style Free Flat User Interface Kit (PSD) – Flatter

UI kits offer ready made UI elements, ready to use for a website or app. If you’re not great at design but have the required coding skills, UI kits can be a great way to make your app or website looks appealing.

Free Metro Style Free Flat User Interface (UI) Kit along-with its PSD source file. Enjoy!

Free Set Colorful Ficons Icons

Created in Photoshop vector shapes.

Free Icon Font

Iconica is an icon font. And yes, for free. It features three styles: Regular, Circle and Cut. And best of all, you can do whatever you want with it.

Free Font – Intro