Fresh Resources for Web Designers and Developers (January 2013)

Welcome to our first resource roundup of 2013! We’ve handpicked some fantastic tools and resources to kickstart your year. From developer tools to design assets, this month’s collection has something for everyone.

Get ready to discover some game-changing tools: a versatile color scheme package for your code editor, a clever jQuery plugin for special characters, and some unique layout icons. Plus, we’ve got some practical solutions for responsive email templates and tables that’ll make your life easier.


Color Schemes

If you use the following code editors, Sublime Text 2 or Textmate, then you should install this Package called Color Schemes created by Dayle Rees. It adds some extra color schemes for code highlighting apart from the current available ones. There are currently over 30 color schemes in the package and this screenshot below shows one of them.

Color Schemes

Long Press

Long Press is a jQuery plugin to add accented characters easily, such as à, á, or é. This kind of function can already be found in Android or iOS. When you hold down the a or e key, additional characters will pop up as shown in the following screenshot. This plugin is definitely useful when you build web applications that includes input or textarea.

Long Press

Layout Icons

You may already have found many free icons such as social media icons or general UI icons. But this set of icon is I think one of a kind: Layout Icons represent the layout of web front face created by Ales Nesetril. If you are building a content management system (CMS), these icons are probably needed.

Layout Icons

Telescope

Do you visit Reddit often? Well you can actually create a similar site using a framework called Telescope. It is a real-time social news framework built upon Meteor, equipped with a few features like real-time updating, Invite only-access, Email authentication, Notification and Posting Limit.

Telescope

Mockup Designer

Mockup Designer is a handy tool to for web designers to quickly draw ideas. There are some essential components in this tool; such as Rectangle, Circle, Table and a few Typography elements. You can create multiple documents and also adjust the width and the height of the document.

Mockup Designer

Method Draw

There is a lot of use for SVG for websites and we have covered them a bit in our previous post series. In case, you need to edit the graphic presentation you can simply use this handy SVG editor called Method Draw. It is a web-based application, so no installation is required, and best of all, it is FREE.

Method Draw

xChart

xChart is a JavaScript library to build web charts built upon D3.js. The charts are formed with HTML, CSS and SVG and there are currently two types of charts available, Bar and Lines. The charts are easily customizable through CSS.

xChart

Responsive Email Template

More people are now coming online via their mobile phones, and this includes check their emails. So, it is necessary for emails to be delivered on the mobile interface. Recently, ZURB shared this responsive email template. There are currently 5 templates with different layout to choose from.

Responsive Email Template

Footable

Whilst creating responsive email is challenging, creating a responsive table is probably one of the trickiest. A few have come up with their own solutions. Recently, Themeregency the people behind Foobar launched Footable. It is a jQuery plugin to turn <table> responsive.

Footable

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail