Making a CSS Framework that Works for You #heweb11

View Session Details and Presenter’s Bio.

Photo by #avril# (pause), Flickr.

This happens: You pick up that project from four years ago and know that all the CSS needs to be re-done. Honestly, though, you’d probably rather scream into a pillow than rewrite everything from scratch. Dan Sagisser, who lead’s Minnesota’s web standard’s group, has a plethora of information about splitting your CSS into a reusable, consistent framework so that you don’t get caught re-writing the same code over and over.

The Way

Dan explains that keeping designs, layout, and navigation menus on a website looking similar, politically speaking, is hard to do. But keeping these features, a clam-shell navigation menu, for example, consistent from site to site is good for users. Using a CSS framework can keep a lot of department level political problems at bay while you can create a series of sites that look very similar but contain custom features. A CSS framework, for these purposes, can be easier for designers, codes, quick deployment, future upgrades, accessibility, user, and managing more sites. Who doesn’t need this?

The How

Step one: Use a CSS reset. Here’s a good one.

Step two: Figure out what will be on every page. Page features may include structural elements like a logo, banner image, page width, search, footer, navigation, and content.

Step three: Create a layout hook in your CSS for these structural elements (header, footer, nav, etc.). Give these hooks a layout and design (color and images in CSS). Sites Dan works on use a 960px box-model layout.

Step four: You can over-write the CSS you write in your core file with another CSS file linked in your HTML. This affords you a way to customize your site’s design without compromising the core layout and design.

Summary

So, what’s a CSS framework all about? It is really about keeping your CSS layouts consistent from site to site while, at the same time, allowing for customization in designs.

Remember, you won’t keep everyone happy, especially faculty with a “design background.”

Check out umn.edu to see how similar the site designs look.

For code examples and more information, visit http://z.umn.edu/cehdcss.