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
B
- Barebones
- Bluecadet
- URL / Pattern summary
- BrightByte
- URL / Pattern summary
- browser support
- defining / Browser support
- URL / Question #2 – does it meet my browser requirements?
- bxSlider
C
- carousels
- defining / Understanding sliders and carousels
- checklist, branding elements
- defining / Company branding
- code, for America
- code for America style guide
- 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
- 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
G
- 960 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
- HTML websites
- responsive nature / The Web is naturally responsive
I
- Iconic
- 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
- list icon
- about / The "hamburger" icon
M
- MailChimp
- about / MailChimp
- features / MailChimp
- URL / People to follow
- media feature / Media queries
- Media Queries
- 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)
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
P
- P'unk Ave
- URL / Pattern summary
- panic
- pattern
- Pattern collection, Chris Coyier
- 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
- 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
Q
- quality assurance (QA)
- Quality assurance (QA) / Quality assurance
R
- responsive form pattern
- 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
- 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
- style guide / Use of a pattern library
- Style Guide Boilerplate
- Style guides
- 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