100+ Massive CSS Layout Toolbox

Here you will find tools and tips for building a professional CSS layout. Most would probably agree that CSS is one of the most important parts of modern standards based web design. CSS is really simple and extremely powerful if you know how to master it… if your new to creating a CSS layout getting started can be quite hard. I hope this article will help you all to get more out of CSS in your web projects.

Advertisement

Introduction to CSS layout

CSS is used on nearly any website you can find online to describe presentation separately from the information. CSS is one of the most important www technologies and mastering it will give you the power to create professional web designs.

Index

To make it easier for you to find exactly what you need the article has been split up in the following sections.

• CSS Layout Cheat Sheets
• CSS Need to know Stuff
• CSS Tutorials
• CSC Layout Tools
• CSS Navigation and Menus Tools
• Other CSS Tools
• CSS Web Designs

CSS Layout Cheat Sheets

Print out your favorite Cheat Sheet and put it on the wall just next to your monitor to get instant access to CSS help and reference.

lesliefranke.com

addedbytes.com

CSS Shorthand Cheat Sheet

Blueprint css Cheat Sheet

CSS 2 – Quick Reference Guide – PDF

CSS Cheat Sheet

CSS Property Index

CSS Layout Cheat Sheet

Cheat Sheet CSS Shorthand Codes

CSS Need to know Stuff

How to Add Variables to Your CSS Files

Any designer who has worked with large CSS files will agree that its major weakness is its inability to use variables. In this article, we will learn how to implement variables by using PHP and Apache’s URL rewrite mod.

10 Principles of the CSS Masters

When it comes to CSS, there are lots of resources and supposed “expert tips” on the web. These are from unproven, self-proclaimed “gurus” who have no street cred in the design world. While they may have valid points, how is one to know whether a CSS tip is a valid resource or just an untested hack?

Instead of relying on unknown sources for advice, let’s look deeply into designers who have excellent design backgrounds and have walked the walk. These CSS tips are gathered from some of the most respected designers on the planet. They have the portfolios to back their advice up, so you’ll know that each tidbit of advice is of the highest quality.

CSS Specificity: Things You Should Know

Apart from Floats, the CSS Specificity is one of the most difficult concepts to grasp in Cascading Stylesheets. The different weight of selectors is usually the reason why your CSS-rules don’t apply to some elements, although you think they should have. In order to minimize the time for bug hunting you need to understand, how browsers interpret your code. And to understand that, you need to have a firm understanding on how specificity works.

Solving 5 Common CSS Headaches

CSS is a relatively simple language to learn. Mastering it, on the other, can prove a little more difficult. Compensating for various browser inconsistencies alone can produce a migraine. In this article, we’ll demystify five of the most head thumping issues that you’ll encounter when building web applications.

5 Techniques to Acquaint You With CSS 3

CSS is a well-known, widely used language to style websites. With version three in the works, many time-saving features will be implemented. Although only the most modern browsers currently support these effects, it’s still fun to see what’s around the corner! In this tutorial I’ll show you five techniques.

CSS fix for the double margin float bug in IE6

There are several well known bugs that affect only Internet Explorer 6 that can wreak havoc on your websites. One of the most annoying is the double margin float bug in IE6, simply if you float a block level element to the left it will double the margin you have applied to the element and most of the time break your site entirely in a strange way.

CSS Equal Columns Height

A common pitfall of a CSS layout based columns layout is that the columns do not share a common height. Unlike a table based layout where the height of the table itself dictates the height of all of its columns, CSS columns are independent of one another in that respect. Now, this can be problematic (from a design standpoint) when you wish to style one of your CSS columns in a way that should extend all the way down to the end of the layout, such as giving a side column an explicit background color, a surrounding border etc…

5 Ways to Instantly Write Better CSS

Sure, anyone can write CSS. Even programs are doing it for you now. But is the CSS any good? Here are 5 tips to start improving yours…

1. Reset, 2.Alphabetize, 3. Organization, 4. Consistency, 5. Start in the right place…

CSS Tutorials

Fun With CSS Shapes

I bet a bunch of you don’t realize that we can create the illusion of shapes by using 100% CSS. By utilizing the border property in creative ways, we can make some really interesting polygons. In this week’s screencast, we’ll figure out a way to create speech-bubbles without resorting to background images.

Prototype a Magazine-Style Home Page Template with the Blueprint CSS Framework

Prototyping With The Grid 960 CSS Layout Framework

Grid 960 is a CSS Framework that enables developers to rapidly prototype designs. They are excellent tools for creating mock ups. Why? Because they do all the heavy lifting allowing you to get faster results.

Build a Newspaper Theme With WP_Query and the 960 CSS 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 framework for the basic layout and reset of our theme, it will chop a lot of work off what’s needed!

Advanced Typography techniques using CSS

This is an example of what you can do by combining and tweaking type using css. I am not at this time going to be describing the code in much depth, but if you are interested in learning how I did it download my advanced css typography example page and look through the source code.

Absolute Positioning Inside Relative Positioning

A page element with relative positioning gives you the control to absolutely position children elements inside of it.

To some, this is obvious. To others, this may be one of those CSS “Ah-ha!” Moments. I remember it being a big deal for me when I first “got it”.

CSS Slicing Guide

CSC Layout Generator Tools

CSS Creator

Creates 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.

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.

Which CSS Grid Framework Should You Use for Web Design?

Ever wondered how all those slick “magazine” themes for WordPress and other platforms were created? Many, if not all, were designed using a CSS Grid Framework – at least in essence if not in actual fact. That is, you can use an existing CSS framework or build your own from scratch. While it’s possible to design complex web page layouts without a framework, it’s arguably an act in masochism. In this article you’ll get an overview of the current batch of Frameworks and which you should choose to use.

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.

Grid Designer 2.6b

This tool enables you to create a 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.

Fixed Length CSS Layouts

Learn CSS Positioning in Ten Steps

Accessible Form Builder

List-O-Matic

List-o-matic lets you choose the content, layout and presentation of your list-based navigation menus. Just give it a go – it’s child’s play!

Markup Maker

Markup Maker takes a simple list of page ids that you enter and converts it to a valid XHTML/HTML document (scaffolding, if you like). Now includes HTML5 support

CSS Mate

CSS Mate is an online CSS editor.

Spanky Corners

‘Spanky Corners’ is an experimental technique for using only CSS to produce ’round-cornered content boxes’ with semantically pure markup. It does not require JavaScript to work

CSS Rounded Box Generator

A tool to generate HTML and CSS for rounded corner boxes.

Online CSS style editor.

CSS HTML PHP Website Template Maker

A PHP/HTML/CSS template generator that creates a two column layout with both a header and a footer. This PHP / CSS Style Sheet template generator outputs full featured tableless code i.e. tables are NOT used for the template with the column layout. The resulting template is a combination of several files i.e. this is a true PHP, html, CSS template that makes it easy to control multiply pages at a web site.

Page Maker – The Generator Form

CSS Source Ordered Variable Border 1-3 Columned Page Maker

Firdamatic

An online tableless layout generator that allows you to create and customize layouts easily only by completing forms, making creating skins for your Firdamatic-based layout a breeze. This tool is available for free for personal/non-commercial use only .

Free CSS Template Code Generator

Yields a three column layout without using any Tables. This HTML & CSS Style Sheet template generator outputs a full featured 3 column template. Resulting in an instant web page with a customized template that can be used to control the look of an entire site.

CSS Form Code Make

HTML/CSS form generator that creates a nice looking layout for forms. Add a ‘little color’ to the forms.

CSS Menu Generator

Generates 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 effectiveness 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.

CSS Navigation and Menus Tools

The ULTIMATE CSS only drop-down menu

CSS Candy Menu

Candy Menu is a stylish CSS drop down menu that’s comes in six provocative colors to get you started.

19 Horizontal menu designs

Multiple Levels

Advanced CSS Menu Trick

What we want to do here, is instead of simply altering the state of the navigation item the user is currently rolling over, we want to alter the non navigation items as well. This will help focus the users attention on the item they have selected on, and create a new look and feel for the site overall. Want to see it in action? Look at my demo page before we start.

Vertical menu designs

Howto Create CSS menus

Using Sliding Doors with WordPress Navigation

CSS Tabs Menu with Dropdowns

Advanced CSS Menu

Animated horizontal tabs

A flyout menu with breadcrumb trail

A CSS only validating flyout menu

Three up two down vertical flyout

A flyout menu with FOUR sub levels, overlap and overrun.

CSS graphic menu with rollovers

CSS Sprite Navigation Tutorial

cross-browser drop-down cascading validating menu

Variations on a drop-down theme

CSS Menu – Horizontal/Vertical

11 CSS Navigation Menus

CSS Mini Tabs (the UN-tab, tab)

14 Vertical CSS Menus

CSS Tabs

Horizontal menu, top to bottom

Hybrid CSS Dropdowns

Flexible navigation example

Navigation matrix reloaded

CSS only flyout menu with transparency

CSS only flyout/dropdown menu

Other CSS Tools

Styleneat

This tool can really make your come more neat!

CSS Compressor

Use this utility to compress your CSS to increase loading speed and save on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. The “Normal” mode should work well in most cases, creating a good balance between the two.

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).
In opposite to most other CSS parsers, no regular expressions are used and thus CSSTidy has full CSS2 support and a higher reliability.

Tabifier

A tool to properly indent computer code. The style it produces is a mix of my personal preferences for indentation plus what I could manage to make a program produce from dirty source. The tabifier currently supports CSS, HTML, and C Style code; the latter being anything that uses curly braces to start and end blocks, and semicolons to terminate statements. JavaScript and PHP both fall into that latter category.

CSS Beautifier

Offers a variety of options, among them – Style Rule Settings, Style Property Settings, Alphabetizing Feature and De-Capitalization Feature.

5 Time Saving CSSEdit Tips

CSSEdit is another fantastic web dev app, which takes Apple’s WebKit by the reigns to deliver a fantastic real-time visual CSS editing experience. But that’s just it! People only know it as a visual CSS editor, when it is actually much more! I use these 5 fantastic tips to keep my work flow fast and smooth.

CSS Formatierer und Optimierer

Based on csstidy 1.3dev. The service is available in 4 languages : English, Deutsch, French, Chinese. It provides different compression layouts; you can sort selectors, properties, regroup selectors, optimize shorthands, compress colors, compress font-weight, discard invalid properties and add timestamps. It also allows to create a custom template the system will use to format the code. Note that your code should be well-formed. This is not a validator which points out errors in your CSS code.

Postable

“I absolutely hate having to switch all the ‘< ‘ and ‘>’ signs in my code to ‘<’ and ‘>,’ respectively. I also hate having to write “&” any time I want to include an ampersand. It makes including code snippets on my blog and whatnot extremely annoying, and today I finally got fed up.” This handy tool is a little app that will do all that for you. Created by Elliot Swan.

Clean CSS

A tool to optimize and format your CSS. Note that your code should be well-formed. This isn’t a validator which points out errors in your CSS code.

CSS 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.

CSS Color Chart

This page contains a neutral colors chart and a general-purpose color chart. You can use the colors in the palettes with either HTML or CSS. Click on the color code to select it, then you can copy and paste it. Click on the Toggle button to convert from Hex to RGB and back. The charts are printed in tabular fashion so you can narrow your browser window with the palette and compare the colors to your design side-by-side.

I Like Your Colors!

A tool to extract the colors from the HTML and CSS of any web site. Compare the colors easily using hue groups.

CSS Web Designs

42 Two column CSS Designs

Three column CSS Designs

34 Mixed cols and rows CSS Designs