Responsive drop-down navigation

Are you in need of multi-level navigation? And that too responsive which fits well in all devices? In most cases, you design a drop-down menu using unordered lists. But what do you do to make it usable on small and/or cursor less screens?

I have been successfully implementing it into my projects as there is no room for one-sided techniques anymore.

The technique consists of three main parts:

Simple drop-down navigation based on HTML and CSS;
Responsive implementation using media queries;
Adoption for touch screen devices with the help of a super tiny jQuery plugin.

Continue reading →

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.

Just keep these licensing terms in mind:

“The sole purpose of this file is to help you pitch, design and build amazing software. It can’t be repurposed as your own, nor can it be broken apart and used to create similar tools.”

Also keep in mind that the PSD is based on a beta, so design decisions you’ll be making when using this file will need to change as the OS becomes more refined. And only iPhone elements are available, as Apple has yet to release an iPad version of iOS 7.

If you’re interested, you can find the iOS 7 beta GUI PSD file by clicking here.

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
Download: http://darsa.in/motio/

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.

workless

Requirements: CSS3 / HTML5
Demo: http://workless.ikreativ.com/

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.

elusive-icons

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
Demo: http://aristath.github.com/elusive-iconfont/

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.

Pros:

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.

Cons:

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

photobox-jquery-css

Demo:

http://dropthebit.com/demos/photobox/

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.

maskew

Use it:

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

With jQuery:

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

Skew it:

maskew.skew(9);

// or with jQuery:

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

// or:

$maskew.maskew().skew(20);

Demo: http://oxism.com/maskew/

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.

free-photoshop-wireframe-kit

psd-wireframe

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.