Modern CSS Layouts: The Essential Characteristics

We won’t talk about design trends and styles that characterize modern CSS-based layouts. These styles are always changing. Instead, we’ll focus on the broad underlying concepts that you need to know to create the most successful CSS layouts using the latest techniques. For instance, separating content and presentation is still a fundamental concept of CSS Web pages. But other characteristics of modern CSS Web pages are new or more important than ever. A modern CSS-based website is: progressively enhanced, adaptive to diverse users, modular, efficient and typographically rich…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Create Sidebars of Equal Height with Faux Columns

CSS can sometimes be a tricky business. There are times when even the simplest of layouts take some serious brainstorming! One of those frustrating times is when you want to create a series of columns of equal height, but the content in one column might be longer than the next. Here’s where the Faux Column technique steps in, let’s take a look at how this solution can make even the most complicated layout a breeze to code up…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

5 Rules To Write More Readable CSS Files

Complex CSS files can often be difficult to manage especially if you don’t use a structured way to write and organize their code. In a previous post I already illustrated a methodic approach to CSS coding. This post illustrates five simple practical rules that can help you write well structured and more readable CSS files to make your developer life easier…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Visual Cheat Sheet: CSS Compatibility with Internet Explorer 6, 7 and 8

This Visual Cheat Sheet will help you to understand CSS (2.1 and 3) behavior in Internet Explorer’s earlier (IE6 and IE7) and recent (IE8) versions. This cheat sheet (2 pages) contains some important CSS reference like… At rules (@rule), Element Selectors, Attribute Selectors, Pseudo-classes, Border and Layout, Position, Font and Text etc.

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Screencast: Editable CSS3 Image Gallery

We build a pretty typical image gallery design pattern, a grid of images that pop up larger when clicked. But this image gallery page makes use of hot semantic HTML5 markup, loads of visual treats with CSS3 and jQuery, and made editable through the CMS PageLime. Quick reminder, the demo is awesome-est in a WebKit browser Safari or Chrome…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Fluid Images in CSS Fluid Layouts

One of the really solid criticisms lobbied against my Fluid Grids article for ALA was that all of my examples were pretty text-heavy. As a result, they all more or less ignored the issue I raised at the end of the essay: that working with non-fixed layouts can be more difficult once you introduce fixed-width elements into them. By default, an image element that’s sized at, say, 500px doesn’t exactly play nicely with an container that can be as large as 800px, but as small as 100px. What’s a designer to do?

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

CSS Differences in Internet Explorer 6, 7 and 8

This article will attempt to provide an exhaustive, easy-to-use reference for developers desiring to know the differences in CSS support for IE6, IE7 and IE8. This reference contains brief descriptions and compatibility for:

  • Any item that is supported by one of the three browser versions, but not the other two
  • Any item that is supported by two of the three browser versions, but not the other one
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)