WebAppers

/ best free open source web resources /

Graphic Resources

Atomic – The Fastest Way to Design Beautiful Interactions

Posted · Category: Tools

As of today anyone can set up an account and start prototyping in seconds. Atomic approaches prototyping in the way designers think: design your different states as separate pages, then create automatic animations between them.

Create your designs from scratch in Atomic, or bring your assets in from another drawing tool. Draw Hotspots over elements in your design and link pages together into a prototype. You can choose to animate these transitions between pages. When the same object exists on both pages, Atomic will animate any changes automatically. These connections between objects are created when you copy-and-paste them from one page to another, or when you duplicate a page. Anything that only exists on one page will be faded in or out. Happy prototyping.

atomic

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

Wee – A Tiny Blueprint for Modern Web Development

Posted · Category: Framework

Wee bundles many of the components developers need to architect and produce responsive, interactive websites and apps. True to its name, Wee does this all with a tiny footprint. Wee is mobile-first CSS framework with reset, base, and Less mixin library < 4KB gzipped. Wee is organized in a simple, scalable hierarchy with a consistent structure for both style and scripts. Wee’s core JavaScript toolset brings logic to what can often become a daisy-chained nightmare. Compiling, minifying, and optimizing everything can be a pain, but Wee manages it all with a simple config file.

wee

Requirements: –
Demo: https://www.weepower.com
License: Apache License 2

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

Easy to Use Dialog System for Modern Web Apps

Posted · Category: Popup

BasicModal is a dialog-system for modern web-apps. It includes everything you need to display information, ask questions or request input from the user. Modals can be chained, so you can easily build a setup-assistant or show dialogs in a predefined order. Invalid input can be highlighted and handled using the included function.

BasicModal uses SASS, CoffeeScript, CSS3 Flexbox and only requires jQuery on your website. It has been tested with the latest versions of Mozilla Firefox, Apple Safari, Google Chrome, Microsoft Internet Explorer (10+) and Opera.

basic-dialog

Requirements: jQuery Framework
Demo: http://basicmodal.electerious.com/
License: MIT License

How to Create a Single Page Website with Qards

Posted · Category: Information

It’s a must to possess an URL of your business, hobby, blog, product, you name it, but you also need to do it right and fast.Your online presence is your new business card so make sure you’re aware of it.

Starting from here, is time to simplify everything in terms of building a single page website: information architecture, customer journey, user interface and experience and everything related. You can easily do that if you choose to use Qards – a robust visual editor for WordPress.

Stick to next lines and find out more about the positive impact that Qards could bring into your life and your clients’ businesses as well. Below, you can fully understand how this design plugin works at its best. Read the following step-by-step guide and let yourself be surprised in a beautiful and engaging way.

Step 1

Let’s start with the basics: create a new single page with Qards and make sure you give a relevant and easy-to-remember name. Enter the main menu by clicking on the + symbol from the left-corner. To add a beautiful image in the cover sections just select the Image option (from the menu, of course) and click on it. Now, you can edit whatever you feel like editing.

For example, we choose to add some text and a call to action button. You can do that in minutes. Also, you have the creative freedom to modify the font and its size, but also the color. Let’s move on.

1

Step 2

Next, dive deeper and learn how to easily add a case-study. Choose the Grid button and select one of the many pre-designed cards. You can opt for different types of grid in order to match your needs. On top of that, don’t forget that everything is fully editable so if you feel that something doesn’t fit with your vision you can change it in minutes. Read the rest of this entry »

Apache Directory Index You’ll Ever Need

Posted · Category: MIT License, Tools

LastAutoIndex is a completely customizable auto index, and is designed to replace Apache’s pre-installed auto index. Installation is very simple, in your server root .htaccess, just disable Apache’s default indexer, and a add LastAutoIndex as a directory index. You can also customize the theme, checkout the src/public/themes directory.

directory-index

Requirements: –
Demo: https://github.com/Project-CleverWeb/LastAutoIndex
License: MIT License

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

Adds Interactive Programming Challenges to Any Page

Posted · Category: MIT License, Tools

Challenger is a drop-in JavaScript library that adds interactive programming challenges to any page. Challenges are flexible and expressive, and are super simple to write. A challenge has requirements based on code structure and program output, and gives users a code editor to experiment in. When new code is written, it’s run in a sandbox and the output is analyzed. Challenges can be presented as one-off tests or linked together to form courses.

challenger-js

Requirements: JavaScript Framework
Demo: http://rileyjshaw.com/challenger/
License: MIT License

Page 43 of 322...«394041424344454647»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons