Pro HTML5 and CSS3 Design Patterns

CHAPTER 17 ■ LAYOUTS

Layout example displayed in a narrow viewport and displayed without a stylesheet

Layout Example cont.

These layouts are customizable. If you want to tweak the styles of a design pattern for all

instances of the pattern, you can directly change the pattern’s rules. If you want to tweak

the styles of a design pattern for a specific section, you can copy the rule and prefix the

copied selector with a section selector. For example, to change what a selected tab looks like

in the nav section, you can copy the selector, ul.tabs li.selected .tab-label, and create

a new one prefixed with #nav, as in #nav ul.tabs li.selected .tab-label. Because

selectors containing an ID override those that don’t, this selector overrides the standard

selector. To change just one instance of a design pattern, you can wrap it in a division set to

a unique ID, copy the desired rule, and prefix its selector with the unique ID.

These layouts are fluid. They adapt nicely to devices with different widths and zoom

factors. Figure 17-1 shows the same page rendered in a narrow viewport. Notice how side-

by-side columns automatically reflow into a single column to fit the viewport. This allows

the page to work well on handheld devices. Furthermore, if a browser doesn’t support

stylesheets, each section renders as nicely structured HTML.

These layouts are interactive, allowing a user to collapse and expand sections, drop-down

menus, and select tabs. Notice in Figure 17-1 how the News section is rolled up, which

makes room to show other sections.

These layouts are accessible. Interactive elements such as rollups and drop-down menus

play nicely with screen readers because content is never set to visibility:hidden or

display:none; instead, hidden content is positioned offscreen and moved onscreen when

it’s made visible. Because all content is present in the document, search engines can index

it. For browsers that don’t support JavaScript or have disabled JavaScript, you should

include an alternative version that doesn’t rely on JavaScript.

Related to All design patterns in this chapter and the majority of design patterns in the book