Vanilla: A foundation for greatness

In the culinary arts, vanilla is a foundational ingredient. Sure, it can stand on its own, as a principal flavoring—witness the popularity of vanilla ice cream—but when used as a foundation, a base, it can provide a launching pad to gastronomical greatness. As a Web designer, we present you with your own bottomless jar of vanilla. Used wisely, it will provide you with a foundation for just about any design specification a client or a project can throw at you. It can be your own special, secret ingredient.

Magically subtle features...

As simple as this design is, there are subtle features that shine. Really shine. For instance, the masthead is divided into two columns, allowing a logo and second element (in this case, a search box) to appear side by side. But if you don't need the second column, you can easily turn it off. How? Let's take a look at the masthead DIV:

<div id="masthead">

Pretty simple, hmm? It is. But if you want the masthead to be one column, all you need to do is add a class to the masthead DIV:

<div id="masthead" class="one-column">

Incredibly easy. You can learn all about the CSS features in Vanilla by reading the user guide.

Width made easy

This particular example page is set to a max width of 1280 pixels. This is managed by a class placed on the layout container:

<div id="layout-container" class="max-1280 sidebar-right">

If you want your page to fill the entire browser window, then you would simply set the max class to none:

<div id="layout-container" class="max-none sidebar-right">

The Vanilla CSS file contains several options for max width. You can choose 980, 1024, 1280 (this page), 1440, 1600, or none.

Two logos are sometimes better than one

Vanilla pages come with two logos. As you scroll the page, the menu becomes fixed at the top of the window, and the main logo is no longer visible. Not good for branding. So, we made it so that a smaller logo (in this case an image of the text "Vanilla") appears along the left edge of the menu. Nifty.

Take me to the top...

When you create a Vanilla page, the default menu contains a link labeled Page Top. Click on it, and no matter how far down the page you've scrolled, the page will smoothly scroll back to the top.

Good Web Design...

Good Web design is about the judicious use of color and imagery. It's about painting a story and drawing the viewer's eye. PVII Vanilla gives you a structurally robust canvas on which to paint your story. You can keep it simple and clean, with a few splashes of color, or you can dress it to the nines. The choice is always yours. We made a choice when we made this example page. To show you how easy it is to introduce imagery, we added a simple background image, of a vanilla orchid, to the page body. Then we made the content area semi-transparent, so this text remains readable. We did this by adding two simple rules to our style sheet:

body {
background-image: url(../images/vanilla.jpg);
background-repeat: no-repeat;
background-position: 0px 100px;
background-attachment: fixed;
.columns-container {
background-color: #FFF;
background: rgba(250,250,250,.78);

Simply done, exquisitely rendered.

Easily display responsive videos

Vanilla CSS contains special rules to allow you to make YouTube or Vimeo videos responsive.