This article was published 9 years ago, therefore the contents of this post may be out of date.

This is the fifth part of my end of year round up of my monthly featured HandPicked Goodies for Designers & Developers, today’s post will be focusing on all the great fantastic Responsive based tools, CSS frameworks, browsers/software extentsions, books about web design and development and other great things that you’ve find in my month roundup that been released through this year. Please note that not everr items that got featured on this blog will be featured as the list is huge anyway and for your ease of reading i will be splitting the “best of” into months…

January

IceCream

icecream

Icecream is a simple and light responsive grid system that the syntax is done easy and fast

Myth

myth

Myth is a preprocessor that will allow you to write pure CSS without having to worry about slow browser support as it adds prefixes for the common browsers automatically as well as giving you the benefits of LESS and Sass and will also give you a future proof of your CSS

LESS Hat 2

LESS-Hat-2

The new LESS Hat 2 is now out and LESS Hat has been completely rewritten for the 2.0 version, LESS Hat 2 has bought us 86 great mixins, robust workflow for editing, testing and creating new mixins.

Hover.css

hover-css

Hover.css is a collection of CSS3 powered hover effects that can be applied to call to actions, buttons, logos, featured images and so on. These can be easily apply any of  your own elements, modify or just use for inspiration.

All of these are available in CSS and SASS and all Hover.css effects can help make a single element (with the help of some pseudo-elements where necessary) more awesome. Hover.css are self contained so you can easily copy and paste them, and come in CSS and SASS flavours and many effects use CSS3 features such as transitions, transforms and animations, but sadly old browsers that don’t support these features may need some extra attention to be certain a fallback hover effect is still in place.

Sculpt

sculpt

Sculpt is a lightweight mobile first responsive HTML, CSS and SASS framework. That been written to cater for devices with small screen sizes first and with more complexity being added through media queries as screen real-estate increases. There are three grid sizes (732px, 960px and 1140px) that been built in and active depending on your device’s screen size you can be sure your content will be well presented no matter the conditions.

With people who are still using IE 8 and no Javascript support you will see the mobile version of your website, and so there will always be a degree of usability ensured as IE 8 being the oldest browser that Sculpt supports.

Sculpt has been built from the ground up using SASS (.scss) and is at its most flexible and powerful when using the included .scss stylesheets and variables.

Typebase.css

typebase-css

Typebase.css is a minimal, customisable typography stylesheet that has both LESS and Sass versions so it can easily be modified and merged into any modern web projects. Typebase.css provides all the necessary scaffolding for good typography without adding any aesthetics, as it has been built to be modified as projects evolve and grow, and plays nice with normalize.css.

Dev Docs

dev-docs

DevDocs combines multiple API documentations in a fast, organized, and searchable interface.

Export PS to SVG Script

export-ps

Once you have activated the Export PS to SVG Script script you can exports all vector layers named with “.svg” at the end of the layer name as SVG files, along with their shape and color attribute and that means no more slicing SVGs one by one.

Layrs Control Photoshop Extension

layrs-control

Layrs Control is a free Photoshop extension that is to help you to improve your workflow. This extension will allow you to change the name of your layer with the name editor, remove the unused layers effects, flatten all layer effects,  delete those empty layers and rasterize all smart objects

February

Progre(c)ss

progre(c)ss

Progre(c)ss makes it easy to create pure CSS progress bars. Just include the stylesheet, add the class to the appropriate element, and then add a data attribute.

Overthrow

overthrow

Overthrow is a small, no-frills targeted overflow: auto polyfill that is for use in responsive designs. As it’s framework-independent and uses lightweight, decoupled JavaScript.

Sublime CSS Completions

Sublime-CSS-Completions

Sublime CSS Completions is a library for Sublime Text is much more complete than those that come standard with Sublime Text. Currently only properties are autocompleted, though at some point in the future valid values may autocomplete as well.

Sache

sache

With Sache you can find Sass and Compass extensions for your next project by easily searching by tag, author or keyword.

Grid

grid

Grid is a simple guide to responsive design. By following these simple steps, you can be on the path to responsive web design mastery. By just practicing and help make the web a better, more useable place.

Min

min

Min is a small CSS framework written in LESS and Sass, compiled to CSS and only weighing in at less than a single kilobyte. It includes all the basics you’ll need for things like buttons and typography, and has support all the way back to IE5.5.

Titon Toolkit

titon-toolkit

Titon Toolkit is a collection of very powerful user interface components and utility classes for the responsive, mobile, and modern web. Each component represents encapsulated HTML, CSS, and JavaScript functionality for role specific page elements.

Pageres

pageres

Pageres is a command-line tool for generating screenshots in different resolutions for websites. Pageres is focus on screensizes, you could script it to generate screenshots of responsive websites. The command-line options allow you to specify many dimensions at once.

Molecule

moleclue

Molecule is a HTML5 game framework has been built for enthusiast game developers in mind, with more than five years of experience on mobile gaming and more than ten on general game development.  Due the better compatibility of mobile browsers with actual html5 specifications and the natural evolution of the hardware inside them, html5 mobile gaming arise as a true possibility nowadays; that it’s given rise to Molecule, which borns from the idea of create a simple yet powerful framework to build html5 cross-platform games on an easy and efficient way.

March

Stripe Checkout

checkout

Stripe Checkout is an embeddable payment form for desktop, tablet, and mobile devices. This works within your site as customers can pay instantly, without being redirected away to complete the transaction. You can integrate Checkout in as little as a single line of client-side code.  Stripe will always support building the whole payment form yourself, but Checkout enables Stripe to do more for you.

With Checkout, they’re constantly collecting data and running tests with the goal of increasing your revenue. This version of Checkout is already deployed on thousands of sites and has handled millions of transactions. As you can see it in action at Dribbble, WillCall and Humble Bundle.

Dollar Photo Club

dollar-photo-club

Dollar Photo Club is a dedicated image bank exclusively for creative professionals, Dollar Photo Club been curated by FOTOLIA, which is the world’s #1 stock photo marketplace, Dollar Photo Club provides unique access to over 25 million images. Dollar Photo Club has no daily limits, no hidden charges and no credit expiration and when you  join the site you get straightforward access to the very best images for $1

Scoutapp

scout_realtime

Scout Realtime is a better top command as it gives you disk, memory, network, CPU, and process metrics and it gives you smooth-flowing charts for everything. Troubleshooting is so much easier when you can see a few minutes worth of real-time data instead of watching individual numbers flash on your terminal window.

You need Ruby 1.9.3+ on your server to run scout_realtime and a public IP or domain name to view scout_realtime in your browser.

Broccoli

Broccoli

Broccoli is a backend-agnostic, Node.js build tool, comparable to the Rails asset pipeline in scope. It offers chainable plugins, fast rebuilds, and a few plugins ready to go.

Typesettings

typesettings

Typesettings is a Sass type toolkit that sets your type in Ems with a modular scale, vertical rhythm, and responsive ratio based headlines. Typesettings handles all the math for Ems, including the compounding, and uses modular scale values to set font-size, among other features.

Cute Grids

cute-grids

Cute Grids is a responsive grid system which is a mobile first that includes five media queries that been based on em widths, and which has detailed documentation.

TLDRLegal

tldrlegal

TLDRLegal is a resource which is for finding easy to read summaries of popular software licenses in just plain English. In this site you can search or browse, or sign up for updates.

Sublimall

sublimall

Sublimall is the way to sync and save your SublimeText configuration everywhere. You will just need to create an account, install the plugin and that’s all.

Ridiculously Responsive Social Sharing Buttons

Ridiculously-Responsive-Social-Sharing-Buttons

Ridiculously Responsive Social Sharing Buttons or RRSSB) has been built with SASS, so you can easily customise it by tweaking a few variables. SVGs allow for tiny file size and retina support. Add or remove icons as you see fit — the rest will fill in automatically in the container. Adding a class of popup to the anchor tag for each share button will make the share dialog open in a popup, rather than a new window.

Framework7

framework7

Framework7 is free open source and ultra lightweight mobile framework for development of phonegap or web apps with iOS7 native look and feel. Framework7 is intended to use in mobile websites, mobile web apps, and mobile native apps. Designed for iOS Safari, but also works great on desktop Chrome and Safari.

EnjoyCSS

enjoy-css

EnjoyCSS is an advanced CSS3 generator that will saves your time. With it’s handy and simple UI allows you can adjust rich graphical styles quickly and without coding.

Glyphter

glyphter

By simply draging & droping SVGs onto the character grid the Glyphter app can create icon fonts in just seconds

Fluidity

Fluidity

Fluidity is a small bit of CSS at a size of only 107 bytes that fixes the part of HTML that isn’t completely responsive. It makes changes to the way images, tables, iframes, preformatted text, and canvas elements, so that they’re completely responsive.

LocalForage by Mozilla

localForage

localForage is a handy library that improves the offline experience of your web app by using asynchronous storage (via IndexedDB or WebSQL where available) but with a simple, localStorage-like API.  localForage includes a localStorage-backed fallback store for browsers with no IndexedDB or WebSQL support.

Asynchronous storage is available in the current versions of all major browsers: Chrome, Firefox, IE, and Safari (including Safari Mobile).

April

Timber – Shopify Framework

timber

Timber is a front-end framework which makes it easy to start building Shopify themes quickly, as it can be used by theme creators of any skill level for themes of any scope.

Bootflat Framework

bootflat

Bootflat is an open source Flat UI KIT based on Bootstrap 3.1.0 CSS framework. Bootflat Framework provides a faster, easier and less repetitive way for web developers to create elegant web apps.

This framework been built on the foundations of Bootstrap, visioned in a stunning flat design. Bootstrap itself is a trusted, reliable and proven tool for developers. Built with Sass 3.3.3. Bootflat is compatible with the following browsers: IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome.

And for the designers, they have provided you with a free PSD file for you, it includes a set of beautiful and pure components, which you can use to create startup projects, websites or iOS/Android Apps.

Brick

brick

As we live in the age of the Internet, have you ever found yourself in yet another typographic battle. As in an effort to speed up loading times, we’ve compressed fonts, and along the way, we’ve lost the majority of the quality of rendered type. But Let’s change that as fonts served by Brick are clones of the original, converted without modification to WOFF format for high quality rendering and fast loading across all modern browsers.

Haxe

haxe

Haxe is an open source, multi-platform programming language that has a syntax similar to JavaScript, PHP, and the like. It’s fully documented, and has strict compile-time type checking to make debugging faster and easier.

BassCSS

basscss

BassCSS is a lightweight collection of base styles, simple type and layout utilities that been designed for speed, performance, and scalability. You can use BassCSS straight out of the box for simple sites and prototypes or as a base for a larger SASS project.

Magic Animations CSS3

magic_animations

Magic CSS3 Animations is a package of CSS3 animations with special effects that you can freely use for your projects. By simply include the CSS style, either the decompressed magic.css or include the minified version: magic.min.css. In this package you can find that there are special effects like bling, perspective, rotate, slide, tin, bomb and etc.

Jeet Grid System

jeet

Jeet is probably one of the most advanced but yet intuitive, grid system that you can find on the market today, 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 all while maintaining a consistently sized infinitely nestable gutter.

As Jeet allows you to express your page grid the same way a human would describe it. So thats means no more needlessly nesting elements or no more rigid twelve column rules.

Quintus

Quintus

Quintus is a simple and easy-to-learn JavaScript HTML5 game engine for mobile and desktop games. It’s thoroughly documented, and there are plenty of demos and examples to check out.

Pesticide

pesticide

Pesticide is a fast way for us to debug out CSS layout as we all know that sometimes Cascading Style Sheets can be tricky.  Pesticide place an outline on every element can help you figure out what the hell is going on.

API Glossary & Acronyms

API-Glossary-

API Glossary & Acronyms is an educational and collaborative project with the mission to help define industry terms and acronyms.

May

Crumpet

crumpet

Crumpet is a deliciously simple SASS/SCSS responsive framework that keeps your HTML clean & stays out of your way. Crumpet was built to make use of placeholder selectors to reduce the size of your HTML markup as no one likes messy HTML.

While creating website layouts fast & responsive will be a breeze but not windy like it is in Autumn. As it allows you the freedom to do what you want with your code, easy and simple to hack about to make your own.

Crumpet has everything straight forward, as all of the code is commented and gives you instructions on how to use Crumpet, so you can spend all your time in the code editor.

CSS Vocabulary

css-vocabulary

CSS Vocabulary is a small app to browse through which is what in CSS. It has some sample css with a list of css terminology by clicking on anything in one panel highlights the corresponding items in the other.

DoCSSa

DoCSSa

DoCSSa is a CSS architecture and methodology that tries to combine all the good parts of the current state of the art. It is intended for use in large, long lived sites, on which many frontend developers may be working over time.

DoCSSa is based on Sass, and leverages some of its key features to achieve its goal. Most notably, DoCSSa takes advantage of placeholders, mixins, and imports. It also suggests a file system organisation and a BEM based naming convention, and integrates the core ideas found in OOCSS, SmaCSS and DRY CSS.

Mobile Detect

mobiledetect

PHP Mobile Detect is a lightweight PHP class for detecting mobile devices, including tablets and smartphones. It detects a mobile environment using the User-Agent string along with specific HTTP headers.

Layout It!

layoutit

LayoutIt! is NOT a site builder. It’s the kick-off for every front-end project you need to develop. LayoutIt! takes every element and component of Bootstrap to make your front-end coding easier without needing to be an expert in javascript, html5 or css3. You just build what you need to start, and then code it however you most like!

Resemble.js

Resemble

Resemble.js is an HTML5 canvas and JavaScript app that analyses and compares images. You just have to drag and drop images into this app and it will highlight their differences.

June

Swift

swift

Swift is an innovative new programming language for Cocoa and Cocoa Touch. Writing code is interactive and fun, the syntax is concise yet expressive, and apps run lightning-fast. Swift is ready for your next iOS and OS X project — or for addition into your current app because Swift code works side-by-side with Objective-C.

Crosswalk

crosswalk

Like many HTML5 applications that needs more than just a browser, they need all the features of a native application. Crosswalk is a web runtime for ambitious HTML5 applications.

As it provides all the features of a modern browser, combined with deep device integration and an API for adding native extensions. It is especially suited to mobile devices, with support for both Android and Tizen.  Whenusing Crosswalk, an application developer can use all the features available in modern web browsers: HTML5, CSS3, JavaScript.

You can also add custom extensions to an application, to leverage platform features not exposed by Crosswalk or the standardised web platform.

A to Z CSS

AtoZCSS

AtoZ CSS is a video podcast that tackles one CSS topic per letter of the alphabet. From auto to z-index, take a deep dive into a single property, value, selector or concept each week.

Designing For The Web Manual

Designing-for-the-Web

The Dept. of Design Web Field Manual is a curated, categorised collection of some of the best resources that you can find out there for web design.

Filament

filament

Filament is an app store that is just for your website, as it’s lets you easily install free apps on your site with a drag-and-drop interface without any coding knowledge.

Pleeease

pleeease

Pleeease is a CSS post-processor, as the main goal of this tool is to perform all treatments that a pre-processor shouldn’t have to do! (eg, dealing with prefixes, convert rem to px, support older browsers, etc.). Just learn how to configure it and let Pleeease do the job for you*.

Pleeease is also a great tool if you want to write DRY, future-proof CSS, for now, it adds prefixes, variables, pseudo-elements and rem unit support, packs same media-query in one @media rule, inline @import styles and minify the result.

Headstart

Headstart

Headstart is an easy to use automated front-end setup that gets you up and running in seconds. As it uses a folder structure and takes care of all the dependencies you’ll need, and even includes optimisations for all sorts of things, like SVG images and hinting.

Weblox Builder

Weblox

Weblox is an easy-to-use webpage template builder. By using Weblox it will generate a fully responsive webpage based on Bootstrap.

Animations

animations

Animations is versatile CSS3 animation pack with over 65 animations for various usages. Trigger CSS3 animations as elements enter the viewport, as you hover with a mouse or by binding them via JavaScript functions/event listeners.

Tumblr Boilerplate

tumblr-boilerplate

The tumblr boiler plate theme is a theme created for tumblr designers and developers to use as a basis to each new project they create, the theme is simple, optimised for speed, and based on HTML5. No frills all skills!

Outdated Browser

outdated-browser

Outdated Browser is a time saving tool for developers as it detects outdated browsers and advises users to upgrade to a new version.

Sketch Toolbox

Sketch-Toolbox

Sketch is a very basic prototype of a package manager for Sketch.app.

July

Visual Designers Checklist for the Web

Visual-Designers-Checklist-for-the-Web

This checklist is a general workflow checklist for visual designers working within a team setting where they’ll be sharing visual exploration and comps with a developer.

CSS Shrink

css-shrink

CSS Shrink just compress CSS, Why you may ask? because CSS is on the critical path to rendering pages. It must be small! or else!

Suit CSS

suit-css

Suit CSS is a reliable and testable styling methodology for component-based UI development. A collection of CSS packages and build tools are available as modules. Suit CSS plays well with React, Ember, Angular, and other component-based approaches to UI development.

CSS Colorguard

css-colorguard

As every CSS project starts out with good intentions, but inevitably, one too many people eye-dropper colors into nooks and crannies that you never knew existed. But with CSS Colorguard it helps you maintain the colour set that you want, and warns you when colour you’ve once added are too similar to ones that already exist. Naturally, it’s all configurable to your tastes.

Concise

ConciseCSS

Concise is a lightweight front-end framework that provides a number of great features without the bloat. Concise is built based on Object-Oriented CSS principles and keeps semantics in mind to provide a small learning curve but high level of customization.

Cockpit CMS

cockpit

Cockpit was born out of the need of building a simple dynamic site. Sure, WordPress, Joomla, Drupal and all the other full-stack content management systems are possible solutions for that task … but let’s be honest, often they are just too bloated and too time consuming to setup, maintain and too complex implementing custom functionality.

VimAwesome

vim-awesome

Vim Awesome is a directory of Vim plugins sourced from GitHub, Vim.org, and user submissions. Plugin usage data is extracted from dotfiles repos on GitHub.

GoRails

go-rails

GoRails is Ruby on Rails screencasts for developers who want to become pros, as GoRails is a series of screencasts and guides for all aspects of Ruby on Rails.

You will learn how to setup your machine, build a Rails application, and deploy it to a server.  GoRails are going to be bringing you is bite-sized chunks of Rails related knowledge as they want to cover everything from your setting up your machine for the first time to maintaining an application that’s many years old.

 

August

CSS Guidelines

css-guidelines

CSS Guidelines is a thorough guide to crafting manageable, scalable, sane CSS. It includes information on syntax and formatting, commenting, naming conventions, CSS selectors, and more.

Shrthnd

shrthnd

Shrthnd is a free web app that converts your CSS properties to shorthand. It can greatly reduce your CSS file sizes, and make your stylesheets more readable and easier to maintain.

Pakyow

pakyow

Pakyow is an open-source framework for the modern web. Build working software faster with a development process that remains friendly to both designers and developers. It’s built for getting along.

TukTuk

tuktuk

TukTuk is a responsive 12-colum grid framework with plenty of flexibility. It’s suitable for blogs, landing pages, profile pages, and web apps, among other types of sites.

Active Admin

active-admin

Active Admin is a Ruby on Rails plugin for generating administration style interfaces. It abstracts common business application patterns to make it simple for developers to implement beautiful and elegant interfaces with very little effort.

CouchDB

couch-db

CouchDB is a database that completely embraces the web. Store your data with JSON documents. Access your documents and query your indexes with your web browser, via HTTP. Index, combine, and transform your documents with JavaScript. CouchDB works well with modern web and mobile apps. You can even serve web apps directly out of CouchDB. And you can distribute your data, or your apps, efficiently using CouchDB’s incremental replication. CouchDB supports master-master setups with automatic conflict detection.

Pagekit

pagekit

Pagekit is a new modular and lightweight CMS that been built with modern technologies like Symfony components and Doctrine. As Pagekit provides an awesome platform for theme and extension developers and  gives you the tools to create beautiful websites. It’s doesn’t matter if it’s a simple blog, your company’s website or a web service.

With Pagekit you are allow to freely modify, share or redistribute it without any limitations, as it is up to you how you want to license your themes and extensions.

September

Dimensions – Browser Extension – Currently for Chrome Only

dimensions

Dimensions is a browser extension for developers to measure screen dimensions, please note that this extension is currently only available for Chrome, When you use the extension you can measure between the following elements: images, input-fields, buttons, videos, gifs, text, icons.

But for the best experience set a keyboard shortcut in the chrome setting at the end of the extensions list to quickly enable and disable Dimensions also any of  web/graphics designers that handed you mockups as PNGs or JPEGs you can just drop them into Chrome, activate Dimensions and start measuring.

Titan

titan

Titan is a scalable graph database optimized for storing and querying graphs containing hundreds of billions of vertices and edges distributed across a multi-machine cluster. Titan is a transactional database that can support thousands of concurrent users executing complex graph traversals in real time.

Monit

monit

Monit is a small Open Source utility for managing and monitoring Unix systems. Monit conducts automatic maintenance and repair and can execute meaningful causal actions in error situations.

You can use Monit to monitor daemon processes or similar programs running on localhost. Monit is particular useful for monitoring daemon processes, such as those started at system boot time from /etc/init/ For instance sendmail, sshd, apache and mysql. You can also use Monit to monitor files, directories and filesystems on localhost. Monit can monitor these items for changes, such as timestamps changes, checksum changes or size changes.

Fibonacci

Fibonacci

Fibonacci is an offshoot of an internal tool created to let non-developers design page layouts usingFlexbox, without you having to learn HTML or CSS as Fibonacci starts with a blank

, which you can then split to your heart’s content. It generates both the HTML and CSS needed to recreate the layout in your own pages.

Right after you’ve made your horizontal or vertical split, you can then add a new sibling, shrink or expand, give it a fixed width/height, remove or split it again. Remember to add a unit when you enter a fixed width or height and once you’re happy with the layout, hit the export icons to copy the generated code and paste it wherever you need it in your own code.

Orbit

orbit

orbit.css is an experiment with CSS preprocessors to create an easily consumbale orbital effect for DOM elements. It can be tweaked and configured to behave how you want. DOM element behaviour is then defined through data attributes. For example, the orbiting elements on this page can be paused on hover(tap on touch devices).

Aerobatic

aerobatic

Aerobatic is a cloud platform for front-end developers that makes it fun to build nimble HTML5 web apps in record time. Simply Aerobatic in a nutshell, is a platform as a service (PaaS) for HTML5 web apps, you could think of it as Heroku for the front-end. Like Heroku, the Aerobatic platform makes it super simple to deploy and host an app in the cloud.

Responsive Web Design Podcasts

Responsive-Web-Design-Podcast

Responsive Web Design Podcast is simply a podcasts that interview people who make responsive redesigns happens, this show is co-hosted by Karen McGrane and Ethan Marcotte.

Picture – Photoshop Plugin – Free

pictura

Pictura is the newest Photoshop plugin that has comes out of Source hot little hands, this plugin instantly find and apply any image on Flickr directly in Photoshop. So you can say goodbye to those distractions or manual image downloads, as you can simply locate and instantly use any image on Flickr, all without leaving your design environment. If you are looking for images without copyrights? You can then use the filter to view images that you can use for free even commercially.

Haml

Haml

Haml (HTML abstraction markup language) is a markup language that’s used to cleanly and simply describe the HTML of any web document without the use of inline code. Haml functions as a replacement for inline page templating systems such as PHP, ASP, and ERB, the templating language used in most Ruby on Rails applications. However, Haml avoids the need for explicitly coding HTML into the template, because it itself is a description of the HTML, with some code to generate dynamic content.

BareKit

BareKit

BareKit is a front-end project starter meant to be a starting point and structural guide rather than a full framework. It’s bare enough to not interfere with your custom styles or scripts, but yet has enough functioning modules to jumpstart a project in no time.

roBrowser

ro-browser

roBrowser is an open source project based on the game Ragnarök Online. It’s not afficiliate by anyway with Gravity. The concept is to reproduce the game using awesome new web technologies (HTML5, Javascript, WebGL) to bring it to Web Browsers.  Since roBrowser run into a Web Browser, it also mean it’s cross-plateform and can run into multiples OS (Windows, Linux, Macintosh, …) instead of the original client limited to Windows. It should also run fine on others devices ( televisions, smartphone, tablettes, computer) if the device support openGL ES 2.0 and is enough powerfull to support the game.

Scala

Scala

Scala is an acronym for “Scalable Language”. This means that Scala grows with you. You can play with it by typing one-line expressions and observing the results. But you can also rely on it for large mission critical systems, as many companies, including Twitter, LinkedIn, or Intel do.

Scala is a pure-bred object-oriented language. Conceptually, every value is an object and every operation is a method-call. The language supports advanced component architectures through classes and traits.

Polymer

polymer-project

With the Web Components are usher in a new era of web development based on encapsulated and interoperable custom elements that extend HTML itself. Built atop these new standards, Polymer makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond.

Flexible.gs

flexible-gs

Flexible.gs is a responsive flexible grid system that has breakpoints for a variety of devices, including tablets and smartphones in both landscape and portrait modes. It’s easy to use and compatible with a variety of mobile and desktop browsers (including IE7+).

Designer’s Guide to DPI

DESIGNER'S-GUIDE-TO-DPI

The Designer’s Guide to DPI is a guide is designed as a “get started” or introductory read for the starting to intermediate designer who wants to learn or get more knowledge about cross-DPI and cross-platform design from the very beginning.No complex math and un-parsable graph, just straight forward explanations ordered in short sections for you to understand and apply directly to your design process.

 

October

DevTools Tips

dev-tools-tips
DevTools Tips is a curated collection of Chrome Developer Tools tips and tricks, updated at least once a week.

Gleez CMS

GleezCMS
Gleez is an open source, extensible Content Management System that is built on the Kohana Framework. Gleez is the fusion of many good concepts from the 3 most popular CMS: Joomla, Drupal, WordPress and Ruby Rails. With years of experience using these, we’ve gathered great ideas and in some cases, improved on them.With an emphasis on security and functionality, Gleez is a professional and robust system suitable for any business or organization. Built on the PHP programming language and the MySQL database, Gleez delivers superb performance on any size application.

Bootlint

bootlint
Bootlint is a tool that checks for several common HTML mistakes in webpages that are using Bootstrap in a fairly “vanilla” way. Vanilla Bootstrap’s components/widgets require their parts of the DOM to conform to certain structures.Bootlint checks that instances of Bootstrap components havecorrectly-structured HTML. Optimal usage of Bootstrap also requires that your pages include certaintags, an HTML5 doctype declaration, etc.; Bootlint checks that these are present.

The Guide to UX Design Process & Documentation – Free eBook

The-Guide-to-UX-Design-Process-&-Documentation
The Guide to UX Design Process & Documentation will teach you the process and byproducts of building great products quickly and thoroughly as researched across the web and practiced by industry leaders it has real-life examples of 25+ documents across 7 product stages, advice on utilising deliverables in lean and agile environments in large and small companies experts also this book teach you to take on the strengths, weaknesses, and ways to think about each design stage and related deliverables

HumHub

humhub
HumHub is a free social network software and framework built to give you the tools to make teamwork easy and successful. It’s lightweight, powerful and comes with an user-friendly interface. With HumHub you can create your own customised social network, social intranet or huge social enterprise application that really fits your needs.

CSStyle

csstyle
csstyle is a modern approach for crafting beautifully maintainable stylesheets. The csstyle method is implemented using a set of SASS mixins that make your CSS readable and semantic, generate your selectors for you, and automatically handle things like specificity and nesting. csstyle makes your project’s styling refreshingly consistent

GitHub Student Developer Pack

Github-Student-Developer-Pack
There’s no substitute for hands-on experience, but for most students, real world tools can be cost prohibitive. That’s why Github created the GitHub Student Developer Pack with some of Github’s partners and friends: to give students free access to the best developer tools in one place so they can learn by doing.

 

November

Palletab – Chrome Extentsion – Free

palettab

Palletab is a Chrome extension which uses Google fonts and amazing ColourLovers palettes to inspire you with fresh and clean inspiration every time you hit that new tab button!

Material UI

material-ui

Material UI is a CSS framework and set of React components that incorporate Google’s Material Design. Components included in this framework are buttons, drop downs, menus, switches, toolbars plus plenty more components.

SoundKit

soundkit

SoundKit is a professional sound library designed for UI projects that has 300 professional, royalty free sound effects, designed for use in mobile and desktop app design. Each sound has been custom crafted for UI applications. Designed to sound great on mobile devices as well as high end speakers.

Interchange

Interchange

Interchange uses media queries to dynamically load responsive content that is appropriate for different users’ browsers.

Sketchfab

sketchfab

Sketchfab is the leading platform to publish, share and embed interactive 3D content, anywhere online. Millions of people make 3D models or scan the real world in 3D, why would they share this in 2D? What YouTube did for video makers, or SoundCloud for musicians, Sketchfab wants to do for creators of 3D content.

You can upload files in almost any 3D format, directly on sketchfab.com or using one of their exporters, in order to upload from your favorite 3D creation tool. Once your models are on Sketchfab, you can embed them on any web page, and share them on other platforms like Tumblr, WordPress, Bēhance, Facebook, Kickstarter, LinkedIn, deviantART.

Fabric

Fabric

Fabric is a flexible, modular set of mobile development tools called “Kits” that help you make your app more stable, add social features like sharing and login, and turn your app into a business with easy monetization.

Ionic

ionic-framework

Ionic is a powerful HTML5 native app development framework that helps you build native-feeling mobile apps all with web technologies like HTML, CSS, and Javascript. Ionic is focused mainly on the look and feel, and UI interaction of your app. That means Ionic aren’t a replacement for PhoneGap or your favorite Javascript framework. Instead, Ionic simply fits in well with these projects in order to simplify one big part of your app: the front end.

Firefox OS

Firefox-OS-App

Firefox OS is an open source technology that empowers developers to build flexible mobile apps based on open web standards (JavaScript, CSS, HTML5).To develop Firefox web app you don’t need to learn proprietary SDKs and work with them as in the case of iOS or Android. You just need to know open web standards that are considered to be basic programming language for an expert web developer.Webix library uses the same web standards as Firefox OS since it’s a JavaScript framework that is based on HTML5 and CSS3.

SocialDoe

social-doe

SocialDoe provides a simple but effective solution to present your projects and passion. It’s an online space where creative personalities & professionals can exchange ideas, share feedback& get inspired. For the creative human being that wishes to move on with their passion, will feel at home here, As SocialDoe is the right place for designers and everyone who wishes to share their inspirations with others.

You can join the group of art enthusiasts who want to enhance the world with their work with. All of SocialDoe plans includes the use of custom domains, portfolio editing, Google Analytics, HTTPS password protection, embedding URL’s on profile (e.g. external links to your shop, social media profiles like behance), unlimited bandwidth, responsive page (view your page on laptop, smartphone or tablet), Socialdoe audience (followings, likes & comments).

Type Genius

type-genius

TypeGenius will help you pick the perfect font combinations for your projects. First you will just need to select a starter font, and then view matches and each match even includes a link to the webfont.

Pakyow

Pakyow

Pakyow is an open-source platform for the modern web, you can build web-based apps faster with a view-first development process that’s friendly to everyone – whether you’re a designer or a developer. It’s for getting along.Pakyow lets you start with a view and build the app on top.

FormKeep

form-keep

FormKeep is a  form endpoints for designers and developers, FormKeep hash no iFrames, JavaScript embeds, or CSS overrides as it’s simply generates a URL for your form’s endpoint which you plug into your existing code to deploy.

Coolors

coolors

Coolors is a super easy to use colour palette generator that you just press the space bar to generate a palette (is that simple or what!)

Twemoji

twemoji

Twemoji is a set of all of the new Twitter emojis that appear on the Twitter, it’s packaged up as an open source icon set that you can use for your own projects.

Wami MAP

wami-map

Wami Map project makes OSM data for everyone, easily. As they take advantage of MongoDB potential for big data management to implement a search for relevant data from OSM data sources. Their APIs make it possible to retrieve POI in different formats including geoJSON, which allows to display them directly on the client. Wami Map project is published under Apache 2 license, so feel free to fork it, use it and make it better.

Stitches

stitches

Stitches is an easy to use HTML5 sprite sheet generator. Just drag and drop images onto the app and it will generate both the sprite sheet and necessary CSS.

Stairtower

stairtower

Stairtower is a (experimental) database server for schema-free, JSON documents, that provides a restful API and is entirely written in PHP.

Web UI Design Best Practices

Web-UI-Design-Best-Practices-Book

Web UI Design Best Practices is a book about UI Design you will get taught from the experts about the theory and practice of web UI design from industry leaders and top companies

December

Hood.ie

hoodie

Hoodie is a free & open source software that is for building applications for the web and iOS, as it is a complete backend for your apps, ready for you to get creative. It works immediately out-of-the-box: develop your frontend code and then plug it into Hoodie’s front-end friendly API and your app is ready. When you develop it, your app runs locally first, you can then deploy and host it wherever you want to. Hoodie is a noBackend technology so it’s there for making the lives of front-end developers easier by abstracting away the backend and keeping you from worrying about backends.

Skeleton

skeleton

Skeleton is for those who are embarking on a smaller project or just don’t feel like you need all the utility of larger frameworks. Skeleton only styles a handful of standard HTML elements and includes a grid, but that’s often more than enough to get started

Charted

CSS-Specificity-Graph-Generator

Charted is a tool for automatically visualising data, created by the Product Science team at Medium. Give it the link to a data file and Charted returns a beautiful, shareable chart of the data. Charted does not store any data. It only fetches and visualizes what the link provides. It also refetches the data every 30 minutes, so the chart is always up-to-date.

CSS Specificity Graph Generator

CSS-Specificity-Graph-Generator

The CSS Specificity Graph Generator makes it simple to create specificity graphs for your stylesheets, for better insight into how well structured they are. It uses d3, css-parser, and specificity to create interactive visualizations.

RubyGems

RubyGems

RubyGems.org is the Ruby community’s gem hosting service. Instantly publish your gems and install them. Use the API to interact and find out more information about available gems. Become a contributor and enhance the site with your own changes.

CSS Dig – Chrome Extension – Free

CSSDig

CSS Dig finds and groups stylesheets and style blocks on most websites, providing an easy way to analyse the code and plan refactors. After collecting the CSS you have the option of including/excluding stylesheets and style blocks. In cases where remote stylesheets are not accessible by CSS Dig, for example those from paid font providers, the link will be listed as “Undiggable”.

Muzli – Design Breakfast – Chrome Extension – Free

design-breakfast

Muzli – Design Breakfast will bring the freshest links about design and interactive, from around the web. This extension is a designer’s must, as it’s simple & beautiful.

 

Foundation of Apps

Foundation-for-Apps

Foundation for Apps is a framework you can use to build better, more polished single-page web applications that work across many devices. We’ve taken what we’ve learned from building the original Foundation framework to build an entirely new framework just for web apps.

Squire

Squire

Squire is an HTML5 rich text editor, which provides powerful cross-browser normalisation, whilst being supremely lightweight and flexible. It is built for the present and the future, and as such does not support truly ancient browsers. It should work fine back to around Opera 10, Firefox 3.5, Safari 4, Chrome 9 and IE8.

Unlike other HTML5 rich text editors, Squire was written as a component for writing documents (emails, essays, etc.), not doing wysiwyg websites. If you are looking for support for inserting form controls or flash components or the like, you’ll need to look elsewhere. However for many purposes, Squire may be just what you need, providing the power without the bloat.

Firefox Developer Edition

Firefox-Developer-Edition

Firefox Developer Edition brings your core dev tools together with some powerful new ones that will extend your ability to work across multiple platforms from one place.

Prototyping Tools

Prototyping-Tools

As we all know there are so many prototyping tools for design that it’s almost impossible to keep track. And when you come across a new one, before long, you forget you ever found it, but at last there is a website happily called Prototyping Tools which is a website that helps you to compare design prototyping tools for apps and websites.

PrivacyPal

privacy-pal

Simply PrivacyPal is a simple way to see the terms and conditions for any website just by simply entering a URL.

Skyline

skyline

Skyline is a starting point for building custom CSS frameworks. The starter kit provides a solid CSS architecture that acts as a scaffolding to support your unique design system. It promotes object-oriented CSS, written in SCSS using BEM notation.

Skyline is a minimal scaffolding and it does not impose a visual style, as it’s contains many layout and structural helpers, utilities, and basic element and module styles that you will build upon. It is really a starting point, an organized set of files that allow you to create your own custom framework.

Share

The Best HandPicked Goodies of 2014: Responsive, Frameworks & Other Great Tools Edition