WebAppers

/ best free open source web resources /

Shopify

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

GeekTyper – Coding Like You are Hacking

Posted · Category: Code, License Free

“Hack” like a programmer in movies and games. GeekTyper was inspired by the various media where hacking is usually portrayed incorrectly. Simply randomly mash your keyboard and code will display on your screen. Press TAB to display hotkeys that activate various effects. The “hacking” isn’t real, and everything you type isn’t stored anywhere. Your preferences are stored in your browser’s cache.

geektyper

Requirements: –
Demo: http://geektyper.com/
License: License Free

15 Free Vector Design Resources for Designers

Posted · Category: Information, License Free

You will find the best and most attractive free graphics for designers at 1001FreeDownloads. They make it easy and fun to search and find the graphics you need in an quick and easy to use platform. They have a collection of tens of thousands of files and they are constantly expanding our content. We have selected the following 15 Free Vector Design Resources for Designers. Enjoy.

Set of retro labels and badges

Filo Icons

Icons for news and journalism

Read the rest of this entry »

Space.js – HTML-Driven Narrative 3D-Scrolling

Posted · Category: License Free, Tools

For our messages to communicate across efficiently, we need to create a powerful connection between the user and our medium. Today we are going to explore a new way of presenting stories on the web. And for this Patrik Goethe has created an open-source and free to use JavaScript library called space.js. It’s basically parallax technologies used for narration. Think of it as a bicycle for content presentation.

The library is HTML-driven, which means that you don’t need to write a single line of JavaScript to use it on your site and still have a lot of flexibility. The core of the library is to divide our HTML into frames, or space-frames as we call them her (to not conflict the common class name “frame”).

space-js

Requirements: HTML5
Demo: http://www.slashie.org/space.js/
License: License Free

Dropplets – A Minimalist Markdown Blogging Platform

Posted · Category: Framework, License Free

Dropplets is a minimalist Markdown blogging platform focused on delivering just what you need in a blogging solution. When it comes to basic blogging, all you really want to do is write & publish which is where Dropplets excels.

Dropplets is a fresh platform dedicated to making blogging simple. With no database, you can install Dropplets in seconds on any server, compose offline using markdown, then simply upload to publish. You can install it on any server in just about 30 seconds.

Screen Shot 2015-03-24 at 12.43.01 am

Requirements: –
Demo: http://dropplets.com/
License: License Free

Type.js – Take Finer Typographic Control on the Web

Posted · Category: Fonts, License Free

Type.js is a typography tools for better web type. It allows you to write new CSS properties to take finer typographic control of type styles on the web. Set up is simple. Upload type.js to your site, and link it in your HTML, just before the end of the body.

Next, add a style tag before the script, and write these new CSS properties just like you would any other styles. You can also manually adjust the space between two specific glyphs with a simple syntax. You can also set rules for where lines will to break in a paragraph.

Screen Shot 2015-03-19 at 12.31.05 am

Requirements: JavaScript Framework
Demo: http://typejs.org/
License: License Free

CSS SANS – The Font Created by CSS

Posted · Category: License Free

What CSS can do is changing the layout of web pages, typesetting, adjusting letter spacing and so on. Yet, there was one thing that CSS couldn’t do. That is “To design a character itself.” And that’s why we have CSS SANS. They have designed letters from A to Z by facilitating the various factors of CSS. Each letter is made by one <div> tag.

CSS SANS is the font created by CSS, the programming language for web designing and typesetting.
It is an unprecedented font that reflects history and evolution of the Web, and even changes its own shape.

Screen Shot 2015-03-18 at 1.37.25 pm

Requirements: CSS
Demo: http://yusugomori.com/projects/css-sans/
License: License Free

Page 1 of 102123456789»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons