HTML5 Up! is a website that creates and shares very good-looking and free HTML5-CSS3 templates.

All the templates have responsive layouts (down to mobile) (uses Skel.js) and they are compatible with all major browsers.

There are already 10+ templates where new ones are added within time and they can be used freely under the CCA license for both personal or commercial projects.

There are various jQuery plugins for filtering and sorting elements where the most popular ones are Isotope and Quicksand.

MixItUp is another great plugin to handle such tasks that deserves to be bookmarked.

While jQuery part decides which elements to show or hide, CSS3 transitions are used for animating them.

The plugin plays nice with responsive + fluid layouts it is lightweight and works pretty fast.

There are many options for customization: effects, easing, their speed, etc. and it is very well-documented.

Speeding up websites has a huge effect on the success of the website as it directly effects the user experience and search engine rankings.

Browser Diet is a very nice guide that lists the steps needed to be taken for a better front-end performance.

It is created by a team of experts that work on large projects and presents the “best practices” under categories like HTML ,CSS, JS, server, images and more.

Also, the guide is not only listing these practices but also sharing “how to implement them” in detail.

Simply, a must-bookmark (and it is open source).

BugKick is an open source bug tracking and task management application (source is hosted on GitHub) that is “light” in means of features (which i sometimes nice).

It is built with PHP-MySQL and allows teams to define projects, add tasks to them (which can be tagged with anything like “bug” or “feature request”) and assign to teammates.

Discussions under each task is possible, status updates about each of them are delivered via e-mail and closed ones are not deleted but kept.

There is an API for integrating it into our own apps and a JavaScript snippet + a contact form helps users to submit bugs too.

Lorem Ipsum is the most standard placeholder text used in mock-ups and wireframes.

It helps to not distract the user with content but focus more on the design and/or layout.

BLOKK, which comes as a font, is a nice alternative to Lorem Ipsum. It has no letters but generates (colored) blocks instead.

Such blocks definitely helps concentrating on the layout more and makes more sense for websites with non-Latin characters.

Today, we are sharing a very nice freebie: a set of slick and minimal icons created by Geoffroy Amelot for WRD readers.

It is called Minimalist Icons and can be used in both personal or commercial projects.

There are 296 items in the set from social networks to actions, charts, devices, media controls and more.

All of them are in transparent PNG format, mono-colored and sized 12*12px which can be a good fit (mostly) for web applications.

Use them freely (no attributions required) and it is only not permitted to redistribute them.

Front-end frameworks are easing the development process a lot and we are seeing new ones popping up regulary.

While Bootstrap and Foundation are the most popular ones, there are also others like HTML KickStart.

Maxmertkit is a fresh one that looks/feels a bit like Bootstrap but has different things to offer.

It uses SASS for the CSS part and includes styles for all major stuff like grid, typography, forms, tables, buttons and lists.

There are various widgets like buttons, tabs, grouped elements, badges, dropdowns, tooltips, menus and more.

And, some handy JavaScript components exist for notifications, carousel, buttons, modals, etc.

Like mentioned, it feels like Bootstrap on some parts but differentiates in details where one of them is the choice of the icon fonts which are Font Awesome and Zocial.

Maxmertkit is very well-documented and has lots of example for every part. There is even a drag ‘n’ drop code generator in its homepage.

CSS Browser Selector + is a tiny JavaScript code that empowers CSS selectors, enabling us to write specific CSS code for each operating system and browser.

It forces no hacks but promotes compliant code and also provides an alternative method of mediaqueries for older browsers.

The details it can detect include browser, browser version, platform, platform version, device, device version, min-width/max-width screen detection and orientation screen detection (landscape or portrait).

A sample usage would look like: <html lang="pt-br" class="webkit chrome chrome21 win win8 js orientation_landscape minw_980 maxw_1199"> that is pretty self-explanatory.

For anyone developing games, there is always a huge demand of high-quality graphics for the characters, objects, backgrounds and more.

Game-Icons is a project providing 900+ free icons (and growing) to be used for games but they can also be used for any other projects.

The items are in .SVG and .PNG formats, they are very well-categorized and can be used in commercial projects as well.

Few weeks ago, EmailCraft, an e-mail/newsletter design and markup service, has contacted me asking whether their service can be reviewed at WRD.

I thought this was a chance to offer another nice freebie to WRD readers and try the service which I was aware of for a long time.

EmailCraft gifted their “Design & Markup” package (priced $178). I was also in need of a newsletter design for a project I was part of (ioDeck) and ordered a design-markup for it.

The brief was simple: “a slick newsletter to share any upcoming features with few screenshots and details”. The output is pretty nice, we’ll be using it regularly and want to share it considering you may want to as well. Here it is (click for full version):

The communication with the EmailCraft team was great and they created 2 different templates to choose from.

I selected the one above and requested few revisions. They were so responsive and quickly replied to the changes I asked for (all the process took only few days).

In the past, I have used PSD to HTML services and this was the first time for an e-mail markup service.

Imho, it makes so much sense as designing newsletters is a pain considering each e-mail client has its own rules and things are much worse compared to crafting HTML-CSS for websites (btw, the template above is compatible with all major e-mail clients/platforms).

P.S. The template is completely free to be used in personal and commercial projects with no attributions. It is only not allowed to redistribute the template.