WebAppers

/ best free open source web resources /

Shopify

Typography Boilerplate for Minimal Website

Posted · Category: Fonts, License Free

Tpesettings.css is the typography boilerplate for your minimal website or blog project. All typographic styles are inspired by traditional graphic design fundamentals—the boring stuff that you learn in Typography 101. Simple include typesettings.css in the head section after your main stylesheet, and then add class="typesettings" to your article element.

type-settings

Requirements: CSS
Demo: http://mikemai.net/typesettings/
License: License Free

Typecast – A Gift of Web Design & Better Web Typography

Posted · Category: Fonts, License Free

Typecast™ is now a free web design tool. It’s a good news for everyone who cares about web typography and wants to work with web fonts, everyone who wants to design pages instead of pictures, every designer who wants to test rendering and responsive behaviors for themselves before handover, not late into production.

You’ll still be able to work with over 100,000 web fonts from the Fonts.com, MyFonts, Typekit, Google, Webtype, Fontdeck and Monotype libraries all under one roof—setting and styling type, comparing fonts, and fine-tuning your type systems. You’ll still be able to prototype detailed pages using our simple visual controls.

All about the RWD? You’ll still be able to add media queries, refine your designs for various breakpoints, and test those behaviors in the browser and on devices. And you’ll still be able to output your designs as CSS & HTML in order to hand your developers an itemized spec for build. All of the features will be available for free, and every font in the collection will be at your fingertips and free to use for design purposes.

typecast-free

Requirements: –
Demo: http://typecast.com/blog/typecast-becomes-free-web-design-tool
License: License Free

How to Build Interactive Prototype with Google Form

Posted · Category: Demo Tour, License Free

David Less has been using Form since Google acquired them. He has published his first Medium article to share the knowledge he learned while Building Email Interaction Prototype with Google Form. Even though the source code is still messy, but you can get a sense of how powerful Form is.

Every time he writes an email he feels like he is talking to a machine rather than person. He felt there was something missing in the digital communication. Should emails be always like that? That’s why he started to build this prototype. You can check out this tutorial.

google-form

Requirements: Google Form
Demo: https://medium.com/@designforhuman/how-i-built-email-interaction-prototype…
License: License Free

Libscore – Collects Stats on JavaScript Library Usage

Posted · Category: License Free, Stats

Libscore scans the top million sites on the web to collect stats on JavaScript library usage. In the search box, enter the case-sensitive variable that a library exposes itself as, e.g. jQuery, Modernizr, $.ui, or $.fn.fancybox.

Libscore aggregates this data to provide open source developers the numbers they need to measure their impact. Specifically, Libscore scans for third-party modules loaded with RequireJS, jQuery plugins, window variables produced by non-jQuery libraries, and cross-domain external scripts (e.g. analytics services and CDNs). It scans every site twice: once to pick up results for the desktop version of the site, and again to pick up results for the site’s mobile redirect page.

libscore

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

The Top 100 Email Marketing Campaigns of 2014

Posted · Category: License Free, Webmail

What makes a truly standout email newsletter? In this year’s edition of the Top 100 Email Marketing Campaigns of 2014, Campaign Monitor went beyond simply good looks and presented 100 of the best performing emails from their customers, on a stunning new site.

In this free guide, you’ll see Top 100 Email Marketing Campaigns of 2014 presented with no details spared. Each of the email campaigns comes with thoughtful analysis, subject lines, designer details and a mobile view (where applicable). Across 5 categories, being “All-Stars”, “Design Leaders”, “Nonconformists”, “Optimization Experts” and “Top Performers”, you’ll find designs from household names like Buzzfeed, Rip Curl and UNICEF, agencies like Saatchi & Saatchi, as well as respected, design-oriented companies like Realmac, Panic and more.

top-100-email

Requirements: –
Demo: https://www.campaignmonitor.com/guides/best-email-marketing-campaigns/
License: License Free

Design Breakfast – All Design Inspiration You Need

Posted · Category: Inspiration, License Free

Once upon a time, three guys worked together. They shared inspiring links, drank bad beer and celebrated birthdays with cake and good cheer. Then, one of the three guys had an idea. A brilliant idea. What if there was a way to share these links with others?

And so, Muzli was born. Muzli is a labor of love, a product designed, coded and maintained because they enjoy it. Because they love it. Because they live it. Muzli is the content that drives them. And they hope it inspires you. All the design inspiration you need. It’s like crack for designers. And good for you too.

design-breakfast

Requirements: Chrome Browser
Demo: http://muz.li/
License: License Free

Inspiration for Elastic Components with SVG Animations

Posted · Category: Inspiration, License Free

Codrops has shared some inspiration for adding elasticity to SVG elements. The idea is to integrate an SVG element into a component and then animate it from one path to another with an elastic animation. Using SVGs like this can make things like menus, buttons or other elements more interesting and make the interaction look more organic with a natural feel to it.

It’s of course important to keep things subtle and not exaggerate the bounciness. The nice thing is that we can give a more “realistic” interaction feedback to the user. Especially touch feedback can benefit from using this kind of effect. Based on this idea, they’ve created some inspirational examples of contexts where a morphing shape animation enhancement could make sense.

elastic-svg

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

Curated HD Video Free For Personal and Commercial Use

Posted · Category: License Free, Video

With the growing trend of websites using video as backgrounds (PayPal, AirBnB), and freemium stock content becoming more available, Create the Bridge has released Distill. Distill is a curated video resource platform that offers free, 10-30 second HD videos for anyone to download and use under the Creative Commons License Zero.

It will strengthen an artist’s name as an ambitious filmmaker, and allow them to reach a larger audience by being part of a curated platform. Build an archive for creatives looking to add a new form of visual communication into their web project. Allow video producers to discover high-quality video and/or new talent for their commercial projects.

distill

Requirements: –
Demo: http://www.wedistill.io/
License: License Free

Free Download: 72 Website Flowcharts and Wireframes

Posted · Category: License Free, PS Tutorials

Professional flowcharts within minutes, it is possible if you have a proper assets in your designer toolbox! Meet UI Tiles, 72 Website Flowcharts for any purpose. Build site maps, demonstrate interactions and engineer magnificent projects, saving lots of time and energy.

Whether you’re a developers, designer or any other person involved in Web Design related projects, you can freely use UI Tiles since they go in every popular vector formats (PSD, AI, Sketch) and PNG formats.

ui-tiles

Requirements: –
Demo: http://pixelbuddha.net/ui-tiles/
License: License Free

Overlook.io – Really Simple Software Test Plans

Posted · Category: License Free, Tools

Overlook.io let you create very simple test plans and invite your team members to participate testing cycles. Ensure that your web and mobile projects are tested on a broad range of browsers and mobile devices. You can build very simple test plans without the fluff. Use your sprint’s tasks or detailed test cases – whatever your project requires.

You can send links to your team members to gather their feedback. Get a clear overview of the tests’ results – all in a glance easily. Sign up for Overlook.io now and use it completely free, forever. How great is that?

overlook

Requirements: –
Demo: http://overlook.io/
License: License Free

Page 7 of 105«34567891011»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons