Page 1 of 11 Welcome to the next design in the CMX JumpStarts series, Santorini.
This Greek island is considered by some to be the legendary Atlantis.
Three thousand five hundred years ago the volcano Thera erupted in a rather spectacular fashion. The ocean rushed into the caldera and volcanic ash showered down on the surrounding area to depths of hundreds of feet.
Today the ash has given way to thriving vineyards and pretty whitewashed villages. Imagine looking out over the bay of Caldera from your table in a small cafe while you enjoy a strong cup of Turkish coffee ...
Ah, dreams. Fortunately, CMX is here to help you get your work done more quickly and efficiently. :-)
JumpStart Contest
Coincident with the launch of Santorini, Community MX is sponsoring a JumpStart Contest. Find out how you can win a 12-month subscription to Community MX.
As always you can use the Santorini JumpStart in any way you see fit, for commercial work or otherwise. Santorini is a three column design that really takes advantage of the entire width of the browser. The center, main content, column widens and shrinks as the user resizes his window. But the two outer columns are fixed width so your links and extra info is always visible to the user. The Santorini CMX JumpStart also includes several tutorials and an extension.
Santorini is structured to be as hack-free and straightforward as possible. So, if you've been looking for a relatively painfree way of getting started with CSS layouts this may be just the JumpStart for you. The source PNG included with Santorini is pretty simple too in that it doesn't have any complicated images that you need to slice up and shoehorn into the design. What you get with Santorini is a starter page that uses valid XHTML 1.0 Strict and CSS 3 markup and follows WAI and Section 508 accessibility guidelines making it ready for you to customize to suit your own requirements.
The two screenshots below show the JumpStart in FireFox. As the browser window is narrowed, the width of the two outer columns remains constant while the center column gets squished. The colored nautilus shells in the header are part of the background image, which is right-aligned, so when the browser is narrowed, the colored shells appear to slide below the header image.
Figure 1 Screenshots of the Santorini JumpStart.
Page 1 of 11 1
2
3
4
5
6
7
8
9
10
11
Next
Keywords
CMX JumpStart, JumpStarts, CSS, fluid, liquid, overlapping divs, z-order, stacking order, blend modes, fade image
