Global list of useful CSS: developer tools

IMP REQUEST:

You are most welcome to join my team form for joining .

Also you are most welcome to join OPEN SOURCE INTELLIGENT SYSTEM (OSINT)if you can help in open source project regarding safeguarding humans from various diseases like CORONA outbreak

https://github.com/Manishfoodtechs/OSINTHRH/wiki

This is not an attempt to create a list of all existing tools for CSS development. Only some of the most useful were selected and placed in the appropriate categories.

For the tool to be truly useful, it must have good documentation and a friendly interface. Unfortunately, some of the tools on the list do not fully fall under these criteria. If someone knows better alternatives with a friendlier interface and more functionality, write in the comments.

Layouts

CSS Layout Generator
This generator can create a three-column (one-, two-) layout with floating or fixed layout, containing header and footer. Dimensions can be specified in px, em or%.

Grid Designer
Allows you to create a modular grid layout, taking into account such parameters as: number of columns, distance between columns, size of fields, size of the main font, size of headers, indentation, etc. You can also see how the basic elements of text formatting in this grid will look.

Layout Generators
Allows you to create a rubber multi-column or grid layout. Allows you to set the width and color. CSS code is generated automatically.

HTML + CSS Template Generator
The service allows you to get a finished diva frame with the necessary parameters in a few clicks of the mouse. After selecting the parameters, you will be prompted to download the archive, which contains 2 files with HTML and CSS.

PSD2CSS
Service for converting PSD layouts to a page that has been drawn up. Fast, free and relatively high quality.

CSS frameworks

Boks
Boks is a visual editor for the Blueprint CSS framework, made as an Adobe AIR application. Using this editor, you can visually create and fill out a grid, set a vertical rhythm, and export the result in HTML and CSS.

Useful tools and links for the Blueprint CSS framework.

YAML Builder
YAML Builder is an online service for visually creating templates based on the YAML HTML / CSS framework.

YUI CSS Grid Builder
A simple web interface used to quickly create cross-browser templates based on the YUI grid.

960 Grid System - Variable Grid System
Variable Grid System is a quick way to create a CSS grid based on the CSS framework 960 Grid System.

Grid system generator
Grid System Generator allows you to create templates with fixed layout and valid CSS / XHTML. Templates can be based on one of four CSS frameworks: 960 Grid System, Golden grid, 1kb grid, Simple grid system. In addition to each template, a png file is also created for design in Fireworks, Illustrator, OmniGraffle, Photoshop or Visio.

Fonts

Typetester
Typetester is a very successful web application designed to compare fonts among themselves. According to the developers, the main task is to make life easier for the web designer. You can compare three fonts at the same time.

CSS Type Set
This service allows you to apply CSS properties to the text and see how it will look.All changes are instantly reflected in the example, and the generated CSS code can be copied and used in the future.

TypeChart
With Typechart you can evaluate the design of various fonts. After finding the option you like, you can copy the CSS code for use on your site.

Texster
Texster is a service for selecting “safe” fonts for your site. Despite the fact that there are many similar and mostly foreign resources, texster differs in that the results are displayed immediately for all fonts, which allows you to compare them and select the one you need.

CSS-Typoset Matrix and Code Generator

CSStxt A
simple web-based tool for creating CSS font styles.

EM Calculator AIR Application
Vertical Rhythm Calculator in XHTML & CSS; easily converts px to em; padding and margins are calculated automatically.

Em Calculator
Em Calculator is a small JavaScript tool that converts a specific px value to the corresponding value in em.

PXtoEM
PXtoEM is a table showing font sizes in various units, which also helps to convert the size from one value to another.

Colour

CSS Color Editor
CSS Color Editor allows you to replace the color scheme of a website. On the service a local CSS file, new colors are selected, and then the service generates a CSS file with the colors already replaced.

Color Palette Generator
According to a given picture, a color palette consisting of key colors is generated.

Color Contrast Check
A truly intuitive online color checking tool that allows you to enter the color of the front and background in hexadecimal format or with the help of sliders. The tool gives an instant result - it shows how this combination looks and whether it has sufficient contrast when viewed by people who have poor color perception, or when viewed on a black and white screen (WCAG 2 test).

Colorzilla
ColorZilla extension for Firefox. In ColorZilla you can get a color by clicking anywhere on the site and then transfer this color to any other program (there are 5 options for describing the color). You can zoom on the page (20% - 1000%). There is also a built-in palette viewer, favorites, DOM inspector and firebug support.

HSL to RGB Converter

Sprites

CSS Sprite Generator
This tool automates the process of creating CSS sprites. Just give it a ZIP file containing 2 or more images (GIF, PNG or JPG), and it will generate a sprite image and the corresponding CSS rules to orient and display each image element.

YASC (Yet Another Sprite Creator)
Another generator. The process of creating a sprite is as follows: a picture is loaded, then the necessary areas are visually marked and they are assigned a CSS id. When all areas are selected, CSS is generated for these sprites.

Smartsprites
SmartSprites is a console Java utility for creating CSS sprites. SmartSprites processes special directives in the CSS file, marking individual images that should be turned into sprites. After processing the CSS file, a sprite is created from the marked images, and the corresponding fragments of the file automatically use the sprite instead of single images.

Forms

Quick Form Builder
Generates XHTML / HTML-compatible and accessible forms with CSS markup. Enter the names of the fields, then select the type of each field, format (HTML or XHTML) and get the finished HTML and CSS code for the form.

Wufoo
Wufoo is a free online service that makes it easy to create good looking, valid CSS / XHTML forms.

UI Components

List-o-Matic
Generates navigation menus (up to 2 levels), allowing you to choose one of several available designs.

CSS Menu Generator
Generates horizontal, vertical, drop-down CSS menus.

ThemeRoller
Allows you to create your own themes for jQuery UI.

Text wrapper

CSS Text Wrapper
The CSS Text Wrapper service makes it easy to give text any shape and paste it onto your page. Lines set the form. Nodal points are added by clicking on the line in the place where you want to add. You can customize block sizes, alignment, font, etc.

The Box Office
This tool that allows you to create text wrap for images with various irregular shapes. Just enter a link to any picture of any shape, set the basic alignment of the image, the background color to be ignored, the height of the line, additional indentation and the color of the text, and then follow the result.

Analysis and Debugging

W3C CSS Validation Service Validation of CSS.

CSS Analyzer
CSS Analyzer combines the W3C CSS Validation Service and additional color checking for contrast (useful for improving usability) and the units used in the source code. The result is a very detailed description of errors and warnings, just like in the W3C CSS Validation Service.

Firebug
Firebug is a Firefox browser extension that is a console, debugger, and DOM inspector for JavaScript, DHTML, CSS, XMLHttpRequest. Firebug shows in the console the function that caused the error, the stack of calls to the functions that caused this error. It warns that the CSS rule or JavaScript method / property that you are trying to use does not exist.

Escort

Dust-Me Selectors
Allows you to analyze the page and show how many and which styles are not used on the page of the site, and also indicate in which file of styles, in which line they are written.

CssCleaner
A Windows application for removing unused CSS classes.

CSS Redundancy Checker
Checks if all CSS rules are used in HTML. After checking, it displays a list of unused pages on this page or group of pages.

Optimization

CSS Drive CSS Compressor
CSS compressor with the compression options “Weak”, “Normal” and “Supercompact”.

Robson CSS Compressor
Another good tool for compressing CSS files is Robson CSS Compressor. While it is under development, and inaccuracies in its work are possible.

MinifyMe - AIR Application
A small AIR application that allows you to collect multiple css files into one.

Formatting

CleanCSS - CSS Formatter and Optimizer
Clean CSS is a popular online tool for formatting and optimizing CSS. Contains groups of settings for the balance between optimization and readability. One of the important features is the automatic connection of the same selectors and properties.

Styleneat
Styleneat transforms CSS code into a standardized, easy-to-read format, structured in such a way that it becomes easy to understand where which areas are and how they relate to each other.

CSS Toolbox
The free CSS Toolbox includes many tools for fast and efficient CSS development - validator, formatter, optimizer.

Browser addiction

Conditional-CSS
Parser for CSS files on the server side, checking for browser type and version. Allows you to create special conditional comments for various groups of browsers. PHP, C #, and C versions are available.

Web Browser CSS Support
Detailed CSS standard support table for popular browsers.

When Can I Use?
It makes it possible to compare browser support for various latest technologies, namely HTML 5, CSS 3, SVG, etc. You can select both specific browsers, time periods, statuses, and certain technologies.

IE7.js
IE7-js is a JavaScript library that fixes many bugs in HTML and CSS for Internet Explorer versions 7 and below. For example, it fixes transparency support in PNG, fixed positioning of elements and background images (position: fixed), pseudo-class support: hover for all tags, etc.

Modernizr
Modernizr is a small simple Javascript library that will help to use technologies such as CSS3 HTML5 in browsers that do not yet support this technology.

Selectors

Sizzle JavaScript Selector Library
A fast JavaScript engine for selecting CSS selectors. Sizzle supports almost all CSS3 selectors - even such rarely used ones as shielded selectors (”.foo \ + bar”), unicode selectors, etc.

YASS: Yet Another cSS selector
The fastest JavaScript library for selecting elements by CSS selector.

The SelectORacle
Service provides a human language description of complex CSS selectors and can be very useful in learning these.

YUI Selector Utility
YUI Selector Utility allows you to use CSS3 selector syntax in JavaScript, simplifying the collection, filtering and testing of HTML elements.

YUI StyleSheet Utility
Use the StyleSheet Utility to create and modify CSS styles on the fly.

Miscellaneous

XRAY
XRAY is a bookmarklet that can show various useful information about all the "insides" of the page. In particular, the sizes of all elements, their location coordinates, CSS properties, the names of HTML tags corresponding to the displayed blocks, and some other details.

Cheat sheets

CSS Cheat Sheet
A one-page CSS cheat sheet listing all selectors (CSS 2.1) and properties. Includes box model picture, CSS units.

CSS Shorthand Cheat Sheet
YUI Library: CSS Reset, Base, Fonts, and Grids

Blueprint CSS Cheat Sheet

Beyond CSS

MoreCSS
MoreCSS is a designer-oriented JavaScript library that allows you to write CSS-style code to create pop-ups, tooltips, tab menus, zebra tables, advanced list styles, and cross-browser transparency.

LESS - Leaner CSS
Less is a Ruby gem that extends CSS with the following features: variables, mixins, operations, and nested rules. It is enough to rename .css .less files to get all these features.

DtCSS
DtCSS is a PHP script that processes CSS files, allowing them to use nested selectors, color mixing, etc. DtCSS reads a CSS file with special instructions written for DtCSS, and outputs regular CSS. There is a smart caching system.

Sass + compass
SASS - compiler in style sheets. Very convenient - formatting with indentation, as in python, mixins with parameters (almost functions), variables and operations on them.

Contact email: Manishfoodtechs@gmail.com. If you have any problem, our team is also engaged in professional consultancy and delivery.

Don't forget to Follow, like or tag me :).