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.

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.

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.

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.

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.

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
Demo: http://html5quintus.com/
License: GPL, MIT License

Share Multiple Websites with Remote URL Control – Framote

Framote is a tool to share multiple websites without the need for the user to reload or even touch a thing. Your Framote URL will have an initial embed website wich you’ll be able to change anytime at your Control URL. The devices which have the Framote URL opened will be updated almost instantly.

This tool is pretty simple, at least over the basics. It uses an iframe to load the embed website, and makes AJAX requests every 1.2 seconds to check the actual URL. If it has been modified, the script simply changes the src attribute. You can also take a look at Remote Preview.

Demo: http://framote.com/
License: License Free