Overview
I wanted a new look for my website that would be simple, clean, professional, and provide excellent readability. This design is the result of that effort. To enable a clean and readable look, I built this design on the Blueprint CSS framework. This also provides instant cross browser compatibility. Additionally, I wanted to use open source tools, so I built the graphics using Inkscape (earlier versions were built using Gimp). To enable easy navigation, I made several clearly delineated sections of each page: a header area, a navigation area, a content area, and a footer. Since long lines are difficult to read in browsers, I kept the width of the content area relatively small: 630px in total and 600px within paragraphs. Finally, to provide a bit of depth in the design, I added rounded corners and drop shadows around the major sections of the page.
Compatibility
- The CSS/XHTML was designed to be compatible with nice modern browsers (firefox, safari, IE 8, etc). It works fine in IE 7 and IE 6 too. For IE 6 compatibility, an additional style sheet is (conditionally) included that works around a few issues.
- I have tested the markup (xhtml) and the css for validity -- they passed.
- I tried to design a nice CSS system for managing floating images with and without captions: the basic usage works well enough, but some of the more advanced usage may need some work.
Installing
- Grab the design: raised-boxes-web-theme-0.5.zip
- Grab the latest CSS from Blueprint: Blueprint
- Unpack the archives and drop Blueprint's CSS folder (containing ie.css, print.css, and screen.css) into the style directory of the raised boxes web theme. So, for instance, screen.css will be at style/blueprint/screen.css.
- Test it out by pointing your browser at the test pages in the web theme test/ directory (test/index.html). It should look like the test pages hosted on this site.
Usage Tips
- I keep my html files in the root directory and my CSS and supporting image files in the 'style' directory.
- You may want to read up on Blueprint if you want to dig into the CSS.
- The content area is restricted to a div using the Blueprint CSS class of "span-16". This means the content area is 630px wide. However, paragraphs are set inside this an additional 15px on the left and the right, leaving a 600px wide content area.
- Generally, your images should be 600px or less wide; however, an image at the top or bottom of the content area can often be up to 630px and still look OK. Finally, since this is based on blueprint (with a line-height of 18px), the final heights of images (plus margin, padding, and border) should be divisible by 18px.
- Refer to the test pages for example usage.
Resources
License
I license the files that I created for this web theme (style/*.css, style/*.png, project-raised-boxes-web-theme-2009/test/*) under the GPL license. This license does not extend to any of the other content on this site. If you use this web theme, consider linking back to my site -- thanks.
This software is licensed under the CC-GNU GPL version 2.0 or later.