WebAppers

/ best free open source web resources /

Shopify

Preview Prototypes on iOS8 with Frameless

Posted · Category: MIT License, Tools

Frameless for iOS 8 is the browser that gets out of your way. It’s made for designers and developers who need an easy way to preview prototypes on iOS devices. No browser chrome and no status bar. Gestures control browser history and reveal the keyboard.

You can swipe, tap with three fingers or shake the device. If anything gets in your way, just disable it. It also works great with Framer Studio mirroring or previewing any HTML prototypes in a “native” context. It is licensed under MIT License.

frameless

Requirements: iOS
Demo: http://stakes.github.io/Frameless/
License: MIT License

Firefox.html – Re-Implement the Firefox UI in HTML

Posted · Category: Framework

Firefox.html is an experiment, a proof of concept: trying to re-implement the Firefox UI in HTML, as an app. It is based on the Browser API and works the same way Gaia’s browser and system apps work. Even though it includes tags like vbox, hbox, spacer, etc… it’s all HTML.

Current priority is to re-implement the basic features of Firefox Desktop to make Firefox.html a usable browser, and understand what’s missing at the platform level for a perfect integration to the OS. Firefox.html requires a runtime: a special build of Gecko we call “htmlrunner”. The runtime code is based on Firefox.

firefox-html

Requirements: -
Demo: https://github.com/paulrouget/firefox.html
License: Mozilla Public License Version 2.0

The Top 100 Email Marketing Campaigns of 2014

Posted · Category: License Free, Webmail

What makes a truly standout email newsletter? In this year’s edition of the Top 100 Email Marketing Campaigns of 2014, Campaign Monitor went beyond simply good looks and presented 100 of the best performing emails from their customers, on a stunning new site.

In this free guide, you’ll see Top 100 Email Marketing Campaigns of 2014 presented with no details spared. Each of the email campaigns comes with thoughtful analysis, subject lines, designer details and a mobile view (where applicable). Across 5 categories, being “All-Stars”, “Design Leaders”, “Nonconformists”, “Optimization Experts” and “Top Performers”, you’ll find designs from household names like Buzzfeed, Rip Curl and UNICEF, agencies like Saatchi & Saatchi, as well as respected, design-oriented companies like Realmac, Panic and more.

top-100-email

Requirements: -
Demo: https://www.campaignmonitor.com/guides/best-email-marketing-campaigns/
License: License Free

Design Breakfast – All Design Inspiration You Need

Posted · Category: Inspiration, License Free

Once upon a time, three guys worked together. They shared inspiring links, drank bad beer and celebrated birthdays with cake and good cheer. Then, one of the three guys had an idea. A brilliant idea. What if there was a way to share these links with others?

And so, Muzli was born. Muzli is a labor of love, a product designed, coded and maintained because they enjoy it. Because they love it. Because they live it. Muzli is the content that drives them. And they hope it inspires you. All the design inspiration you need. It’s like crack for designers. And good for you too.

design-breakfast

Requirements: Chrome Browser
Demo: http://muz.li/
License: License Free

Inspiration for Elastic Components with SVG Animations

Posted · Category: Inspiration, License Free

Codrops has shared some inspiration for adding elasticity to SVG elements. The idea is to integrate an SVG element into a component and then animate it from one path to another with an elastic animation. Using SVGs like this can make things like menus, buttons or other elements more interesting and make the interaction look more organic with a natural feel to it.

It’s of course important to keep things subtle and not exaggerate the bounciness. The nice thing is that we can give a more “realistic” interaction feedback to the user. Especially touch feedback can benefit from using this kind of effect. Based on this idea, they’ve created some inspirational examples of contexts where a morphing shape animation enhancement could make sense.

elastic-svg

Requirements: -
Demo: http://tympanus.net/Development/ElasticSVGElements/
License: License Free

Lazy Loading Google Maps jQuery Plugin

Posted · Category: Maps

For Osvaldas Valutis’s latest responsive freelance project there was a contact page where he had to display several Google Maps instances on a single page. You can see where he is heading to: what if a user is not going to scroll down the page because the very first map is what a user was looking for? What if the user is accessing the page on a smartphone under the cellular internet connection?

The right way is to lazy-load the script file and map instances one by one. On every scroll and browser resize interval the Lazy-loading Google Maps Plugin checks whether there are any maps in the viewport to be displayed. If yes, it loads (if it wasn’t loaded before) Google Maps API script file and then initiates the corresponding map instances. Finally, there’s a callback function which is called within every map instance initiation so that you can continue doing whatever you need with your maps.

2014-12-15_143731

Requirements: jQuery Framework
Demo: http://osvaldas.info/lazy-loading-google-maps
License: MIT License

PhotoSwipe JavaScript Image Gallery Inspired by iOS

Posted · Category: Gallery, MIT License

PhotoSwipe is a HTML/CSS/JavaScript based image gallery specifically targeting mobile devices. It is inspired by the iOS photo viewer and Google images for mobile. PhotoSwipe provides your visitors with a familiar and intuitive interface allowing them to interact with images on your mobile website.

All basic gestures are supported: flick to the next or previous image, spread to zoom in, drag to pan, pinch to zoom out or close, tap to toggle the controls, double-tap to zoom. PhotoSwipe manipulates the browser’s history so that the user can link to each gallery item and close the gallery via the “back” button. The initial URL is restored when the gallery is closed.

photo-swipe

Requirements: JavaScript Framework
Demo: http://photoswipe.com/
License: MIT License

Skyline: Evolving CSS Architecture

Posted · Category: Framework, MIT License

Skyline helps you create a design system for your website. It encourages a well thought-out CSS architecture, and enables you to develop a reusable and maintainable codebase. The starter kit provides a solid CSS architecture that acts as a scaffolding to support your unique design system. It promotes object-oriented CSS, written in SCSS using BEM notation.

Skyline is a minimal scaffolding, it does not impose a visual style. It contains many layout and structural helpers, utilities, and basic element and module styles that you will build upon. It is really a starting point, an organized set of files that allow you to create your own custom framework.

skyline

Requirements: JavaScript Framework
Demo: http://skyline.is/
License: MIT License

Curated HD Video Free For Personal and Commercial Use

Posted · Category: License Free, Video

With the growing trend of websites using video as backgrounds (PayPal, AirBnB), and freemium stock content becoming more available, Create the Bridge has released Distill. Distill is a curated video resource platform that offers free, 10-30 second HD videos for anyone to download and use under the Creative Commons License Zero.

It will strengthen an artist’s name as an ambitious filmmaker, and allow them to reach a larger audience by being part of a curated platform. Build an archive for creatives looking to add a new form of visual communication into their web project. Allow video producers to discover high-quality video and/or new talent for their commercial projects.

distill

Requirements: -
Demo: http://www.wedistill.io/
License: License Free

A Collection of Simple SVG Loaders and Spinners

Posted · Category: MIT License, Upload

If you are into designing for multiple resolutions, SVG is the best option to turn to as far as the use of graphics is concerned. These small vector files can be scaled up and down as you like it without sacrificing quality. SVG Loaders is a collection of simple SVG loaders and spinners created and released by Sam. No images used, pure svg/css and scaleable.

svg-loaders

Requirements: SVG Support
Demo: http://samherbert.net/svg-loaders/
License: MIT License

Page 1 of 268123456789»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons