C H A P T E R 17
Layouts
This chapter shows how to create fluid layouts, which automatically adapt to different devices, fonts,
widths, and zoom factors. These design patterns are accessible, modular, and easily customized. The
dynamic patterns use open source JavaScript libraries to attach event handlers to elements. This allows
you to create dynamic effects without putting a single line of JavaScript in your document! The libraries
use CSS selectors to determine which elements to process in response to events, and they can modify the
class attribute of elements so your stylesheet has complete control over how events dynamically style an
element.
Chapter Outline
- Fluid Layout Overview explores problems and solutions in creating fluid layouts.
- Outside-in Box shows how to size the outer width of a box instead of the inner
width. - Floating Section shows how to render sections in columns using a fluid layout.
- Float Divider shows how to separate and integrate floats and content predictably.
- Fluid Layout shows how to create layouts that automatically adapt to any display.
- Opposing Floats shows how to move content to opposite sides of its container.
- Event Styling shows how to assign events to elements without putting code in
your document. It shows how events can modify classes to change how elements
are styled. - Rollup shows how to collapse and open sections with a mouse click.
- Tab Menu shows how to create a tabbed interface that loads new pages when
clicked. - Tabs shows how to create a tabbed interface that dynamically switches content in
and out of the display when the user clicks a tab—without loading a new page. - Flyout Menu shows how to create a menu that opens when clicked or hovered
over. - Button shows how to create buttons and process their events using JavaScript.
- Layout Links shows how to use links as part of the layout, such as breadcrumbs.
- Multi-column shows how to distribute content over multiple columns.