Design your way

Monday, March 28, 2016

In the past weeks I made articles with tools for web designers that would fall under a certain category, searching for golden resources on the internet for myself and for you also.

While making those articles I postponed a few times this article with newly released or discovered resources that would make a web designer’s or web developer’s life easier.

From the multitude of tools, apps and jQuery plugins that are present here, I hope you will find those that can be of help to you, depending on what projects you are working on and what specialization you have.

Resizer

Resizer

An interactive viewer to see and test how digital products respond to material design breakpoints across desktop, mobile, and tablet. With Resizer you can input a custom URL, or preview selected websites and demos. Using the action icons, you can view a site across Material Design breakpoints for desktop and mobile.

bricks.js

bricks.js

A blazing fast masonry layout generator for fixed width elements. Bricks was developed with a modern JavaScript workflow in mind. To use it, it’s recommended you have a build system in place that can transpile ES6, and bundle modules.

Phoenix

Phoenix

Phoenix brings back the simplicity and joy in writing modern web applications by mixing tried and true technologies with a fresh breeze of functional ideas.

GrapesJS

GrapesJS

Free and Open source Web Template Editor. Next generation tool for building templates without coding.

particles.js

particles.js

particles.js is a lightweight JavaScript library for creating particles.

Gutenberg

Gutenberg

Gutenberg is a flexible and simple–to–use web typography starter kit for web designers and developers. It’s a small step towards a better typography on the web. Beautiful typographic styles can be made by setting base type size, line-height (leading) and measure (max-width).

Gutenberg sets the baseline grid to establish a proper vertical rhythm and makes sure all elements fit into it. It sets up the macro typography so you can focus on the micro–typographic details.

Grd

Grd

A CSS grid framework using Flexbox. Only 512 bytes (Gzipped).

Umbrella JS

Umbrella JS

Covers your javascript needs for those rainy days. A <3kb performant jquery-like library born from the question: You might not need jquery, then what do you need? You probably need awesome CSS (like Picnic CSS) and a lightweight, modern and performant javascript library.

superplaceholder.js

superplaceholder.js

superplaceholder.js is a library to bring your input placeholders to life by cycling multiple instructions in a single input placeholder.

okayNav jQuery Plugin

okayNav jQuery Plugin

You know how navigations have only a desktop and a mobile state, right? I thought, “this might cost people money because it requires additional click for users to reach even the most important pages.”

This navigation aims at progressively collapsing navigation links into an off-screen navigation instead of doing it for all the links at the same time.

Aleutcss

Aleutcss

Aleutcss is a powerful framework designed with scalability and performance in mind. It doesn’t make assumptions about what you want your design to look like. You can use as much or as little of the framework as you want and we try not to generate more lines of code than absolutely necessary.

Life Jacket

Life Jacket

The Life Jacket framework allows web designers/developers to quickly and naturally create a website (using standard HTML files) while allowing clients to safely update only the individual pieces of content that they need. Happy clients and happy designers.

Ready to print device templates for UI & UX designers

Ready to print device templates for UI & UX designers

All files contain a blank and dotted grid template in .png and .pdf formats. New devices are being added all the time, feel free to suggest a device.

Sketchpacks

Sketchpacks

Sketchpacks is an unofficial plugin registry and directory for Sketch software by Bohemian Coding

Balloon.css

Balloon.css

Balloon.css lets you add tooltips to elements without JavaScript and in just a few lines of CSS.

marginotes

marginotes

Marginotes takes your jQuery selection and adds notes to the margin with the text provided in HTML attributes. If you don’t want to use jQuery, there’s also a version of marginotes without it.

Feathers

Feathers

A minimalist, real-time JavaScript framework built for NodeJS, React-Native and the browser. Feathers is a real-time, micro-service web framework for NodeJS that gives you control over your data via RESTful resources, sockets and flexible plug-ins.

Tasty CSS-animated hamburgers

Tasty CSS-animated hamburgers

Material Design for Bootstrap

Material Design for Bootstrap

300+ material UI elements, 1000+ material icons, 74 CSS animations, helpers, templates, SASS files and many more. All fully responsive. All compatible with different browsers.

jqGifPreview

jqGifPreview

jQuery Plugin For GIF Preview As Like Facebook.

imagehover.css

imagehover.css

Imagehover.css is a lovingly crafted CSS library allowing you to easily implement scaleable image hover effects. Choose from over 40 hover effect classes from a CSS library weighing in at a minified size of only 19KB.

Font Famous

Font Famous

Stop wasting time searching Google Images and spinning out in Photoshop trying to format media logos for your site. Show off your recent press mentions with a couple lines of CSS and get back to making fame worthy products.

Browser.html

Browser.html

Browser.html is a research project aimed at building an experimental Servo browser in HTML.

List.js

List.js

Tiny, invisible and simple, yet powerful and incredibly fast vanilla JavaScript that adds search, sort, filters and flexibility to plain HTML lists, tables, or anything.

MediumEditor

MediumEditor

Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.



Source: http://ift.tt/13imEFB

No comments:

Post a Comment

 

The Cash Box Blueprint

Most Reading