Group items tagged

How should a CSS framework be built? There are several possible ways to go about building a framework, but the most common and arguably the most useful is to abstract your common CSS into individual stylesheets that each cover a particular part of the whole. For example, you may have a stylesheet that sets up the typography and another that handles the mass reset. The beauty of the approach is the ability to selectively include only the styles that you need. You may end up with six or seven different stylesheets in your framework, but if a particular project doesn’t need one or two of them, they don’t have to be included. The framework we created in our office has five stylesheets: reset.css—handles the mass reset. type.css—handles the typography. grid.css—handles the layout grid. widgets.css—handles widgets like tabs, drop-down menus, and “read more” buttons. base.css—includes all the other stylesheets, so that we only need to call base.css from our (X)HTML documents to use the entire framework.

A word of caution This method works quite well, but there is a valid concern to be raised: it adds to the number of HTTP connections needed to render each page. On large, high-traffic sites, adding five more HTTP connections to every page view may result in angry system administrators. Two possible solutions to this are: Include everything in a single file, rather than breaking it into modules. The problem here is that you lose the ability to include only certain parts of the framework, and you also make maintenance more difficult. Have a server-side process that dynamically flattens the individual files into a single response. I’ve not seen this done, but it could be very efficient if done well. Using my example framework above, this dynamic process could occur when base.css is requested, but not when type.css, grids.css, etc. are. This way, the individual components are still available, but the entire framework is available in a flattened version, as well.

Architecture (the kind that uses steel and glass and stone) is also an apt comparison—or at least, more apt than poster design. The architect creates planes and grids that facilitate the dynamic behavior of people. Having designed, the architect relinquishes control. Over time, the people who use the building bring out and add to the meaning of the architect’s design.

Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.

Great web designs are like great buildings. All office buildings, however distinctive, have lobbies and bathrooms and staircases. Websites, too, share commonalities.

There are many tutorials out there on how to create your own image gallery. There are simple ones made from pure CSS, and there are complex ones using css and javascript. By the end of this article you will have the information necessary to start building your own photo gallery. The first tutorial is from cssplay and is one of my favorites around. They have a very elegant and simple image gallery. Your images are separated into different sections (people, plants, animals, etc) and all your images for each section listed nicely underneath. As you hover over each image it expands double it's size so you can take a better look at each image before you view the full version. The interface is very clean and simple to use, I recommend taking a look at this one.

There’s a lot of really cool things that can be done using CSS and I’ve found some of the following resources to be very helpful to inspire ideas and learn new techniques. There’s a lot of good CSS tutorials out there so it’s pretty hard to narrow it down to only the 10 best. So instead of taking this list as the top 10 consider it as a collection of 10 great tutorials. I recommend having a good working knowledge of CSS/HTML before trying any of these on your own site.