50 Fresh Tools for Developers and Designers

50 Fresh Tools for Developers and Designers

50 tools to help build your site and save your time

by Janeth Kent Date: 08-07-2013 web tools tips resources tester designers development CSS HTML Frameworks

Web developers and web designers regularly look for new resources, tools and services to make the search of these ever-growing techniques easier. This overview presents some of the most useful round-ups of time-savers, tools and services for Web designers.

As every designer or developer knows, anything that can save you just a little bit of time everyday is truly priceless. Here we have listed 50 fantastic web design tools and resources that have one common goal: to offer a time-saving solution to many of the modern design and development issues you may have.

The article has been split into into the following categories: CSS & HTML ToolsCSS, HTML & PHP FrameworksJavascript ToolsJavscript Frameworks and finally Web Based Apps.

CSS & HTML Tools

CSS Trashman

 

CSS Trashman will automatically refactor your CSS and generate a new stylesheet for your site. It works by examining your site's live DOM in the browser and reverse engineering a new, more elegant definition that captures styles down to the pixel.

Prepros

Prepros is a web based app that will compile Less, Sass, Scss, Compass, Coffeescript, Stylus, Jade, Slim, Markdown and Haml files with live browser refresh.

CSS Modal

CSS Modal is built out of pure CSS and they work on all screen sizes from a small mobile phone up to high resolution screens.

piCSSel-art

piCSSel-art is a drawing app to draw pixel art and get it in CSS.

Preboot

Preboot is a comprehensive and flexible collection of LESS utilities.

Diagnosticss

Diagnostic CSS stylesheet that helps visually detect any potentially invalid, inaccessible or erroneous HTML markup.

Markdown.css

Markdown.css is a web based tool for making regular HTML look like plain-text Markdown.

Popline

Popline is a HTML5 Rich-Text-Editor toolbar that will float around the selected text.

Validatr – Cross Browser HTML5 Form Validation

Glue

Glue is a handy command line tool for generating CSS sprites.

CSS Embed

CSSEmbed is a small tool to automate embedding data URIs in CSS files.

LESS Prefixer

LESS Prefixer is a set of LESS mixins that let you use vendor-prefixed CSS properties without the prefixes. It uses some simple conventions and gets out of the way so you can use the CSS you already know, but with less typing.

csscss -A CSS Redundancy Analyze

csscss is a Ruby gem that will parse any CSS file and tell you which rulesets have duplicated declarations. To learn how to use cssscss, click here.

Helium CSS – JS Tool To Scan Your Site and Show Unused CSS

Helium is a tool for finding unused CSS across many pages on a web site. Helium takes a list of URLs for different sections of a site then loads and parses each page to build up a list of all stylesheets. It then visits each page in the URL list and checks if the selectors found in the stylesheets are used on the pages. It will then generate a report with details of each stylesheet and the selectors that were not found to be used on any of the given pages.

CSSO – Structural Optimization of CSS Files

As well as being a CSS minimizer, CSSO also can perform structural optimization of CSS files, resulting in a much smaller file size compared to other minifiers. It will merge blocks with identical selectors and properties, remove overridden properties, remove duplicate selectors, partially merge blocks, remove empty rulesets and will also minimize margin and padding properties

CSS Frameworks

Cascade Framework

Responsable Framework

 

Responsable is a clean responsive grid system with a typographic baseline powered by LESS/SCSS and based on Semantic.gs.

Mueller Grid System

MUELLER is a modular grid system for responsive/adaptive and non–responsive layouts, based on Compass.

Pure

From Yahoo!, Pure is a set of small, responsive CSS modules that you can use in every web project.

PocketGrid

PocketGrid is a lightweight pure CSS resposnive grid system allowing for an unlimited number of columns and breakpoints.

Kraken

Kraken is a lightweight, mobile-first boilerplate for front-end web developers. It includes just the essentials: A CSS reset to ensure cross-browser compatibility; A responsive, mobile-first grid; A well-designed, fluid typographic scale; CSS3 buttons; Basic form styling; Optional add-ons for more functionality.

.Fitgrid

Mosto Framework for Forms

Mosto is a framework for building forms using minimal markup and implicit label association.

GroundworkCSS

 

GroundworkCSS is a fully responsive HTML5, CSS and Javascript toolkit to rapidly prototype and build accessible web apps that work on virtually any device.

Typeplate

Typeplate is a typographic starter kit that doesn't make aesthetic design choices, but defines proper markup with extensible styling for common typographic patterns.

Topcoat – CSS for Clean & Fast Web Apps

Javascript Tools

JSHint

JSHint is a tool for detecting errors in JavaScript code and enforce your team's coding conventions.

Flatdoc

Flatdoc is a small JavaScript file that fetches Markdown files and renders them as full pages.

svg.js

 

svg.js is a lightweight library for manipulating and animating SVG with no dependencies and aims to be as small as possible.

Midway.js

Midway.js makes it super easy to automatically center the responsive elements on your websites.

WideArea

Widearea is a lightweight JavaScript/CSS library to create an expandable textarea and to write large volumes of text easily.

gif.js

 

gif.js is a JavaScript GIF encoder that runs in your browser that uses typed arrays and web workers to render each frame in the background.

instano.js

 Instano.js

This app lets detect if JavaScript is working or not when the page is loading. A message is sent to the user when JS is not working.

 Countable.js

This is a JavaScript which allows you to insert live paragraph. It has a counting HTML element.

Packery

It uses a bin-packing since it is a JavaScript outline library. No empty gaps are left since packer fills all this gaps.

 Highlights.js

It main function is to detect different languages and highlight them. It uses code syntax on any net page.

Intern

It is built to aid you run consistent and high quality for the different applications and libraries from the JavaScript.

 

 Chart.js

This is the easy and simple way to include animated graphs on the different website

Draggabilly

This allows you to list down all your events so that you do not forget either of them. Their license was released under the MIT.

 Intro.js

It has great guidelines that users and developers with little skills can use. At the same time it is
harmonious with the roadmaps. Users and developers can use it with Firefox and also chrome. It is easy to design and use.

 Headtrackr

This is one of the best JavaScript apps users can use to track down their browsing experience via the use of webcam. Companies can benefit a lot as they can use it to track down.

Javascript Frameworks

React

This is a Facebook app that is gaining momentum especially with the increased use of social media and blogging. It helps in building interface for users.

 Pedestal

This is an app that is getting popular by day. It supports language features which most users and developers find attractive and useful. It is also first to create and easy design.

 Helios

This is one of the fastest way to create apps and keep your customers happy and satisfied. Users want apps that will get their websites run in just a few clicks.

 

 RoughDraft.js

This offers a fast way of creating functioning HTML without repeating other features in the program.

Hopscotch

Websites designs and contents speaks volume. Hopscotch makes it effortless to upload and add beautiful contents abc graphics to a website.

Web Based Apps

 MarkdownEditor

This is customized Language based app that makes browsing and communication a lot easier. It has great features and improves the online experience.

RedPen

When it comes to getting feedback quickly, red pen is the answer. It allows users to design their personalized designs, share them including links. This can be great for web optimization.

CodeMirror

It allows customization, has great plugins and has a variety of languages that can be used.

LightTableIDE

This is a great app that saves on time and energy by working on active projects. Customization of websites is had easier and game lovers have a reason to celebrate.

 

 
by Janeth Kent Date: 08-07-2013 web tools tips resources tester designers development CSS HTML Frameworks hits : 10881  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.

 
 
 

Related Posts

Alternative tools for graphic design

There are many people today who only use the following for design purposes Canva as it is a really popular software and website and there is no denying that it…

Top tools for social media management

Today we know that having a presence on social media is becoming increasingly important if you want to boost your business and reach a wider audience. But first of all,   What is…

How to trim a video without downloading programs

You recently experienced one of the most epic concerts in recent years and now you're in the process of showing the videos you recorded to friends and family who, unfortunately,…

New graphic window units - CSS

''Intercop 2022' is a project announced by Google, Microsoft, Apple and the Mozzilla Foundation to make all browsers offer the same web experience. The project has 15 focus areas and one…

Let's create a Color Picker from scratch with HTML5 Canvas, Javascript and CSS3

HTML5 Canvas is a technology that allows developers to generate real-time graphics and animations using JavaScript. It provides a blank canvas on which graphical elements, such as lines, shapes, images…

Why shouldn't we use black?

Nowadays it is becoming more and more common for web pages to have the option to set them in dark mode, or to base their aesthetics directly on black or…

Loading images by resolution with HTML5

Normally the way to load images in HTML is through the img element to which we pass as a parameter the URL of the image to load. But since HTML5…

How to make your own custom cursor for your website

When I started browsing different and original websites to learn from them, one of the first things that caught my attention was that some of them had their own cursors,…

8 benefits of having a website for your business

At this moment, the Internet is a phenomenon that is sweeping the world. It has been able to interconnect millions of users all over the planet. People have made the…

Open source web design tools alternatives

There are many prototyping tools, user interface design tools or vector graphics applications. But most of them are paid or closed source. So here I will show you several open…

How to create a .onion domain for your website

The dark web, a hidden network accessed through the Tor browser, offers enhanced privacy and anonymity for websites. To establish a presence on the dark web, you can create a…

Nesting: future proofing CSS

Although not currently supported by browsers, there is a proposal for CSS nesting to support a feature that would provide better readability to native CSS, so in the future it…

Clicky