WebAppers

/ best free open source web resources /

Graphic Resources

Reconstruct Sidebar Menu of Google Nexus 7 Page

Posted · Category: License Free, Menu

Codrops has showed us how to reconstruct the Google Nexus Website Menu. It slides out with a really nice effect where some subitems get expanded as well. When hovering over a special menu icon, the sidebar icons will be revealed. When clicking on the icon, the whole sidebar menu will be shown. The first sidebar menu item is a search input which is styled the same way like the other menu items.

We will reconstruct this menu using unordered, nested lists and some CSS transitions. We’ll use JavaScript to apply classes for the opening effects and handling the hover and click events. With the help of a media query, we’ll adjust the size to make sense for smaller devices as well.

nexus-menu

Requirements: –
Demo: http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/
License: MIT License

Interactive DOM Manipulation with Ractive.js

Posted · Category: MIT License, Tools

HTML is an amazing language for creating static documents, but it was never designed for interactive web apps. Many libraries try to get round HTML’s limitations, but very few tackle them head on. Ractive.js is different. It solves some of the biggest headaches in web development – data binding, efficient DOM updates, event handling – and does so with almost no learning curve.

How? By changing the relationship between HTML and JavaScript. Before, HTML was an inert substance that you would breathe life into. Now, it’s a blueprint for an app that’s interactive by default. There are several killer features, such as expressions with dependency tracking, animations, two-way binding, SVG support and more. To get a feel for what’s possible with Ractive.js.

ractive-js

Requirements: JavaScript
Demo: http://www.ractivejs.org/
License: MIT License

Highlight the Differences of Two Images with jQuery

Posted · Category: MIT License, Tools

Need to highlight the differences between two images? TwentyTwenty, a visual diff tool, makes it easy to spot them. It works by stacking two images on top of each other. As the slider moves across the image, it makes use of the CSS clip property to trim the image on the left. This allows the image on the right to show through the container.

before-and-after

Requirements: jQuery Framework
Demo: http://zurb.com/playground/twentytwenty
License: MIT License

Build Fast and Powerful Web Interfaces with UIkit

Posted · Category: Framework, MIT License

UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces. UIkit gives you a comprehensive collection of HTML, CSS, and JS components which is simple to use, easy to customize and extendable. UIkit is developed in LESS to write well-structured, extendable code which is easy to maintain.

There is a collection of small, responsive components using consistent and conflict-free naming conventions. UIkit’s very basic style can be extended with themes and is easy to customize to create your own look. UIkit is open source and MIT licensed. It is absolutely free of charge and you can use, copy, merge, publish and distribute the framework without any limitations.

uikit

Requirements: –
Demo: http://getuikit.com/
License: MIT License

A Customizable Range Slider with Skins Support

Posted · Category: Forms, MIT License

Ion.Range Slider is a nice, comfortable and easily customizable range slider with skins support. Also support events and public methods, has flexible settings, can be completely altered with CSS. It supports touch-devices which includes iPhone, iPad and etc. It has been tested on Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+). It is freely distributed under MIT licence.

slider

Requirements: jQuery Framework
Demo: http://ionden.com/a/plugins/ion.rangeSlider/
License: MIT License

A JavaScript Module to Create Calendar Heatmap

Posted · Category: Calendar, MIT License, Stats

Cal-Heatmap is a javascript module to create a calendar heatmap. This module will help you to create a calendar, like the contribution calendar appearing on each github user’s page, but with navigation and more controls on the data formatting.

Cal-Heatmap works on most modern browsers supporting SVG, and was tested on Internet Explorer 9+, Firefox 4+, Chrome 14+, Safari 5.0+, Opera 10+. Calendar can be customized by setting various options as well. Cal-HeatMap is licenced under the MIT Licence.

cal-heatmap

Requirements: JavaScript enabled
Demo: http://kamisama.github.io/cal-heatmap/
License: MIT License

Phalcon PHP – Higher Performance Web Framework

Posted · Category: BSD License, Framework

Phalcon PHP is a web framework delivered as a C extension providing high performance and lower resource consumption. Phalcon PHP is written in C with platform independence in mind. As a result, Phalcon PHP is available on Microsoft Windows, GNU/Linux, Mac OS X, You can either download a binary package for the system of your choice or build it from sources.

You don’t need learn or use the C language, since the functionality is exposed as PHP classes ready for you to use. Phalcon also is loosely coupled, allowing you to use its objects as glue components based on the needs of your application. Phalcon is not only about performance, it is pretty robust, rich in features and easy to use. Phalcon is open-sourced software licensed under the New BSD License.

phalcon

Requirements: PHP 5.x and GCC compiler
Demo: http://phalconphp.com/
License: New BSD License

File Type Icon Set with Flat Design Style

Posted · Category: Icons, License Free

File Type Icons is a set of 62 different file extension icons. They are designed in long shadow flat design style. You can see some of the most popular filename extensions like .png, .jpg, .exe, .dmg and .txt. If you need an icon that is not in the list, you can easily make or add one by yourself by modifying the AI source file.

File Type Icons come with AI, ICO and PNG format. They can be resized and can easily change colors. You can use the royalty-free icons for any personal, commercial project including web design, software, application, advertising, film, video, computer game, gui design, illustration, for you or for your clients for FREE.

file-type-icon

Requirements: Illustrator
Demo: http://www.webiconset.com/file-type-icons/
License: License Free

Chance – A Random Generator Helper for JavaScript

Posted · Category: MIT License, Tools

Chance is a random generator helper for JavaScript. It is a minimalist generator of random numbers, characters, strings, names, addresses, dice, and pretty much anything else, in order to help reduce some monotony particularly while writing automated tests.

It includes the basic building blocks for all these items and is built on top of a Mersenne Twister so it can generate these things with repeatibility, if desired. Chance is open source software and is released under the developer and business-friendly MIT license.

chance-js

Requirements: JavaScript enabled
Demo: http://chancejs.com/
License: MIT License

200 Vector Icons Free for Download

Posted · Category: Icons, License Free

WebdesignerDepot has released a set of 200 vector icons free for download. They are fantastic for use on all manner of sites. With subjects ranging from science to entertaining, the vast scope of the icons means that you’re bound to find something useful.

This vector icon pack includes 200 vector shapes, meaning you can scale them up as much as you like and they’ll stay sharp. Each file includes AI, EPS, PSD and JPG files. They’re good for use on both personal and professional projects.

vector-icons-blue

Requirements: –
Demo: Download for Free
License: License Free

Page 1 of 512345»
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons