WebAppers

/ best free open source web resources /

Shopify

Flat Style UI Kit with PSD and HTML Format

Posted · Category: Buttons, CC License

Flat UI Free is made on the basis of Twitter Bootstrap in a stunning flat-style, and the kit also includes a PSD version for designers. Flat UI Free contains many basic and complex components which are great for designers to have at hand: buttons, inputs, button groups, selects, checkboxes and radio-buttons, tags, menus, progress bars and sliders, navigation elements and more.

Colored, stylish icons can easily be modified and used in a wide variety of projects, as they contain original layers. Glyphs are also available in psd, html/css and svg formats. The kit also includes color swatches – no worrying over color choices here – with 10 colors that perfectly suit each other. Flat UI Free is made using the Lato typeface, which can be downloaded for free.

flat-ui

Requirements: -
Demo: http://designmodo.com/demo/flat-ui/
License: Creative Commons 3.0 License

MFG Labs Iconset Designed using Webfont & CSS

Posted · Category: CC License, Icons, MIT License

MFG Labs Icon Set is designed to be easily embeddable on a website or application using a webfont and css. It was inspired by the excellent work of Dave Gandy’s font awesome project and the Octicons font made by the github team.

Fonts are made with vectors, so they are scalable and correctly render on retina screens or mobile displays. They use Private Use Area Unicode to avoid conflicts with existing characters. They also bind icon with existing unicode that represent the same symbol allowing fallback in case of loading typography problem.

vector-icons

Requirements: -
Download Link: http://mfglabs.github.com/mfglabs-iconset/
License: Creative Commons, MIT License

108 Free Pixel Perfect Crisp Icons in PSD and CSH

Posted · Category: CC License, Icons

Crisp Icon Set is a free icon set includes 108 pixel perfect icons that come in 3 different sizes, 16×16, 32×32, and 48×48. These are entirely vector and all of the icons can literally be scaled to any size if needed, just keep the aspect ratio when resizing to keep them pixel perfect. It also includeds a Photoshop PSD like always, a retina version, a CSH (custom shape) file, and the PNG icons!

crisp-icon-set

Requirements: -
Demo: http://www.icondeposit.com/theicondeposit:108
License: Creative Commons Attribution 3.0 License

600+ Clean and Nicely Designed Vector Icons for Free

Posted · Category: CC License, Icons

Iconmonstr released over 600 vector icons for your next project. All of them are very clean and nicely-designed. You can download PNG and SVG format for each icon. You can easily sort by Recent, Popular or Random. You can also search specific icons by entering keywords.

All these icons are licensed under a Creative Commons Attribution 3.0 Unported License. The icon can be used freely in both personal and commercial projects with no attribution required.

icon-monstr

Requirements: -
Demo: http://iconmonstr.com/
License: Creative Commons License

Responsive Horizontal Navigation Menu jQuery Plugin

Posted · Category: CC License, Menu

HorizontalNav is a jQuery plugin that spans a horizontal navigation to fit the full width of it’s container. If you’ve ever had to create this effect on a project, you’ll know it’s pretty annoying to do. But this plugin makes it easy, even on responsive designs.

You can see the difference between a horizontal navigation with no fixed widths and then with a navigation that has the plugin applied to it. There are no requirements to how you style the navigation and adding padding, margins or borders to any of the elements won’t break the effect.

responsive-navigation

Requirements: jQuery Framework
Demo: http://sebnitu.github.com/HorizontalNav/
License: Creative Commons License

Create Folded Paper Effect in JavaScript and CSS3

Posted · Category: CC License, Tools

Paperfold CSS takes a dom element, slices it into parts and arranges them like a folded paper in 3d space. It was a proposal for a visual folding-effect for hidden comments. It works best on Chrome and Safari. In Firefox there are still gaps in the folds (probably because of rounding). It is built using JavaScript, HTML5, CSS3, and released under Creative Commons License.

paper-folding

Requirements: -
Demo: https://developer.mozilla.org/en-US/demos/detail/paperfold-css…
License: Creative Commons License

Present Clients Different Interface Choices with Style Tiles

Posted · Category: CC License, Tools

Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. They help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client.

Style Tiles are similar to the paint chips and fabric swatches an interior designer gets approval on before designing a room.
An interior designer doesn’t design three different rooms for a client at the first kick-off meeting, so why do Web designers design three different webpage mockups? Style tiles are for when a moodboard is too vague and a comp is too literal. Style tiles establish a direct connection with actual interface elements without defining layout.

style-tiles

Requirements: -
Demo: http://styletil.es/
License: Creative Commons License

100 Pictograms in OpenType Font, EPS and Web Font

Posted · Category: CC License, Icons

Entypo is a set of 100+ carefully crafted pictograms available as an OpenType font, vector EPS and web font. They work equally well in size 15, 20 or larger. It’s perfect for websites, apps and digital services.

Entypo Pictogram Suite is absolutely free. Even for commercial use. All released for free under the Creative Commons license CC BY-SA.

entypo-icons

Requirements: -
Demo: http://www.entypo.com/
License: Creative Commons License

Grab the Dominant Color or Color Palette from Images

Posted · Category: CC License, Color Schemes

Color Thief is a script for grabbing the dominant color or color palette from an image. Uses Javascript and the canvas tag to make it happen. This script could be useful for sites that sort and search by color.

With Color Thief you can also build a UI that adapts to the colors of an image. For example, you could add color accents to the UI by changing the font or border color depending on what image is currently being displayed in your portfolio.

A recent example of a color adapting UI is seen on Google Chrome’s new home tab. The dominant color of the favicon is used as the bottom border color on the screenshot.

color-thief

Requirements: JavaScript and Canvas
Demo: http://lokeshdhakar.com/projects/color-thief/
License: Creative Commons 2.5 License

Visualizing Data into Tree Structure with jQuery OrgChart

Posted · Category: CC License, Charts

jQuery OrgChart is a plugin that allows you to render structures with nested elements in a easy-to-read tree structure. To build the tree all you need is to make a single line call to the plugin and supply the HTML element Id for a nested unordered list element that is representative of the data you’d like to display.

You can show/hide a particular branch of the tree by clicking on the respective node. It is very easy to style using CSS. If drag-and-drop is enabled you’ll be able to reorder the tree which will also change the underlying list structure.

jquery-tree

Requirements: jQuery Framework
Demo: http://dl.dropbox.com/u/4151695/html/jOrgChart/example…
License: Creative Commons 3.0 License

Page 3 of 14«123456789»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons