Index

A

• anchor and footer pattern
  • about / Anchor and footer
  • HTML / Anchor and footer
  • CSS / Anchor and footer
  • pros / Pattern summary
  • cons / Pattern summary
  • examples / Live examples
• Andrew Elsass
  • URL / Live examples
• Atomic Design
  • URL / Reading
• AWWWards'
  • URL / Website awards
• AWWWards Site, of Day
  • URL / Websites to provide inspiration

B

• Barebones
  • URL / Pattern library templates
• Bluecadet
  • URL / Pattern summary
• BrightByte
  • URL / Pattern summary
• browser support
  • defining / Browser support
  • URL / Question #2 – does it meet my browser requirements?
• bxSlider
  • URL / Understanding sliders and carousels

C

• carousels
  • defining / Understanding sliders and carousels
• checklist, branding elements
  • defining / Company branding
• code, for America
  • URL / Live responsive pattern libraries
• code for America style guide
  • URL / Icons and responsive icons
• CodePen
  • about / CodePen
• column drop layouts
  • about / Column drop
  • HTML / Column drop
  • CSS / Column drop
  • pros / Pattern summary
  • cons / Pattern summary
  • examples / Pattern summary
• complex systems
  • creating / Creating complex systems
  • grid system, starting with / Starting with a grid system
  • responsive grid systems / Responsive grid systems
• custom responsive pattern library
  • developing / Your very own pattern library
  • setting up / Setting up your responsive pattern library
• custom solution, Smashing Magazine
  • URL / Browser support

D

• Daniel Hellmann
  • URL / Live examples

E

• Exis
  • URL / The "hamburger" icon

F

• fading tables
  • about / Fading tables
  • HTML / Fading tables
  • CSS / Fading tables
  • pros / Pattern summary
  • cons / Pattern summary
• fluid layout
  • URL / Introducing responsive images
• full span video pattern
  • defining / The full span video pattern
  • URL / The full span video pattern
  • pros / Pattern summary
  • cons / Pattern summary
  • examples / Pattern summary
• FutureLearn
  • URL / Live responsive pattern libraries

G

• 960 Grid System
  • URL / Starting with a grid system
• gh-pages
  • about / Publishing your library
  • URL / Publishing your library
• Google style guide
  • URL / Colors
• Gridpak
  • URL / Responsive grid systems
• gutter / Starting with a grid system

H

• hamburger icon
  • about / The "hamburger" icon
• handoff
  • about / Getting ready to handoff
  • company branding / Company branding
  • Quality assurance (QA) / Quality assurance
  • mutated libraries, avoiding / Avoiding mutated libraries
• htaccess password generator
  • URL / Password protecting
• HTML 5 Shiv JavaScript plugin
  • about / Question #2 – does it meet my browser requirements?
  • URL / Question #2 – does it meet my browser requirements?
  • references / Question #2 – does it meet my browser requirements?
• HTML websites
  • responsive nature / The Web is naturally responsive

I

• Iconic
  • URL / Icons and responsive icons
• image grid
  • defining / An image grid
  • URL / An image grid
  • pros / Pattern summary
  • cons / Pattern summary
• ImageOptim
  • URL / Browser support
  • about / Browser support
• information architecture (IA)
  • about / Responsive navigations

L

• layout patterns
  • about / Most popular layout patterns
  • reference / Most popular layout patterns
  • tiny tweaks / Tiny tweaks
  • mostly fluid layouts / Mostly fluid
  • column drop / Column drop
  • layout shifter pattern / Layout shifter
  • off canvas pattern / Off canvas
• layout shifter pattern
  • about / Layout shifter
  • HTML / Layout shifter
  • CSS / Layout shifter
  • pros / Pattern summary
  • cons / Pattern summary
  • examples / Live examples
• library
  • publishing / Publishing your library
  • self host / Publishing your library
  • GitHub Pages / Publishing your library
  • CodePen.io / Publishing your library
  • password, protecting / Password protecting
• lightbox
  • defining / Pattern summary
  • URL / Pattern summary
  • examples / Pattern summary
• List Apart
  • URL / Live responsive pattern libraries
• list icon
  • about / The "hamburger" icon

M

• MailChimp
  • about / MailChimp
  • features / MailChimp
  • URL / People to follow
• media feature / Media queries
• Media Queries
  • URL / Websites to provide inspiration
• Mikiya Kobayashi
  • URL / Live examples
• Monkiers game
  • URL / Pattern summary
• mostly fluid layouts
  • about / Mostly fluid
  • HTML / Mostly fluid
  • CSS / Mostly fluid
  • pros / Pattern summary
  • cons / Pattern summary
  • examples / Live examples
• mutated libraries
  • meaningful descriptions, writing / Writing meaningful descriptions
  • copy, keeping / Keep a copy
  • CSS bloat / CSS bloat

N

• navigation / Learning how to spot patterns
• Nielsen Norman Group (NNG)
  • about / Question #3 – will my user understand it?
  • URL / Question #3 – will my user understand it?

O

• off canvas menu / Learning how to spot patterns
• off canvas navigation pattern
  • about / Off canvas (navigation version)
  • HTML / Off canvas (navigation version)
  • CSS / Off canvas (navigation version)
  • JS / Off canvas (navigation version)
  • pros / Pattern summary
  • cons / Pattern summary
  • examples / Pattern summary
• off canvas pattern
  • about / Off canvas
  • HTML / Off canvas
  • CSS / Off canvas
  • pros / Pattern summary
  • cons / Pattern summary
  • examples / Live examples
• Onion website
  • about / Keep your eyes open
  • URL / Keep your eyes open
• overlay pattern
  • about / The overlay
  • HTML / The overlay
  • CSS / The overlay
  • JS / The overlay
  • pros / Pattern summary
  • cons / Pattern summary
  • examples / Live examples
• Owl Carousel
  • URL / Understanding sliders and carousels

P

• P'unk Ave
  • URL / Pattern summary
• panic
  • about / Question #1 – does this pattern make sense for my content?
  • URL / Question #1 – does this pattern make sense for my content?
• pattern
  • selecting / Selecting a pattern, Question #1 – does this pattern make sense for my content?, Question #2 – does it meet my browser requirements?
• Pattern collection, Chris Coyier
  • URL / Websites to provide inspiration
• Pattern Lab
  • features / The Pattern Lab
  • URL / Pattern library templates
• pattern library / Use of a pattern library
  • defining / Your pattern library is not done yet!
  • colors / Colors
  • typography / Typography
  • icons / Icons and responsive icons
  • responsive icons / Icons and responsive icons
  • vertical media queries / Vertical media queries
  • creating / When to create your pattern library
  • after development / After development
  • during development / During development
  • before development / Before development
• Pattern Library
  • URL / Reading
• patterns
  • websites, breaking down to / Breaking websites down to their patterns
  • spotting / Learning how to spot patterns
  • home, building for / Building a home for your patterns
  • observing / Continuing to look for patterns
• Pew Research Center
  • URL / Question #3 – will my user understand it?
  • about / Question #3 – will my user understand it?
• picture element
  • about / The picture element
  • URL / The picture element
• Picturefill 3.0
  • URL / Browser support
• Pocket Guide to Front-end Style Guides
  • URL / Reading
• Pop Chart Lab
  • URL / Live examples
• Prism.js
  • URL / Your very own pattern library

Q

• quality assurance (QA)
  • about / Question #2 – does it meet my browser requirements?
• Quality assurance (QA) / Quality assurance

R

• responsive form pattern
  • about / The responsive form pattern
  • HTML / The responsive form pattern
  • CSS / #1 Give all inputs breathing room
• responsive forms
  • guidelines, for creating / Guidelines for creating responsive forms
• responsive HTML5 video
  • URL / Responsive HTML5 videos
• responsive iframes
  • URL / Responsive iframes
• responsive images
  • defining / Introducing responsive images
  • images, scaling / Basic image scaling
  • optimizing / Optimizing responsive images
  • picture element, versus srcset attribute / The picture element versus the srcset attribute
  • picture element, using / When to use picture or srcset
  • srcset attribute, using / When to use picture or srcset
  • patterns / Responsive image patterns
• responsive navigation patterns
  • about / Responsive navigation patterns
  • simple stack pattern / Simple stack
  • anchor and footer pattern / Anchor and footer
  • toggle pattern / The toggle
  • off canvas navigation pattern / Off canvas (navigation version)
  • overlay pattern / The overlay
• responsive navigations
  • about / Responsive navigations
  • hamburger icon / The "hamburger" icon
• responsive pattern / Learning how to spot patterns
• responsive pattern libraries
  • uses / Use of a pattern library
  • examples / Pattern library examples, Other examples
  • Pattern Lab / The Pattern Lab
  • MailChimp / MailChimp
  • Responsive patterns / Responsive Patterns
• responsive pattern library (RPL) / Your very own pattern library
• responsive patterns
  • combining / Combining responsive patterns
  • full span video pattern / The full span video pattern
• responsive site
  • about / Why and how to create a responsive site
  • creating / Why and how to create a responsive site
  • media queries / Media queries
  • responsive meta tag / Responsive meta tag
• responsive table patterns
  • form elements, giving lines to / #1 Give all inputs breathing room
  • proper values, using for input's type attribute / #2 Use proper values for input's type attribute
  • hit states, increasing for inputs / #3 Increase the hit states for all your inputs
  • about / Responsive table patterns
  • fading tables / Fading tables
  • stacked tables / Stacked tables
• Responsive Web Design
  • URL / Reading
• responsive web design (RWD)
  • need for / The need for responsive web design
  • reference / Why and how to create a responsive site
• responsive web design patterns
  • URL / Live responsive pattern libraries
• responsive websites
  • defining / Further exploration
• Retina.js
  • URL / Browser support

S

• simple stack pattern
  • about / Simple stack
  • HTML / Simple stack
  • CSS / Simple stack
  • pros / Pattern summary
  • cons / Pattern summary
  • examples / Live examples
• sliders
  • defining / Understanding sliders and carousels
• srcset attribute
  • about / The srcset attribute
  • URL / The srcset attribute
• stacked tables
  • about / Stacked tables
  • HTML / Stacked tables
  • CSS / Stacked tables
  • pros / Pattern summary
  • cons / Pattern summary
• Starbucks
  • URL / Live responsive pattern libraries
• style guide / Use of a pattern library
• Style Guide Boilerplate
  • URL / Pattern library templates
• Style guides
  • URL / Websites to provide inspiration
• Subtle Patterns
  • defining / The big hero image
  • URL / The big hero image
  • pros / Pattern summary
  • cons / Pattern summary
  • examples / Pattern summary

T

• The Beast is Back
  • URL / Live examples
• tiny tweaks layouts
  • about / Tiny tweaks
  • HTML / Tiny tweaks
  • CSS / Tiny tweaks
  • pros / Pattern summary
  • cons / Pattern summary
  • examples / Pattern summary
• toggle pattern
  • about / The toggle
  • HTML / The toggle
  • CSS / The toggle
  • JS / The toggle
  • pros / Pattern summary
  • cons / Pattern summary
  • examples / Live examples

V

• video
  • implementing / Implementing videos
  • responsive HTML5 video / Responsive HTML5 videos
  • responsive iframes / Responsive iframes

W

• W3C
  • reference / Media queries
• Webby's website
  • URL / Website awards
• website awards
  • about / Website awards
• websites
  • breaking down, to patterns / Breaking websites down to their patterns

X

• xkcd
  • URL / Writing meaningful descriptions