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 : 8858  
 
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 END DEVELOPMENT.

 
 
 

Related Posts

Understanding LCP, CLS, FID. All about Core Web Vitals in Google Search Console

A few months ago we talked about certain Google metrics that were displayed in Search Console. The reason for writing another post on this topic is that Google has changed…

Validating HTML forms using BULMA and vanilla JavaScript

Today we are going to write about contact forms and how to validate them using JavaScript. The contact form seems to be one of the top features of every basic home…

How to use Parallax.js effect on your website

Today, we're going to write about the parallax effect, similar to parallax scrolling, and how to implement it to improve your landing page. In webdev, they say mobile first -…

How to use your browser as a file browser, in Chrome or Microsoft Edge

We're going to explain how to use the Chrome browser as a file browser, both on Android and on your computer. This is a hidden feature of Chromium that will…

How to make the website's dark mode persistent with Local Storage, CSS and JS

Recently we wrote about how to do a switchable alternative color mode or theme, a very useful and popular feature to websites. Today’s article is going to be about how…

Dark Web: the creepy side of the Internet is not as dark as believed

People who surf the Dark Web are not necessarily looking for something illegal. Most people want to protect their privacy. And according to a recent study, 93 percent only use…

Cross cultural challenges in web design, an overview

The user experience design of a product essentially lies between the intentions of the product and the characteristics of your user. - David Kadavy - The task of building a culturally appropriate…

Website Traffic Getting Low? 4 Immediate Action to Take

If you have created a website, I am sure your end objective is to create a strong brand presence, boost engagement, and multiply revenue. An interesting statistic showed that there were…

The easiest way to align items using flexbox

With the release of flexbox in CSS, it has become an essential tool when placing elements next to each other, since, by default, the children of a display: flexare stacked…

Dark Mode on website using CSS and JavaScript

In today’s article we are going to learn how to build pretty much standard these days on the web pages and that is the alternative color mode and switching between…

JavaScript: Spread and Rest operators

In today’s article we are going to talk about one of the features of the ES6 version(ECMAScript 2015) of JavaScript which is Spread operator as well as Rest operator. These features…

How To Add Filter Effects to Images with CSS

To achieve interesting effects on your images, learn about the 'filter' and 'Backdrop-Filter' properties of CSS. CSS filters are a very attractive feature of CSS that allows you to apply certain…

We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".

Accept All Only sistem cookies Configuration