WebAppers

/ best free open source web resources /

Shopify

CSS Purge is Saving the Web 1KB at a Time

Posted · Category: License Free, Tools

CSS Purge is saving the web 1kb at a time. You may not know, but your CSS is getting out of control, it may even have a mind of its own. The specificity war is happening right now and you might not even know it. Is your file always getting bigger? Are you adding stuff to the end of the file? You are showing symptoms of CSSitis. May be linked to Divitis, you can get it treated, but you have to act fast. Users time should be the highest priority. More code, more potential bugs, more time fixing things. A product should be fast, systematic and maintainable.

purge-css

Requirements: –
Demo: http://www.csspurge.com/
License: License Free

Marvel Styleguide for UI Components and Branding

Posted · Category: Framework, License Free

As Marvel continues to grow, both as a product and a company, one challenge they are faced with is learning how to refine the Marvel brand identity and apply it cohesively to each of their products. They created this styleguide to act as a central location where we house a live inventory of UI components, brand guidelines, brand assets, code snippets, developer guidelines and more.

This styleguide is built on the exact same codebase as each of their live products. For the moment, they have not yet open-sourced, mainly because it is still heavily in flux. But yes, at some point in the near future they are planning to package it up and make it easily accessible to everyone. You can use Styleguide on your own work. They are planning to open-source their styleguide soon, so feel free to use it any way you wish.

styleguide

Requirements: –
Demo: https://marvelapp.com/styleguide/overview/introduction
License: License Free

Record and Analyze Your Users Behavior with Jaco

Posted · Category: Capture, License Free

Jaco records and plays exactly what your users are seeing. No matter how complex your application is. Their unique recorder technology captures every user interaction as it happens in your application, including css animations and dynamic content. You’ll be able to get a look at your real users` experience.

They collect every user interaction and event by default, allowing you to get the information you need, when you need it. Advanced Filters, Easily filter your recordings by user actions, user details, or session info. Automatic Session Scoring, We automatically rate your sessions and highlight the most interesting and relevant ones.

record-user-behaviour

Requirements: –
Demo: https://www.getjaco.com/
License: License Free

Create a Responsive jQuery Slider with Turnable.js

Posted · Category: Gallery, License Free

Turntable.js is a responsive JQuery slider that will let you rotate through a list of images as your mouse (or finger) sweeps across a container. Think of it like a flipbook made with Javascript, instead of paper. All you need is a set of images, and jQuery. It’s a fresh alternative to the typical ‘click-to-slide’ JQuery gallery.

turnable-js

Requirements: –
Demo: http://polarnotion.github.io/turntable/
License: License Free

How to Make “The Aviator” 3D Game with Three.js

Posted · Category: License Free

Codrops has shared The Making of “The Aviator”: Animating a Basic 3D Scene with Three.js, they created a simple 3D flying plane using Three.js, a 3D library that makes WebGL simpler. WebGL is a pretty unknown world for many developers because of the complexity and syntax of GLSL. But With Three.js, 3D in the browser becomes very easy to implement.

In this tutorial we’ll create a simple 3D scene with a few interactions in two major parts. In the first part we will explain the basics of Three.js and how to set up a very simple scene. The second part will go into some details on how to refine the shapes, how to add some atmosphere and better movements to the different elements of the scene. In this tutorial we will focus on some basic concepts that will get you started in the world of WebGL with Three.js!

html5-game

Requirements: Three.js
Demo: http://tympanus.net/Tutorials/TheAviator/
License: License Free

Create Amazing Videos in Your Browser with Showbox

Posted · Category: License Free, Video

Showbox enables anybody to create studio-quality video content. Showbox is a cloud-based solution that transforms video creation into a simple, scalable process that gives you beautiful results you couldn’t achieve beforehand. We tried to cover everything needed to create a video, in a way that allows you to go from idea to a professional looking video in a matter of minutes – and without requiring any fancy equipment or prior expertise.

Some of the things that Showbox offers in order to make video creation accessible to all:

– Show formats: our formats are the storytelling “blueprints”, which guide you through specific steps for the video you want to create. For example a top 5 countdown, a video to showoff your apartment for AirBnb, or even just you talking about a subject for 60 seconds.
– A library of graphic packages, all created by professional video artists, that give your video a professional look & feel
– Background replacement (“keying”) without having to use a green screen!
– Free-to-use licensed content libraries (from Getty images/videos, ShutterStock, and more)
– Automatic audio mixing and recording a voice-over
– Import your own content from Facebook, Instagram, Dropbox, etc.

The platform is free of charge for individual creators, while we monetize it by creating personalized versions for brands and publishers.

showbox

Requirements: –
Demo: https://showbox.com
License: License Free

Build Awesome User Interfaces with Flexbox Patterns

Posted · Category: Framework, License Free

Flexbox is awesome, it introduces many new concepts that can make it difficult to use. There are some interactive examples will show you practical ways to use it to build UI components. They start out simple and get more complex near the end, and you can start using them in your own code right away.

flexbox-patterns

Requirements: –
Demo: http://www.flexboxpatterns.com/
License: License Free

Chartd – Responsive and Retina-Compatible Charts

Posted · Category: Charts, License Free

At StatHat, they make a lot of charts. They creates dynamic, autoupdating charts using JavaScript, but we also send charts via email and to external services like Campfire and Slack. Plus, they let users embed charts on their own web pages. For these situations, JavaScript charts either won’t work, are overkill, or could get messy.

So they made chartd. It allows you to create a chart with just an img tag. These charts:

  • are responsive (resize this page to see the charts respond)
  • are retina-friendly
  • can contain up to 5 datasets
  • can be line or step charts
  • have customizable colors and strokes

No JavaScript is required. You can generate SVG or PNG charts. We prefer SVG, but some services (like gmail) won’t render SVGs in emails.

chartd

Requirements: –
Demo: http://chartd.co/
License: License Free

An Interactive 3D Mall Map Concept

Posted · Category: License Free, Maps

Today Codrops has shared an Interactive 3D Mall Map experiment with us. The idea is to show a mall map with all its floors in perspective. Additionally, we have a search in a sidebar that allows to filter mall spaces. Once a floor is selected, we show some pins as indicators for the different stores/spaces.

When clicking on a pin, we show some more details of that space. We’ve mostly used CSS trickery for this, applying transitions that will rotate and move the levels by adding or removing classes. The levels are represented by inline SVGs. This concept can be applied to any kind of floor map actually; any building that has several floors and spaces could be an interesting use case for this.

interactive-map

Requirements: –
Demo: http://tympanus.net/Development/Interactive3DMallMap/
License: License Free

Material Kit – Free Bootstrap UI Kit for Google Material Design

Posted · Category: License Free, Tools

Material Kit is a Free Bootstrap UI Kit with a fresh, new design inspired by Google’s material design. You asked for it, so we built it. It’s a great pleasure to introduce to you the material concepts in an easy to use and beautiful set of components. Along with the restyling of the Bootstrap elements, you will find three fully-coded example pages, to help you design your next project.

Material Kit makes use of light, surface and movement. It uses a deliberate color choice, edge-to-edge imagery and large scale typography. The general layout resembles sheets of paper following multiple different layers, so that the depth and order is obvious. The navigation stays mainly on the left and the actions on the right.

Material Kit is based on the Github Repo from Fez who did an amazing job creating the backbone for the material effects, animations and transitions. Big thanks to his team for their forward thinking efforts.

material-kit

Requirements: –
Demo: http://demos.creative-tim.com/material-kit/index.html
License: License Free

Page 1 of 111123456789»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons