Skip to content

Scroco's Best CSS tools

Rankrz' version

scroco Created by scroco 146 days ago | Updated 144 days ago

Make your version

Total 488 views | 0 Rankingmarks ( Mark this! )

Tags: technology, css, tools

Most of explanations are taken from each site's introduction.

Rank it

BlueprintCSS

Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.

Rank it

YUI Grids CSS

The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations.

Rank it

960 Grid System

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

Rank it

CSSTidy

CSSTidy is an opensource CSS parser and optimiser. It is available as executeable file (available for Windows, Linux and OSX) which can be controlled per command line and as PHP script (both with almost the same functionality).

Rank it

CleanCSS

CSS Formatter and Optimiser based on csstidy 1.1

Rank it

CSS Analyser

This service has been provided to allow you to check the validity of your CSS against the W3C's validation service, along with a colour contrast test, and a test to ensure that relevant sizes are specified in relative units of measurement. If the CSS is specified by a URL, it will be loaded into the text area to offer an option to make changes for testing without having to re-upload.

Rank it

CSS Form Code Maker

This HTML - CSS form generator will create a nice looking layout for forms. The time is now right - to move to 'tableless' layout for forms. And at the same time, add a 'little color' to the forms.

Rank it

CSS Optimizer

A web tool for reducing the file size of cascading style sheets. In order to save more space optimized files would be messy even so you may output it as a file. Non-valid or hacked (for certain browsers) CSS files may result in error.

Rank it

WYMstyle

The aim of this project is to provide a set of well-tested modular CSS files, that can be used for fast design of web sites.

  •  WYMstyle is a set of CSS files, that you can easily combine to very quickly create the layout of your web sites.
  • WYMstyle aims to suppress the tedious compatibility testing across browsers for each created website, by providing CSS modules which are reliable and well-tested.
Rank it

CSS Button & Text Field Generator

Rank it

Element CSS Framework

Elements is a down to earth CSS framework. It was built to help designers write CSS faster and more efficient. Elements goes beyond being just a framework, it's its own project workflow.It has everything you need to complete your project, which makes you and your clients happy. Read the Overview for more information.

Rank it

CSS Font and Text Style Wizard

Use this wizard to experiment with font and text styles and generate sample CSS style source code. This wizard uses dynamic HTML to change the style of the table in-situ, without loading another page. It is cross-browser compatible with Firefox, Netscape, Internet Explorer, and other modern browsers.

Rank it

CSS Layout Generator

The layout generated has changed significantly from previous versions. The main reason for change was to simplify the layout and in doing so make it easier to use. It no longer provides fixed width columns with fluid center or full length columns by default.

This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.

Links to articles in the "Layout Hints" box to the right and the CSS Forum will provide help where needed.

The generator requires a DOM capable browser with JavaScript enabled.

To create your layout select the structural elements your site requires (header, footer, columns). Then specify a size in the field provided and choose a background color from the color chooser below.

The color chooser changes values as you move your mouse along a row. To set the value of a row, click on the color row, to release click again. Once the color in the box is the color you are after, click in the background-color field to assign it the value.

Rank it

EM Calculator

Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.

Rank it

CSS Menu Generator

CSS Menu Generator will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons. As text links are fast becoming preferred over images where search engine optimization is needed, a CSS menu can give the affectiveness of text links with a better look than standard text links. For an example of a CSS menu, look at our navigation on the left.

Rank it

Reset CSS

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others.

Rank it

YAML

"Yet Another Multicolumn Layout" (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.

Rank it

Hartija

Universal Cascading Style Sheets for web printing by uniting all best CSS printing practises into one.

0 Comments


Leave a Comment