Pears
are common patterns of markup & style
Pattern
Navigation
→
Horizontal Links
This is a link
Active Link
Lorem link
Dolor link two
Here is a link
HTML
This is a link
Active Link
Lorem link
Dolor link two
Here is a link
CSS
nav[role="navigation"] li { float: left; font-size: 14px; border-right: 1px solid #ddd; } nav[role="navigation"] li:last-child { border-right: none; } nav[role="navigation"] li a { float: left; padding: 0 10px; text-decoration: none; color: #999; border-radius: 4px; } nav[role="navigation"] li a:hover, nav[role="navigation"] li a:focus { color: #333; } nav[role="navigation"] li a:active { color: #666; } nav[role="navigation"] li.active a { font-weight: bold; color: #333; }
hide
Content
Article
Data Table
Footer
Slats (HTML5)
Slats (text only)
Slats (thumbnails)
Thumbnail Grid
Forms
Multi (left labels)
Multi (top labels)
Search
Simple (top labels)
Lists
Definition
Stats Tabs
Tags (buttons)
Tags (vertical)
Navigation
Breadcrumb
Horizontal Buttons
Horizontal Links
Horizontal Tabs
Pagination
Vertical Links