CSS

This framework uses CSS for all layout. That makes it easy to change the look and feel of the application as well as the layout, the spacing, and the nature of the controls themselves. There's a lot more detail about this layout in Fluid Grids, Vertical Rhythm, and CSS Blocking.

Using CSS for all layout gives this framework an amazing flexibility in look and feel. This includes changing the sizes, fonts, images, colors, and even the nature of the controls. For example:

Switch to

Spiffy UI is so flexible that you can easily integrate totally different navigation mechanisms like Christopher Cliff's Sausage menus. This scheme presents Spiffy UI as a single page with a contextual scrolling navigation mechanism on the right side of the page.

Turn the (it rocks, but it doesn't work on IE)

Sample styles

Much of the way this page looks is due to the styles for this sample application. Without any additional styles a Spiffy UI application looks like this:

Page styles

The Spiffy UI framework starts with Reset CSS from YUI. This allows us to set the CSS styles for every browser to a common starting point, and makes it much easier to maintain UI consistency across different browsers.

There are four main sections in the Spiffy UI: the header (#mainHeader), the navigation area (#mainNavigation), the content area (#mainContent), and the footer (#mainFooter). These four areas make up the basic blocking of the application. They may each be styled and positioned separately.

The grid

All of the styles and layout in the Spiffy UI framework support a grid. The grid is a system of columns and rows that helps you lay out your application. The grid makes it easier to maintain consistent pages with professional spacing and alignment.

Want to see the grid? Turn the

The columns in this grid are 155 pixels wide with a 20-pixel spacer. This column pattern starts on the left side of the window and continues for the width of the window.

The default font style is 12/14 Verdana. That means a 12-pixel sized font with a 14-pixel line height using Verdana. That makes the rows in our grid 14 pixels tall. Everything in the framework conforms to this 14-pixel line height. That means each line is a multiple of 14, so everything lines up vertically, or, in other words, has vertical rhythm.

Changing the dimensions of the grid is easy, just define one that works for you. SpiffyUI.org uses TypeKit to embed FF Meta Web Pro, Chaparral Pro, and Anonymous Pro. Our grid is 18/24.

We often use the Firefox plugin Gridfox to help keep our UI tight to the grid.

Form styles

Styles are extended into forms as well. There are styles for labels, fields, headers, and other parts of the form layout. These styles follow the patterns of Prettier Accessible Forms. This pattern supports flexible form layouts without table tags, and promotes consistency across all forms in your application.

CSS files

The Spiffy UI framework styles are built into spiffyui.min.css. This file contains almost all of the CSS for this framework. There are a few places where we need to add special styles to support Internet Explorer. Those styles are in spiffyui.ie.css, which is loaded dynamically if the user is using Internet Explorer.

There are more styles on the sample form page.

Specific styles

In addition to styles for the whole page, there are specific styles that are reusable in any part of the application like:

.weak

h1

h2

Many of the widgets in this framework also use custom CSS; you can see those on the sample widgets page. Explore this sample application and reuse any styles you see here. Firebug is your friend.

The rules we follow in this framework are explained in Fluid Grids, Vertical Rhythm, and CSS Blocking.

Other CSS frameworks

The Spiffy UI framework JavaScript automatically loads our flexible CSS framework, but we're happy if you want to use a different one. The tag-focused approach of Spiffy UI works well with the 960 grid system, Blueprint, and any other CSS framework.

You can also take out all Spiffy UI CSS and start from scratch. There are two properties you can set to prevent the automatic CSS loading. The easiest place to add them is a script tag in your HTML page. For example:

    <head>
    <script type="text/javascript" src="spiffyui.min.js"></script>
    <script type="text/javascript">
        spiffyui.autoloadCSS = false;
        spiffyui.autoloadHTML = false;
    </script>