Scroco's Best CSS tools
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.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Hartija
Universal Cascading Style Sheets for web printing by uniting all best CSS printing practises into one.

0 Comments