The Complete JumpStart Catalog Update

By: Sheri German

Page 1 of 18

Set for printing


It's been a year since we published the original Complete JumpStart Catalog, and a lot has changed since then. For one thing, we've released a lot of new JumpStarts; there is a total of nineteen so far, as well as some JumpStart modifications. For another, Internet Explorer 7 finally came out of beta and has been downloaded by thousands of users. Its better standards compliance and more robust support of advanced CSS properties make the use of many features more practical. Finally, a year is a very long time on the web, and many of our latest JumpStarts focus on new trends and features that you'll want to consider as you make your decision about which JumpStart to use for your next project.

Tip: In addition to this catalog, you can view a JumpStart comparison chart that lists the JumpStarts by user level of experience.

Choosing the Basic Layout

The first thing many designers look at is the number of columns and whether a design is fixed or fluid. There are also variations on these themes in the quite popular elastic layout and in Jello Mold technique. And then we have two layouts that have some of the benefits of frames without incurring their liabilities.

Tip: Not a CMX subscriber? You can still get your feet wet with our two free JumpStarts, North Pole and Santorini.

Centered, Two-Column Fixed-Width

The following JumpStarts have two-column, fixed-width layouts, most of them centered in the browser window.

Centered, Three-Column Fixed-Width

The following JumpStarts have centered three-column, fixed-width layouts:

Fluid Two- and Three-Column Layouts

The following JumpStarts are fluid:

  • Aspen, with both two- and three-column pages
  • Minneapolis, with a three column, fluid layout

Hybrid Fixed/Fluid Layouts

  • Santorini has a fluid middle column and two fixed outer columns
  • Metropolis has a fluid left column and a fixed right column

Elastic Layout

  • Orlando uses an elastic layout that sets the width of both the text and its container box in em units so that they increase or decease in size proportionately

Somewhere Between Fixed and Fluid

The following JumpStart uses Jello Mold, which gives you a layout that is somewhere between fluid and fixed. It also has an implied minimum width to prevent the layout from collapsing below a certain width. It uses clever math that, after determining the width of the user's window, adjusts the percentage of margins around the centered layout.

  • Vienna, with both two- and three-column pages

The Look of Frames

Several of our layouts use CSS to create pages that look and behave like frames, but avoid their pitfalls:

  • Aspen uses a fixed position on its footer, which allows all content to scroll above it. There is also a hack to simulate the effect in Internet Explorer, which does not support position: fixed.
  • New Orleans has a content area that uses the overflow property set to auto to let content scroll within a fixed-height box.
  • Metropolis has a fixed header that stays on screen while the user scrolls through the content

Whew! Now that you decided on a "shell", you will probably want to fill it with features. Our JumpStarts include an amazing variety of extras, and you don't have to restrict them to their native JumpStarts. Why not add a slide show to Vienna or a search engine to Venice? Let's take a tour of what is available to you.

Page 1 of 18 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Next

Download Support Files

Downloads are disabled during your trial period.

JumpStarts, Paris, Seattle, North Pole, Liverpool, Aspen, Venice, New Orleans, Vegas, Vienna, Machu Picchu, Traverse City, Cairo, Inverness, Minneapolis, San Fransciso, Playacar, Orlando, Greenville, Santorini, Metropolis, CSS layouts