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

Self-Hosted Chat App with File Uploads – Let’s Chat

Let’s Chat is a self-hosted chat app for small teams. It supports Persistent messages, Multiple rooms, New message alerts, Mentions (hey @you), Image embeds, Code pasting, File uploads, SSL/TLS and more.

Online Advanced CSS3 Code Generator – Enjoy CSS

EnjoyCSS is an advanced CSS3 generator that allows you to get rid of routine coding. Its handy and easy-to-use UI allows you to adjust rich graphical styles quickly and without coding.

You’ll be able to play with all EnjoyCSS parameters just like in photoshop or illustarator (with sliders, colorpickers and etc) combining all possible CSS3 style capabilities for the same element. Moreover you can include pseudo states (:hover, :active, :focus, :after, :before) and style them as well. All required CSS code will be automatically generated by EnjoyCSS.

Components Based on Bourbon, Bitters & Neat – Refills

Bourbon provides Sass mixins and eliminates vendor prefixes, for faster CSS coding. Neat provides a lightweight grid framework. Bitters provides basic variables and structure to a Bourbon/Neat project. Refills are prepackaged patterns and components, built on top of Bourbon, Bitters, and Neat.

Simply click the “Show Code” link under the component/pattern you want to copy to your project and use the “copy” buttons to get the code to your clipboard. If a component uses Javascript, that code will be included at the bottom of the HTML file. Each component/pattern has a set of variables at the very top of its Scss file. These pull out the most important properties of the component/pattern to enable quick changes of color, size and general appearance.

Free Infinite Slider WordPress Plugin

Enjoy the benefits of the premium Infinite Slider. With user friendly navigation, fully responsive design, custom slider descriptions, automatic picture resizing and optional design elements it’s a powerful slider plugin. Super easy to install and customize.

Lightweight jQuery Color Picker Plugin with RGB, HSB and HEX Fields – Colpick

Colpick is a simple Photoshop-style color picker jQuery plugin. Its interface is familiar for most users and it’s also very lightweight loading less than 30 KB to the browser.

Learn Flexbox in 5 Minutes

Flexbox in 5 minutes is an interactive tour of all the major features of the new CSS property: flexbox. It’s built using Knockout.js.

Customizable Quick/Live Search jQuery Plugin

HideSeek is simple, yet customizable jQuery plugin for live search and supports highlighting, custom message, navigation, initialization via data attribute and custom events.

2D HTML5 Rendering Engine for Games – CutJS

CutJS is lightweight, fast and interactable 2D HTML5 rendering engine for game development, it is open-source, cross-platform and compatible with modern browsers and mobile devices.

CutJS is a Canvas library inspired by DOM and jQuery with a new concept called pinning introduced instead of styling. CutJS provides a DOM-like tree data model to compose your app and internally manages rendering cycles and drawing your app, it also process and distribute mouse events to targeted tree nodes.

How to Choose the Best Name for Your Business

Build Multi-State Prototypes with Permit jQuery Plugin

Permit.js is a jQuery plugin that makes building interactive, multi-state prototypes for websites and apps easy. Maybe your website has certain features that are only available to logged-in members and other features only available only to administrators? Or perhaps your app has different features depending on whether it’s on- or offline? Or what about the free versus paid versions? These are all examples of states.

Permit.js makes simulating those different situations a breeze. It’s designed for use by anyone that does interactive prototype work in HTML and CSS, including information architects and other user interface and user experience (UI/UX) professionals.

Javascript Pivot Table Implementation with Drag & Drop – PivotTable.js

PivotTable.js is a Javascript Pivot Table (aka Pivot Grid, Pivot Chart, Cross-Tab) library with drag’n’drop functionality built on top of jQuery/jQueryUI.

20 Free HTML5 & JS Animation Tools for Web Designers/Developers

For interactive website designers, animations are part of the design process. One of the latest innovation in web design is HTML5 animations. To make things simpler, there are visual HTML5 animation tools that allows you to design and create beautiful animations that work particularly well with websites.

This is a list of 20 useful HTML5 animation tools for web designers and developers. These HTML5 animation tools can be used to create interactive animation effortlessly.

2D Resizable and Responsive List of Items – Grid List

GridList is a drag and drop library for a two-dimensional resizable and responsive list of items. An agnostic GridList class that manages the two-dimensional positions from a list of items within a virtual matrix. A jQuery plugin built on top of the GridList class that translates the generic items positions into responsive DOM elements with drag and drop capabilities.

Limits the Amount of Text that is Permitted in a Textarea

Stop Verbosity is a jQuery plugin that limits the amount of text that is permitted in a textarea element by replicating the maxlength attribute for the textarea. A line of text, the indicator/counter, counts characters used or remaining when text is entered into the textarea. Once the limit is reached, there is no more text input from typing, pasting or drag and drop.

Pure CSS Based Multi Level Responsive Navigation Menu: BootM

With more and more robust CSS frameworks coming each day, it has become very easy to create responsive HTML documents. In fact it’s now a fun thing to work the HTML and CSS using these CSS frameworks. Combining these frameworks with some CSS3 features you can create widgets like menus without writing any JavaScript.

We are providing a menu system using the famous bootstrap CSS framework and we call it BootM. BootM is a pure CSS based navigation system, its responsive, supports unlimited levels and icons as well.

Lightweight Responsive Content Slider – jQuery lightSlider

JQuery lightSlider is a lightweight touchable responsive Content slider.

17 Top, Free & Open Source Responsive Image Galleries / Content Sliders

Whether you’re already a pro designer creating responsive web sites or your learning what it’s all about, it’s good to have some useful scripts/libraries that can be easily integrated into your site and application.

Go through this must have open source responsive image galleries and content sliders.

Free CSS Authoring Tools (Editors), CSS Debugging Tools & Validation Tools

A Guide to Animated GIFs in Email

Email marketers are always trying to improve their campaigns—through the use of copy, design, and images. They are always on the lookout for something to set them apart from the rest of the inbox and draw attention to their emails—enticing readers to click through and care about their message.

Many marketers are finding that adding interactivity is just the thing to increase subscriber engagement, and are increasingly turning to animated GIFs to provide that bit of extra interest.

FREE TEMPLATES AND THEMES

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.

25 Top Joomla Templates for Business and Portfolio Websites [Free Download]

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.

DESIGN FREEBIES

Freebie: Flat Icon Set (60 Icons, PNG, SVG, EPS, PSD, AI)

Crafted with great attention to detail, this icon set is extremely easy to use and will most probably be the next ultimate resource for any of your design projects.

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.

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

Free Font: Densia Sans

Densia Sans is an economic sans serif, designed to be used in sizes from 6 to 14 points. Its tall x-height and narrow width make it shine whenever there’s very limited space.