By: Sheri German
Page 1 of 18
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.
Centered, Two-Column Fixed-Width
The following JumpStarts have two-column, fixed-width layouts, most of them centered in the browser window.
- Playacar (a Paris modification)
- North Pole
- Liverpool (.NET)
- Machu Picchu (Left column must be shorter)
- Machu Picchu for pages with a shorter content column
- Traverse City
- San Francisco
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:
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
- 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.