WebAppers

/ best free open source web resources /

Shopify

Create Tooltip Style Toolbars with Toolbar.js

Posted · Category: License Free, Menu

Toolbar.js is a jQuery plugin that creates tooltip style toolbars. It allows you to quickly create tooltip style toolbars for use in web applications and websites. The toolbar is easily customisable using Font Awesome icons and provides flexibility around the toolbars display and number of icons.

You can run as many toolbars as required. Toolbars can be attached to any element required. Plenty of options to customised how your toolbar functions including position, animations and events. Toolbars are responsive and follow the buttons on resize.

toolbar-js

Requirements: jQuery Framework
Demo: http://paulkinzett.github.io/toolbar/
License: License Free

Build Apps Inside Gmail with InboxSDK

Posted · Category: License Free, Webmail

The InboxSDK is a high level Javascript library used to easily build browser extensions that interact with both Gmail and Inbox by Google. It provides all of the necessary APIs to create full-fledged applications directly inside Gmail and Inbox. Because the SDK is fully maintained and evergreen, you’ll never be forced to maintain your app.

With InboxSDK, you interact with simple high level classes like ComposeView. You call straightforward methods (like adding buttons or getting the subject) on the class and the SDK abstracts the entire DOM away from you.

inbox-sdk

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

Kore – Writing Scalable Web APIs in C

Posted · Category: Framework, License Free

Kore.io is an easy to use web application framework for writing scalable web APIs in C. Its main goals are security, scalability and allowing rapid development and deployment of such APIs. Because of this Kore is an ideal candidate for building robust, scalable and secure web things.

Kore makes it easy to get started without having to fiddle with build frameworks such as make. Using the builtin commands you can create, compile and run Kore applications. Kore exposes an easy to use API to build your applications.

kore

Requirements: –
Demo: https://kore.io/
License: License Free

Create a Responsive Mega Dropdown with Sub-Categories

Posted · Category: License Free, Menu

One of the most challenging part when you’re working on a web projects with lots of content is to make it easy for a user to navigate through this content. One example we can all think of is Amazon: infinite categories, each one with its own sub-categories, that’s why they currently provide an easy-to-access navigation, in the form of a mega-dropdown element on the top-left corner of the page.

Codyhouse has been working on a similar concept, a Responsive Mega Dropdown component with sub-categories.

dropdown

Requirements: –
Demo: http://codyhouse.co/demo/mega-dropdown/index.html
License: License Free

Build Better Error Pages in 60 Seconds

Posted · Category: License Free, Tools

Better Error Pages helps you build free 404, 500-level, and maintenance pages in 60 seconds. Simply give them some info like your website URL, support email address, and whether or not you have a system status page. And then choose from one of the templates and then tweak the little things like colors, images, and shadows. At the end, they will zip up and email you all the files in a nice little package.

better-error-pages

Requirements: –
Demo: https://better-error-pages.statuspage.io/
License: License Free

The Marvel Comics API for Developers

Posted · Category: License Free, Tools

The Marvel Comics API is a tool to help developers everywhere create amazing, uncanny and incredible web sites and applications using data from the 70-plus years of the Marvel age of comics. The Marvel Comics API is a RESTful service which provides methods for accessing specific resources at canonical URLs and for searching and filtering sets of resources by various criteria. All representations are encoded as JSON objects.

You will only be able to call most services a certain number of times within a particular time period (calculated on a rolling basis). Most services default to 1000 calls per day but some services may have different rate limits. You can view your particular rate limits on your developer account page. If you attempt to make more API calls to a service than your allotted amount, the call will be rejected by the Marvel Comics API.

marvel-api

Requirements: –
Demo: http://developer.marvel.com/
License: See License Agreement

An Interactive Drag and Drop Coloring Experiment

Posted · Category: Color Schemes, License Free

Interactive Drag and Drop Coloring Concept is a little fun experiment where you can color a website mockup by dragging and dropping a color droplet from a palette. The idea is to simply drag a color from a color palette to a website mockup and color designated areas of it like sections or texts. You might have encountered customization tools before, but Codrops wanted to add some fun to this idea and make it enjoyable to use.

You can drag a color from the color palette and drop it on any area that lights up with a blue outline, including text elements. Once the droplet that you are dragging gets dropped on a content area, a fun little Google Material like animation happens and the whole area gets filled with a colored circle. For that effect we use an SVG element that we create on the fly and then scale it up and fade it in with a CSS transition.

coloring

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

Basscss – A Low Level CSS Toolkit

Posted · Category: Framework, License Free

Basscss is a lightweight collection of base element styles, immutable utilities, layout modules, and color styles designed for speed, clarity, performance, and scalability.

Using clear, humanized naming conventions, Basscss is quick to internalize and easy to reason about while speeding up development time with more scalable, more readable code. Basscss strikes a balance between consistency and flexibility to allow for rapid prototyping and quick iterative changes when designing in the browser.

basscss

Requirements: CSS Framework
Demo: http://www.basscss.com/
License: License Free

Learn to Type Faster with Ratatype Typing Tutor

Posted · Category: License Free, Tools

Ratatype is an online typing tutor and a great website for people who want to type better. Start mastering your skills with us, challenge your friends or simply get a typing certificate. Typing is a more important skill than writing nowadays. And if you do it slow you are just wasting your time. Your time deserves much more than this.

If you increase your typing speed by 30% you can save 20 minutes daily. That’s 1 year of your life saved in 20 years! That is why Ratatype is here. We want to save your life! At least part of it. So, Ratatype is a website for you to learn touch typing online. It is delightfully easy and completely free.

ratatype

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

A Responsive, Magazine-like Layout with Animated Grid

Posted · Category: License Free, Tools

Today Codrops has shared a Grid Item Animation Layout with us. The responsive layout has a sidebar and grid items that animate to a larger content area when clicked. In the first demo the content area fills the grid and in the second demo, the whole layout moves to the left while the grid item is expanding. The expanding element is not animating in width and height but instead its original dimensions are already of the expanded size and we simply scale it down initially. By setting classes, we control the transitions of all the elements: the grid item elements’ disappearance and the content elements’ appearance.

The layout is responsive down to mobile using a media query technique that involves setting the breakpoints based on the grid item size and the sidebar. For this we use Sass, which allows us to set these kind of variables easily. The approach we are using here is mainly mobile-first, but we also do some specific restructuring for small screens.

grid-layout

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

Page 1 of 103123456789»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons