WebAppers

/ best free open source web resources /

Shopify

Create Atomic Design Systems with Pattern Lab

Posted · Category: MIT License, Tools

Pattern Lab is a collection of tools to help you create atomic design systems. At its core, Pattern Lab is a custom static site generator that constructs an interface by stitching atoms, molecules, and organisms together to form templates and pages.

Pattern Lab serves as your project’s pattern library and frontend style guide, but you’re simultaneously able to see components abstractly and in context. Testing across multiple browsers and devices is tedious. Page Follow streamlines the development process by syncing navigation from one browser with any other browser connected to the same Pattern Lab site.

pattern-lab

Requirements: –
Demo: http://patternlab.io/
License: MIT License

Concise Framework with Object-Oriented CSS Principles

Posted · Category: Framework, MIT License

There are many other front-end development frameworks in the world today. So why another framework? They come with over 5,000 lines of CSS, and equally as much JavaScript. They attempt to solve every single problem for every single situation that a front-end developer could be put in and you know what?

Concise is built so that you have a lot of options handed to you out of the box. It comes built from the ground-up to be mobile friendly and includes a simple grid system, beautiful typography, and a few other bells and whistles. However, it is also built super lean, with a little over 2,000 thousand lines of CSS, and a few hundred lines of JavaScript. Concise is specifically built to be customized, tinkered with, and hacked.

The whole goal for people using Concise is that they can use the framework to fuel their own creation. The framework comes with very few pre-defined styles, so overriding styles is never a hassle.

concisecss

Requirements: –
Demo: http://concisecss.com/
License: MIT License

JS Plugin for Viewing Images on Full Screen

Posted · Category: Gallery, MIT License

Intense Images is a stand alone javascript library for viewing images on the full screen. Using the touch/mouse position for panning. All styling of image elements is up to the user, Intense.js only handles the creation, styling and management of the image viewer and captions.

There aren’t many restrictions for the html elements you want to use to activate the Intense image viewer, the one manditory attribute is either a src or a data-image, which needs to point to an image file. You can use data-image if you want to load in a different version of the image to the original source.

intense-images

Requirements: JavaScript Framework
Demo: http://tholman.com/intense-images/
License: MIT License

Raneto – An Open Source Knowledgebase for Nodejs

Posted · Category: Framework, MIT License

Raneto is a free, open source Knowledgebase platform for Node.js that uses static Markdown files to power the knowledgebase. Raneto can be called a “static site generator” of sorts as it doesn’t require a database. All of your content is stored in the content folder in Markdown (.md) files and the entire knowledgebase structure and content is generated by Raneto.

This is good because it’s: 1) Simple: You can create and manage an entire knowledge base using your favorite text editor. 2) Flat: Raneto is a “flat file” CMS, meaning no database woe’s, no MySQL queries, nothing. 3) Fast: Raneto is seriously lightweight and doesn’t use a database, making it super fast.

raneto

Requirements: Node.js Framework
Demo: http://raneto.com/
License: MIT License

A Flexible jQuery Plugin to Style Select Elements

Posted · Category: Forms, MIT License

Select-or-Die is a jQuery plugin to style select elements. If you feel like adding a placeholder that’s displayed before anything is selected. Once a selection has been made the placeholder will be removed until the user clicks the SoD again. You can also add a prefix that’s displayed in front of the selected option.

When enabled “Keyboard Cycle”, it allows the user to cycle the list using his/hers arrow keys. Lets say an option have been added to the native <select>, then you might want to update the SoD to reflect the native <select>. Then it’s just a matter of running the update method and the SoD will update with the new option.

select-or-die

Requirements: jQuery Framework
Demo: http://vst.mn/selectordie/
License: MIT License

A Highly Modular Framework for JavaScript Apps

Posted · Category: Framework, MIT License

Ampersand.js is a highly modular, loosely coupled, non-frameworky framework for building advanced JavaScript apps. It’s a well-defined approach to combining a series of intentionally tiny modules.

Everything is a CommonJS module. No AMD, UMD, or bundling of any kind is included by default. The clarity, simplicity, and flexibility of CommonJS just won. Clear dependencies, no unnecessary wrapping/indenting, no extra cruft. Just a clearly declared set of dependencies in package.json.

ampersand-js

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

HTML Table Export jQuery Plugin

Posted · Category: MIT License, Tables

HTML Table Export jQuery Plugin helps user export HTML Table to JSON, XML, PNG, CSV, TXT, SQL, MS-Word, Ms-Excel, Ms-Powerpoint and PDF. You can easily set the font size, separator, export type, margin and etc. It is licensed under MIT License.

export-html-tables

Requirements: jQuery Framework
Demo: http://ngiriraj.com/pages/htmltable_export/demo.php
License: MIT License

Medium.com Style Commenting Interface Plugin

Posted · Category: Forms, MIT License

SideComments.js is a UI component to give you Medium.com style comment management on the front-end. It allows users to comment directly on sections of content rather than the boring comment stream on the bottom of the page that we’re so used to.

Note that this component only handles the display / user interface of how your comments are presented. It does not provide any utilities to help manage storing or retrieving your comment data from your server, how you do that is entirely up to you.

side-comments

Requirements: JavaScript Framework
Demo: http://aroc.github.io/side-comments-demo/
License: MIT License

VisualCaptcha – A Configurable Captcha Solution

Posted · Category: Forms, MIT License

visualCaptcha is a configurable captcha solution, focusing on accessibility & simplicity, whilst maintaining security. It also supports mobile, retina devices, and has an innovative accessibility solution. visualCaptcha is now available across multiple backend languages. If you are using JavaScript, Ruby, or PHP, you can use visualCaptcha.

You can now use visualCaptcha as plain JavaScript, as a jQuery plugin, and Angular JS directive, or even build your own integration with your favourite framework. You can use your own pictures or audio as captchas which can be configured through JSON files. There are thousands of websites are already enjoying the benefits of visualCaptcha, with less spam and more customer engagement.

Screen Shot 2014-06-21 at 11.55.07 pm

Requirements: JavaScript Framework
Demo: http://demo.visualcaptcha.net/
License: MIT License

Detects Outdated Browsers and Advises Users to Upgrade

Posted · Category: MIT License, Tools

Outdated Browser is a time saving tool for developers. It detects outdated browsers and advises users to upgrade to a new version. So, you’re tired of people visiting your modern website with an outdated browser and not doing anything about it. Maybe they aren’t “power” users, maybe it’s your auntie running a last century browser trying to see awesome CSS3 animations and transforms. Let the user know that’s an outdated browser, and advise them on a better one.

With this solution you can check if the user’s browser can handle your website. If not, it will show a cool looking notice advising the user to update the browser. It’ll be up to him/her to decide if he upgrades or not. Don’t force the user.

outdated-browser

Requirements: –
Demo: http://outdatedbrowser.com/
License: MIT License

Page 8 of 66...«456789101112»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons