iOS 7 beta GUI PSD file now available for download

Teehan+Lax, has uploaded the entire GUI (graphical user interface) for iOS 7.

That’s right, all of the buttons, menus, icons and anything else you can think of graphic-wise in the developer beta are now available for download.

The images come from the folks over at Teehan+Lax, a design firm known for its iOS GUI work, in the form of a 15.4MB Photoshop file.

The file is a well organized, labeled and layered PSD full of editable shape layers. Most people use it for doing things like mocking up applications, creating concept ideas, and designing custom interface elements to work natively with those found in iOS.
Continue reading

A Responsive Grid System for Fixed & Fluid Layouts

Profound Grid is a responsive grid system for fixed and fluid layouts. Built in SCSS, it gives you flexibility and full control. You can make the grid fluid or fixed and add per-media layouts as needed. Change the column and gutter widths and remove or add columns as needed.

The grid keeps your markup semantic and works without any “grid_x” classes. Unless you want to use them, in which case they are included. Profound Grid uses negative margins to calculate columns. Unlike with other grid systems, fluid layouts will look exactly the same in every browser.

As a quick startup soups, there are various examples for different layouts. Check it out guys. Its cool.

Motio – jQuery Plugin for Sprite Based Animations & Panning

Motio is a jQuery plugin for simple but powerful sprite based animations and panning. Motio is called on an element representing animation container, where animation is delivered as a CSS background image.

In sprite based animations, container should have the dimensions of one sprite frame. E.g, if you have 10 frames in a horizontal sprite that is 1000 x 100 pixels big, the container should be 100 x 100 pixels big. In panning, container size doesn’t play any role, just the background image should be seamless.

Integrated Motio on/off methods are using jQuery $.Callbacks API, which is in jQuery sice 1.7+. If you can’t use newer versions of jQuery, you can go for jQuery bind/unbind methods called on a frame element, with ‘motio:’ prefix on all event names.

Requirements: jQuery Framework

Workless: A Clean & Classy HTML5, CSS3 Framework

Workless is a clean & classy HTML5, CSS3 framework that helps you to get your project up and running as fast as possible and helps prevent repetitive tasks. It standardizes CSS, improves usability and interaction, sets base typography to help vertical rhythm and readability and adds helper classes to style elements easily.

You can either start with the base setup, or drop the files and assets into your current project and simply reference the CSS and Javascript files in your source. Once you’ve done this you can then begin adding your own application specific CSS.


Requirements: CSS3 / HTML5


Elusive Icons: 270 Sleek Vector Icons for Bootstrap

Elusive Icons is a webfont that can be used with any of your projects. There are 270 Sleek vector icons for bootstrap. Bootstrap-based, Foundation-based or even your custom projects. It was created by the need for an Open-Source font that can be used in your projects without licencing issues and/or other “attribution” claws.


If you don’t care much about licences there are many alternatives you can use, most notably the font-awesome font. When downloading this font you’ll also receive all the icons in .svg vector format so you can play with them, improve them and contribute them back on github.

Requirements: Bootstrap

Photobox – A CSS3 jQuery based Image Gallery Plugin

Photobox is an Image Gallery plugin built with CSS3  & jQuery. It is beautiful and posses a great look & feel. Both the script & CSS are only 7k each. It uses silky-smooth, hardware accelerated, CSS3 transitions and animations for better performance.


It works in all major browsers including IE9 and above. But on IE the experience is not as good as other browsers because of incapability of its rendering engine. Image can be zoomed in and out with mousewheel and navigated using mousemove to move around. The bottom row of thumbnails can be navigated by mouse movment. It supports keyboard keys for navigation and closing the gallery view.


I felt Photobox that the photo loading is too slow compared to other gallery plugins.



Google Maps Adds Santa Tracker Features

Google Maps Santa Tracker is created and developed by Google, with a little help from Santa’s elves. On Christmas Eve Google will be proudly showcasing a preview of Santa’s dashboard, the technology that powers his sleigh during his around-the-world journey.

Santa’s dashboard is featuring the latest and greatest in Google Maps technology and sleigh engineering, which will allow you to follow his progress around the world, and also learn a little about some of his stops along the way. You can go ahead and explore his village, you might just find some fun activities and meet some interesting elves.


Use Maskew to Skew the Shapes of Elements

Maskew, created by by Dan Motzenbecker, is a JS library that skews the shapes of elements without distorting their contents. It is mobile friendly as well. There is no dependencies but a modern browser is a requirement. It is less than 5k in size. Maskew is released under MIT License. You can download it via Guthub for free.

Optionally there is a jQuery plugin for Maskew too.


Use it:

var maskew = new Maskew(document.getElementById(‘skew-me’), angle);

With jQuery:

var $maskew = $(‘#skew-me’).maskew(angle);

Skew it:


// or with jQuery:

$maskew.maskew(‘skew’, 20);

// or:



Free Photoshop Wireframe Kit for Web Design

Rafal Tomal has shared with us his Free Photoshop Wireframe Kit. Though it is little old but this wireframe kit is worthy for quick development. It includes Notes, Images & video, Form fields, Headings, paragraphs and bullet lists, Navigations, Ad banners and Common website elements like: search box, email sign up form, etc.

In order to use it, you need to simply open a blank Photoshop document in one of my screens and the wireframe kit PSD in the other one. Then, drag the elements you need from one document and drop them into the other one. As you can see, all elements are black in my wireframe kit. You can easily change the background by managing the opacity of the element.



There is no special license on this wireframe kit. Feel free to modify it and share it with others. Simply, do whatever you want with it.

Easy to Learn HTML5 Game Engine for Mobile & Desktop with Quintus

Quintus is an easy-to-learn, fun-to-use HTML5 game engine for mobile, desktop and beyond. Create an HTML file, pull in the Quintus library and setup the engine. Quintus has a modular engine that lets you pull in just the modules you need and can run in multiple instances on a page.


Quintus supports an event-based, hybrid Object-Oriented and Component-based approach, allowing for both a standard inheritance model with support for reusable components. Quintus let’s you easily create reusable scenes that can be swapped in and out by loading them onto stages. Stages stack on top of each other. Quintus features easy asset loading, sprite sheet generation

Requirements: HTML5
License: GPL, MIT License