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:
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.
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:
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.
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.
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.
We often use the Firefox plugin Gridfox to help keep our UI tight to the grid.
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.
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.
In addition to styles for the whole page, there are specific styles that are reusable in any part of the application like:
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.
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: