Flexbox for Responsive Web Design: How to build websites that work on any browser and any device

243 Pages·2016·6.42 MB·English

by  Berman

Flexbox for Responsive Web Design

By Harvey Berman
Copyright © 2016 Harvey Berman
All Rights Reserved
Table of Contents
Preface
Part 1. Flexbox Tutorial
Chapter 1. Introduction to Flexbox
Chapter 2. Flexbox Terminology
Chapter 3. Flex Containers
Chapter 4. Item Flow and Order
Chapter 5. Item Alignment
Chapter 6 Item Flexibility
Part 2. Browser Support Strategies
Chapter7. Vendor Prefixes
Chapter 8. Progressive Enhancement
Part 3. Responsive Web Design
Chapter 9. Media Queries
Chapter 10. Responsive Text
Chapter 11. Responsive Images
Chapter 12. Setting the Viewport
Part 4 Responsive Web Pages
Chapter 13. Responsive Navigation
Chapter 14. Responsive Footer
Chapter 15. Responsive Layout
Chapter 16. Responsive Web Page
Appendix A. Understanding Flex-Direction
Appendix B. Autoprefixer Options
Appendix C. Checkbox Hack
Preface
Responsive web design is all about creating flexible websites that work
well on phones, tablets, computers, and other devices. The key word
here is “flexible”.
The CSS flexible box model, known as flexbox, is a new layout tool that
can help you build flexible websites painlessly. It is powerful, easy to
learn, and easy to use.
About This Book
Flexbox for Responsive Web Design is a practical guide that explains the
principles, benefits, and challenges of responsive web design with
flexbox. It has four parts:
A clear, compact tutorial covering the language of flexbox – core
concepts, terminology, and syntax.
Effective strategies for dealing with older browsers that don’t support
flexbox.
A user-friendly introduction to responsive web design – theory and
practice in “aw shucks” language.
Step-by-step instruction for building responsive web pages with
flexbox.
Topics are explained in clear, easy-to-understand language. Key points
are reinforced with real-world examples. And code is provided so you can
see exactly how everything works.
Who This Book Is For
This book is for web designers who want to build responsive websites
that work on any browser and any device. The only requirement is a
basic understanding of HTML and CSS.
What You Will Learn
As you progress through the book, you will learn to:
Position content where you want with flexbox – no floats, no
workarounds, and no hacks.
Generate responsive text that is readable on any screen – the right
font size, line-height, and line length.
Serve responsive images efficiently – the right image at the right size
– using simple HTML and CSS.
Build flexible navigation panels that work great on desktops, tablets,
and mobile phones.
Design responsive web pages - pages that adjust automatically to
different devices and screen sizes.
By the end of the book, you will have a customizable template for a fully-
responsive web page powered by flexbox – a tangible product that you
can use for your own projects.
Source Code
All of the source code used in this book can be downloaded at
http://flexbox-rwd.com/download.aspx. Code is organized by chapter, so
you can easily find what you are looking for.
Why This Book?
There is nothing hard about building responsive websites with flexbox.
But there are a few moving parts. This book focuses on the most
important parts, so you can quickly acquire the skills you need to design
responsive websites that work reliably on all browsers and all devices.
Part 1. Flexbox Tutorial
Responsive websites are flexible websites. They work well on smart
phones, tablets, desktop computers, or any other device.
For years, designers relied on floats, hacks, and clever javascript to
make sites flexible. Now, there is a better way – the CSS flexible box
model, known as flexbox. In this book, we advocate using flexbox to build
responsive websites.
Before you can use flexbox, though, you need to understand flexbox; so
we begin with a tutorial covering the following topics:
Chapter 1. Introduction to Flexbox
Chapter 2. Flexbox Terminology
Chapter 3. Flex Containers
Chapter 4. Item Flow and Order
Chapter 5. Item Alignment
Chapter 6. Item Flexibility
Chapter 1. Introduction to Flexbox
If you want to build a responsive website, you really need to know about
flexbox.
What is Flexbox?
Flexbox is the common name for the CSS3 flexible box layout module.
This module defines a new layout mode, called flex layout. What, you
may ask, is a layout mode?
A layout mode is a set of rules that determine the size and position of
web elements, based on their relationships with siblings and ancestors.
There are several types of layout modes:
block. Designed for laying out documents.
inline. Designed for laying out text.
table. Designed for laying out tables.
positioned. Designed for positioning elements independent of other
elements.
flex. Designed for laying out web components that can be resized
smoothly.
The following figure illustrates a common scenario where layout mode
comes into play. The figure shows a web page that changes layout
dynamically to accommodate different screen resolutions: