4 Ways to Produce a Quick CSS3 Layout

By John Paul Mueller

A designer needs to know all the details of the various layouts and then creates the CSS3 required to implement a particular layout determined by customer needs and content type. Most developers don’t have time to ascertain all of these details and create a custom layout.

These four tips helps you get past these details and create a layout quickly that simply looks good — that everyone feels matches the content format, consumer needs, and viewer expectations.

Basics of CSS3 layout properties

No matter how you interact with CSS layouts, you’ll eventually need to know what the properties are and how to interact with them.

Even when you work with a generator, the generator will produce code that relies on those properties; if you don’t know what the properties do, you won’t be able to make required tweaks to the generated code. You can use a tutorial, such as the one on the W3Schools site, but an article often serves the purpose better.

The article entitled, “Master the New CSS Layout Properties” provides precisely what you need in a short space. This article covers such diverse topics as vendor prefixes and the use of the various column properties. It gets you going quickly, even if you’re using a generator to produce your code.

If you find later on that you don’t quite know every required property, you can always fall back on the W3Schools site (or an alternative that provides similar information).

How to create basic layouts with CSS3 Layout Generator

The CSS Layout Generator helps you create fixed or liquid layouts by filling out questions in a form. You tell the wizard the version of HTML to use, what sort of layout you want, the specifics of the content area, and some aesthetics, such as the background color.

image0.jpg

Once you’re finished filling out the form, you click Create Layout. The wizard generates the layout you requested and displays it onscreen. Here is a sample layout; yours may differ, depending on the settings you define.

image1.jpg

At this point, you need to determine whether the layout will work. Try resizing your browser to see how the layout will work with various device types. If you like the layout, then click Download Layout — otherwise you click the Back button on your browser and make additional changes.

What you receive is a .ZIP file containing the HTML and CSS needed to create your layout. You can use these files as templates for customizing the content.

How to understand CSS3 layouts with Learn CSS Layout

This book provides everything most developers need to work through the vagaries of page layout and design using CSS. However, there are times when you’re part of a larger team and may need to interact with designers and artists who really do love designing everything from scratch.

In these situations, you sometimes need to bone up on your CSS layout terminology so that you can talk with these other groups intelligently. One of the better quick tutorials is Learn CSS Layout. It provides you with the essentials you need to know without burdening you with all of the details.

There are several features that recommend this tutorial. For one thing, it comes in several languages, including English, German, French, Spanish, Portuguese, and several Oriental languages. You’re also not stuck performing the tutorial one step at a time. Click Table of Contents and you see a listing of topics that tutorial covers, so you can skip to just the information you really need to know.

This particular tutorial is good at telling what’s happening, why it needs to happen, and how to create an effect at a basic level. It doesn’t provide business essentials or recommendations on when to use a particular technique. You won’t find a list of best practices in this tutorial. The advantage of this tutorial is that it’s both simple and fast — you get essential information fast.

How to use a CSS3 reset to overcome errors

One of the worst scenarios you can encounter is when the amazing page you have labored over turns out to work only in a few browsers, and you have to listen to a host of users complain about the resulting site compatibility problems. Fortunately there are resets out there to help address this problem.

A reset is a special kind of style sheet that helps reduce or eliminate the differences between browsers. With a reset, even though you can’t make your site’s appearance on every browser look precisely the same, you can make the differences so small that no one will notice any errors. There are a number of good resets online. Here are a few to review for potential inclusion in your project:

It’s possible to roll your own reset. However, you need to make sure you understand the essentials of performing the task. You can find the instructions for developing your own reset.