Useful CSS Generators And Tools To Help The Common Web Designer


It is quite lovely to see that new tools are launched pretty often to help web designers or web developers do their work easier.

Although most of these below are new I’ve also included a few oldies but goldies that I’ve used over the years.

They helped me with my projects and I’m sure they will also help you.

There aren’t only CSS generators or CSS related tools, but also various javascript libraries, cross-browser testing tools, and more.

When building a new web page or app it’s always useful to see how it would look in production – i.e. with all the textual elements fully present; this is where tools like DeLorean Ipsum come in handy – this free text generator with a twist lets you quickly create paragraphs of Back-to-the-Future themed text for your online project.

CSS Lint is a tool to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.

G5 Framework

The 1KB CSS

Other CSS frameworks try to do everything—grid system, style reset, basic typography, form styles. But complex systems are, well, complex. Looking for a simple, lightweight approach that doesn’t require a PhD? Meet The 1KB CSS Grid.

CSS Compressor

Use this Cascading Style Sheets, CSS Compressor to compress CSS to reduce CSS code size and make your web pages load faster. You can select from four levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression.

Columnal CSS grid system

The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. The elastic grid system is borrowed from cssgrid.net, while some code inspiration (and the idea for subcolumns) are taken from 960.gs.

Columnal makes responsive web design a little easier. It is 1140px wide, but since it is fluid, will respond to the width of most browsers.

Grid Designer

inuit.css

inuit.css is built to work on smaller screens (such as tablets) and tiny screens (such as phones) straight out of the box with minimal effort.


inuit.css is a very stripped back framework designed to be built upon by you… no undoing things, and the minimum predefined styles.

Fractal

See exactly which lines of code are not supported in over 24 email clients. Email designers that are tired of trawling through check lists, this is for you.

The CSS Crush script takes one CSS file as input, scans for @ import directives, and includes them directly in the output file so no http requests are wasted.

If you specify a media designation following the import URL – as per the CSS 2.1 standard – the imported file contents will be wrapped in an @ media block.

The Typetester is an online application for comparison of the fonts for the screen. Its 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.

CSS Formatter and Optimiser

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

What is the easiest way to find out the fonts used in a webpage? Firebug or Webkit Inspector? No, that’s too complicated. It should be just a click away.

Hence I wrote WhatFont, with which you can easily get font information about the text you are hovering on.

To embrace the new web font era, WhatFont also detects services used for serving the font. Now supports Typekit and Google Font API.

Tired of making grids manually? Me too. Complete the form, and a PNG image for the grid will be generated, that can be used as a background in your PSD or HTML/CSS.

haz.io › HTML5 & CSS3 Browser Capabilities

With the help of the awesome Modernizr library, haz.io gives you a quick overview of your browser’s support for recent technologies in the world of HTML, CSS and Javascript.

Maqetta is an open source technology initiative at Dojo Foundation that provides WYSIWYG tooling in the cloud for HTML5 (desktop and mobile). Maqetta allows User Experience Designers (UXD) to perform drag/drop assembly of live UI mockups.

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.

Markup Generator is a simple tool created for xhtml/css coders that are tired of writing boring frame code at the very beginning of slicing work. It’s main purpose is to speed up your work by generating xhtml markup and a css frame out of very intuitive, shortened syntax so you can jump directly to the elements styling.

PCSS: Shortcut-oriented Server-side CSS3 Preprocessor

Unleash the CSS3 power with much less code and features like class nesting, server-side browser specifics, default unit and variables.

CSS Pivot

Add CSS styles to any website, and share the result with a short link. Invite others to submit improvements for your website

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

Gitalist – a modern git web viewer

Adapt.js is a lightweight (845 bytes minified) JavaScript file that determines which CSS file to load before the browser renders a page. If the browser tilts or resizes, Adapt.js simply checks its width, and serves only the CSS that is needed, when it is needed.

A potential drawback of Adapt.js is the possibility of a brief flash of unstyled content as a new stylesheet is being fetched (think of it as “Ajax” for CSS). I have done my best to mitigate this by keeping CSS files small (3 KB). It is worth noting this is a proposed, not prescribed, approach to a problem with multiple solutions.

Prefix your CSS3 code. Instantly!

You can now use powerful CSS3 techniques, and don’t waste your time writing each properties. First, write your code for your loved browser. Then, come here, paste your CSS code in the first block, and prefix! All vendor prefixes are added to your code. You can safely replace your old code.

Screnfly

320 and up

Many CSS Media Queries boilerplates start with a desktop-specific stylesheet, then add queries and styles for progressively smaller viewports. This means that even the small browsers load desktop layout styles and potentially large assets, even when these are set to display:none;.

‘320 and Up’ starts with a tiny screen stylesheet that contains only reset, colour and typography styles. Media Queries then load assets and layout styles progressively and only as they’re needed. Think of this as responsible responsive design.

WP Generator Blog

Holmes – The CSS Markup Detective

holmes.css is useful for checking the quality of your code (up to W3C HTML5 standards), nitpicking over ensuring markup is valid and semantic and accessility guidelines are met, and when you are tasked to fix up and debug an old, OLD website. It has a simple implementation and a mostly unobtrusive effect on your page. Not recommended for live enviroments.

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. It is cross-browser compatible with Firefox, Netscape, Internet Explorer, and other modern browsers.

Perkins CSS3 LESS Framework

RandomText is a tool designers and developers can use to quickly grab dummy text in either Lorem Ipsum or Gibberish format.

There are a number of features that make RandomText a little different from other Lorem Ipsum dummy text generators you may find around the web.

Simply put, it’s a take on the lorem ipsum filler text used when doing design mockups. I was mocking up a web design one day and needed a few words to fill out a link. ”Lorem ipsum bacon” popped into my head, so I plugged that into my HTML. Later that day, it hit me. Make a lorem ipsum generator but use types and cuts of meat.

Gridless

Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

HTML EMAIL BOILERPLATE

This website and its sample code creates a template of sorts, absent of design or layout, that will help you avoid some of the major rendering problems with the most common email clients out there — Gmail, Outlook, Yahoo Mail, etc.

CSS Sprite Generator

CSS Sprites Generator makes use of jQuery with various plugins, Pixastic and a little PHP.

The main goal was to achieve a convenient tool to build, recover and overall deal with the CSS Sprite technique, all using almost only javascript. Because of Javascript’s lack (for evident security reasons) of filesystem support, I have used PHP to store your files on my server, thus making them usable in a more convenient way for Javascript.

Spritemapper is an application that merges multiple images into one and generates CSS positioning for the corresponding slices.

Only 10% of a webpage’s loading time is due to the actual page—the other 90% is spent downloading styles, scripts and images. By reducing the amount of images and better utilizing the connection, CSS spritemapping can reduce your website’s loading time.

You don’t have to write any extra syntax to make Spritemapper work. Just define the directories of images you want spritemapped and use the CSS background declaration as usual.