56 Powerful CSS Tools And Generators

Written by Makara on September 30, 2011 in Web 2.0, web Design - No comments

Cascading Style Sheets offer significant advantages compared to the other option available – table-layouts. First of all CSS provides a strict separation between layout, design of the page, and the information, presented on the page. This means that the layout of all pages in a website can be changed at one by editing style definitions in one .css-file that all the web pages link to. The separation of layout and information also means that loading different .css files with the same content pages one can completely change the aspect of the site, making it perfectly suitable for immediate user needs fx. screen, printing or mobile devices.

CSS Grid System Generator

The CSS Grid system generator will create fixed grid systems in valid css / xhtml for rapid prototyping, development and production environments.

In addition to the CSS Grid framework, it creates a background file (sample) that you can use in Fireworks, Illustrator, OmniGraffle, Photoshop, Visio (etc.) to aid in prototyping and design.

Simple CSS

Simple CSS allows you to easily create Cascading Style Sheets from scratch, and/or modify existing ones, using a familiar point-and-click interface.

YUI Grid CSS

YUI CSS Grid support fluid-width layouts as well as fixed-width layouts. This is the advantage of YUI Grids CSS over the other CSS Grid Frameworks. To get started with YUI Grids CSS, you can download the cheat sheet and YUI Grids Builder from the official site.

Code Beautifier

Formats and optimizes CSS.

Blueprint Grid CSS Generator

This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png files. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint.

CSS Compressor

Use this utility to compress your CSS to increase loading speed and save on bandwidth as well.

CSS Superscrub

This tool can significantly reduce the size and complexity of your CSS by programmatically stripping unneeded content, stripping redundant calls, and intelligently grouping the remaining element names.

CSS Validator

The W3C CSS Validation Service is a free software created by the W3C to help Web designers and Web developers check Cascading Style Sheets (CSS). It can be used on this free service on the web, or downloaded and used either as a java program, or as a java servlet on a Web server.

CSSFly

CSSFly is a web 2.0 tool for easy editing websites direct and in real-time in your browser. Simply edit the (X)HTML-code and the external Style-Sheet files : what you code is what you get! This tool is designed for developers. Use it for developing, testing or checking your web-project or take a look behind the scenerys of your favourite websites.

Wordoff

Wordoff applies the following rules to strip the cruft that is pasted into WYSIWYG editors from Word:

• Attributes are removed for all elements except <a>s
• <span>s and <div>s are removed
• Empty elements are removed
• Consecutive line breaks are reduced to two

CSS Sorter

CSS Sorter is a free online tool for sorting CSS files. It organizes CSS rules alphabetically so that it will be easier for you to maintain your CSS files.

Elastic CSS Grid Framework

Elastic provides a declarative language to define the layout structure and behavior. This is a young CSS Grid framework, and the best site to demo the usage of Elastic is the official site itself. The Elastic CSS Grid Framework has a lot of classes and helpers that will aid in the process of webdesign.

Browser Support of CSS Properties & Selector

This is a list of CSS properties and selectors with the first browser versions that support them. The list includes most CSS2.1 properties and some of CSS3, more will be added as time permits.

Layout Generator

Generating multi-column and grid layouts with CSS 2.0 techniques using %, px, or em.

CSS Fly

CSSFly is a web 2.0 tool for easy editing websites direct and in real-time in your browser. Simply edit the (X)HTML-code and the external Style-Sheet  files : what you code is what you get! This tool is designed for developers. Use it for developing, testing or checking your web-project or take a look behind the sceneries of your favourite websites.

Clean CSS

CleanCSS is a powerful CSS optimizer and formatter. Basically, it takes your CSS code and makes it cleaner and more concise.

Variable Grid System

The variable grid system is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System.

Content With Style

This is a fixed width layout and the zip files contains a few layouts such as vertical navigation with 1 content column, vertical navigation with 2 content columns, and etc.

Blueprint Grid Generator

This tool will help you generate more flexible versions of Blueprint’s grid.css  and compressed.css and grid.png files. Whether you prefer 8, 10,16 or 24  columns in your design, this generator now enables you that flexibility with Blueprint.

Grid Builder

The CSS Grid Builder allows you to rapidly generate a CSS-based, web-standards compliant page layout in a matter of minutes. Once you’ve got the page layout the way you want it, all you have to do is press “Show Code” and it generates the HTML for you.

CSS Menu Builder

Choose from our 300+ horizontal menus, our 700+ vertical menus combinations and our breadcrumb menus  that consist of more than 200+ combinations, in total the site offers more than 1000 menu combinations not including the endless color combinations.

CSS Grid Generator by netProtozo

Grid Generator Use it to design a layout structure, specifying column, margin and gutter sizes, all referencing a core unit (in pixels). The resulting CSS Grid is then ready for use in your next html layout.

CSS Menu Maker

Here you can exploit gallery of professionally designed CSS menus, customize them and then download the HTML and CSS.

Build a Newspaper Theme With WP_Query and the 960 CSS Grid Framework

WP_Query is a powerful tool to control what comes out of your loop. Today I’m going to teach you all how to use it to make a 3 columned newspaper theme that has all your main blog posts in the main column, and off to the side a set of posts with a certain category. We’ll be using the 960 CSS Grid framework for the basic layout and reset of our theme, it will chop a lot of work off what’s needed!

Jotform

Web-based WYSIWYG form builder

Quick Form Builder

Allows you to easily create CSS forms.

Logicss

The Logic CSS framework is a collection of CSS files and a toolset designed to cut development times for web-standards compliant web layouts and templates.

CSS Button & Text Field Generator

Generates CSS based buttons and text fields.

Rounded Corner Generator

Spiffy Corners is a simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or JavaScript.

CSS Type Set

CSS Type Set is a hands-on typography tool allowing designers and developers to interactively test and learn how to style their web content.

Grid Designer 2.6b

This tool enables you to create a CSS Grid by specifying the number of columns and the widths of the columns, gutters and margins. You can also specify typography in the same tool and export the final CSS and (X)HTML markup. You can also bookmark your grid and typography settings and create designs with spanning columns. Created by Rasmus Schultz.

Typetester

The Typetester is an online application for comparison of the fonts for the screen. It’s primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.

Gridnator

I haven’t investigated this CSS Grid tool in detail yet but it looks really cool.

CSS Evolve

CSSEvolve lets you play with many properties of a web site, including the site’s color scheme, fonts, borders, and more. CSSEvolve works through a process of simulated evolution in which you select site features that you like and refine them through multiple generations.

Image Replacement Methods

Plenty of new and interesting revisions to the original Fahrner Image Replacement technique sprouted up in late 2003. This was an attempt to consolidate them.

CSS Frame Generator

This tool returns corresponding CSS in a line-by-line way indented with spaces to reflect XHTML structure – each selector and all of its properties and values in one line.

Postable

“I absolutely hate having to switch all the “< ” and “>” signs in my code to “&lt;” and “&gt;”, respectively. I also hate having to write “&amp;” anytime I want to include an ampersand. This makes including code snippets on my blog and whatnot extremely annoying, and today I finally got fed up.” Created by Elliot Swan.

Grid Design Basics – Grids for web page layouts

Since tables were co-opted for layout purposes, columns have become key to many Web design layouts, and this thinking continued when CSS took over from tables (at least in the minds of savvy designers) for Web-page presentation. However, other fields of layout design don’t think in arbitrary columns, they work with grids, and these form the basis for the structure of page designs. This article will provide the lowdown on grid design for Web pages.

Slickmap

SlickMap CSS is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.

Text Wrapper

The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code to your website.

Grid-based Layout

A grid is a technique that comes from print design but easily be applied to web design as well. In its strictest form a grid is literally a grid of X by Y pixels. The elements on the page are then placed on the cell border lines and overall aligned on horizontal and vertical lines.

Listamatic

Can you take a simple list and use different Cascading Style Sheets to create radically different list options? The Listamatic shows the power of CSS when applied to one simple list.

CSS Layout Generator

Showcase of 40 useful and powerful CSS tools and generators. These tools should really relieve web developers  work. 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.

CSS Sprite Generator

CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coordinates. Having assigned this generated image to relevant page elements the background-position  CSS property can then be used to shift the visible area to the required component image

Grid-Based Design: Six Creative Column Techniques

One of the new trends among web designers has to be grid design. While grid design is a simple concept, there are now so many tools and ways of doing it that it might get confusing for newcomers. So here is my way of doing things, i.e. how I would explain grid design to someone who’s never heard about it.

Colors Pallete Generator

Welcome to CSS Drive’s Image to Colors Palette Generator! Upload an image to generate a color palette based on the image’s primary colors. Useful for quickly grabbing a particular color within an image for inspiration. Generates also Photoshop swatches and CSS styles.

CSS Table Wizard

Use this wizard to experiment with table border styles and generate style source code. This wizard uses dynamic HTML to change the style of the table in-situ, without loading another page.

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.

IE6 CSS Fixer

A tool specifically designed to ease the pain of the IE6 CSS debugger. This tool was conceived to decrease the monkey work when starting an IE6 CSS fix file. It applies a series of basic fixes that are known to conquer many problems and cause as little harm as possible.

GridControl: A Grid Overlay System for Design Development

transparent grid paper we could lay right over the screen. We can do that. The tools are easy: repeating transparent PNG with lines, page element the size of the entire screen, some magic to turn it on and off at will. Let’s give ourselves some options and provide the user with the option of vertical lines, horizontal lines, or both.

Mappet

CSS image maps generator

Sky CSS Tool

Sky CSS allows you to create CSS classes almost without using manuscript code. JavaScript compatible browser is needed for the proper functioning.

 

ReCSS

This little bookmarklet makes refreshing your CSS a breeze. It comes in quite handy when you’re developing dynamic applications. Tested in IE and Firefox.

CSS Grid Positioning Module Level 3

This module describes integration of grid-based layout (similar to the grids traditionally used in books and newspapers) with CSS sizing and positioning.

CSS Viewer

A simple CSS property viewer. Firefox addon.

The Box Office

The Box Office lets you wrap/float/contour text around freeform images using CSS for usage in (X)HTML pages.

 

Related posts: