CSS Grids and Flexbox for Responsive Web Design
Topics:
This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Table of Contents
Introduction and Setup
Introduction
After introducing herself, Jen provides an overview of the course.
Resources
The GitHub repository for this course is explored and described by Jen.
Defining Responsive Design
Jen defines responsive design's three main characteristics: grid-based layout, images that resize, and media queries.
Floats
Overview of Floats
Jen gives a brief overview of floats, including its history, its characteristics, pros and cons, and some examples are reviewed.
Float Exercise Setup
The exercise files are outlined and described by Jen as she sets up this coding challenge. She also covers a border declaration box to help with resizing elements.
Float Exercise Solution
Jen gives us a walkthrough of the solution, and how it works at different screen sizes.
Flexbox
Introducing Flexbox
Jen introduces Flexbox, where it came from, what its requirements are, flex row vs. flex column and what its pros and cons are.
History and Browser Support
Three previous versions of Flexbox are explored, and Jen shows examples of prefixing for browser support, before getting into a discussion of current Flexbox support.
Code Demo: Flexbox Setup
Jen sets up a demo where that explores how Flexbox can change the page layouts by going through the different CSS properties. As part of the setup ’li’ HTML content is placed inside of a ‘ul’.
Code Demo: Flexbox Properties Explored
The Flexbox properties Jen demonstrates here affect the ‘ul’, and include ‘flex', 'flex-direction', 'flex-wrap’, and ‘flex-flow’ for shorthand.
Code Demo: Flexbox Justification
Jen explores Flexbox properties that justify content within the container ‘ul’ using ‘justify-content’.
Code Demo: Flexbox Alignment
Using the Flexbox properties under ‘align-items’, Jen shows the different alignment options available within the container ‘ul’ in our example.
Code Demo: Individual flex-items
Switching to Flexbox properties that affect the individual flex-items, or the ‘li’ HTML elements in our example, Jen reviews ’flex-grow’, flex-shrink’, ‘flex-basis’.
Code Demo: Questions & Answers
Jen answers question from the audience regarding the Flexbox code demo so far.
Flexbox Games and Exercise
Jen introduces two great resources for playing with and practicing Flexbox properties.
Flexbox Grid
Practical Use of Flexbox in a Grid System
To review practical applications of Flexbox in a grid system, Jen reviews ‘flexboxgrid.com’, a framework that allows you to explore various layouts to review the bare HTML and CSS to see whats possible with the properties.
Flexbox Review
As a review, and starting to apply Flexbox properties to the floating code exercise covered earlier, Jen covers some code we can use on the flex containers and flex items in the upcoming code demo.
Code Demo: Exercise Solution for Desktop
Reworking the code examples of the pie website layout done earlier with floats, Jen shows how to set up containers and items in HTML and take control of them in CSS for a desktop friendly grid system layout.
Code Demo: Exercise Solution for Responsive
Jen works through how to layout the code example for Tablet and Mobile formats.
Flexbox Exercises
Flexbox Exercise 1 Setup: Content Manipulation
In this coding exercise, Jen adds another row into the HTML code example and creates new requirements for this content to be solved with Flexbox CSS properties.
Flexbox Exercise 1 Solution
Jen and the audience review a solution for this coding challenge.
Re-ordering Content and Layout
Using 'flex-direction: row-reverse', and some CSS properties Jen rearranges the example content and layout in ways that were extremely difficult with floats.
Flexbox Questions and Answers
Jen leads a discussion around different approaches to the previous exercise and content, and current best practices.
Flexbox Exercise 2 Setup: Full Webpage Layout
Jen’s challenge in this exercise is to take a full webpage laid out with floats and restyle it with the grid system using Flexbox.
Flexbox Exercise 2 Solution
Jen walks through how to solve this exercise and answers questions from the audience.
Flexbox Exercise 3 Setup: Image Gallery
This exercise challenge is to find two solutions to Jen's proposed image gallery problem. Number one is allowing images on the page in any number per row with any alignment you choose, and number two is allowing images to display in a fixed number per row for a given screen dimension.
Flexbox Exercise 3 Solution
Using Flexbox, Jen creates two types of images galleries to solve this exercise.
Responsive Images
Introducing Responsive Images
Introducing responsive images, Jen describes the different challenges around the desktop, mobile, and tablet in today's modern web. She then covers how to use the new <picture> tag released in HTML 5.1 to solve these problems, along with how to address backward compatibility.
Code Demo: Responsive Images Application
Using the HTML elements <picture> and <source>, along with media queries, Jen demonstrates how to loading different images based on dimensions.
Picturefill for Older Browser Compatibility
Since older browsers do not work with the <picture> tag, Jen demonstrates a tool called "Picturefill" which can be used as a shiv.
Image Downloads and Performance
Jen explores what images your browser downloads based on the code you write.
Code Demo: Background Images
Using media queries in CSS, Jen applies a background image to the example website, along with answering some follow up questions from the audience.
Responsive Images Exercise
Jen sets up an exercise to test your knowledge of responsive images, the <picture> tag, Picturefill and more.
Responsive Images Exercise Solution
Jen demonstrates her code solutions to the challenges of this exercise.
CSS Grid
Introducing CSS Grid
Jen covers both where CSS Grid comes from, and why you should use it.
CSS Grid: Browser Compatibility
While browser support is quite good today, Jen touches whats currently supported at the time of recording, plus polyfills and fallbacks for older browsers.
Exploring CSS Grid Examples
With both PowerPoint and code demonstrations, Jen walks through how grids work with various examples and layouts. She also briefly covers reordering and syntax.
Code Demo: CSS Grid
This code demo shows how to create a Mondrian painting in CSS and HTML using CSS Grid. Jen starts this demo as the first part of an exercise, and she uses "display: grid", "grid-row" and "grid-column" to start placement of the HTML elements
Mondrian Painting Exercise Setup
The class asks a clarifying question on how grids are laid out in rows, and Jen sets up a short exercise where the second half of the HTML elements are laid out from the demo earlier.
Mondrian Painting Exercise Solution
Using ‘grid-row’ and g’rid-column’ for general placement and sizing, Jen lays out the solution for this exercise.
Additional CSS Grid Properties
Three new properties are introduced by Jen to gain control over the sizes of the grid columns and rows: grid-template rows, grid-template-columns, and grid-gap. Also, Jen shows an extension for Google Chrome and Firefox for developers to measure elements in a web page. Finally, Jen also answers some clarifying questions around implicit vs. explicit grids.
Mondrian Painting 2 Exercise Setup
A different, more complex Madrian painting is the basis of the exercise challenge here, and Jen walks through the starting point HTML and CSS to get you started.
Mondrian Painting 2 Exercise Solution
Jen reviews her approach to this solution and talks through the potential CSS pitfalls of this exercise. She also goes into some additional layout exercises that modify the layout for optimal viewing at different resolutions with media queries.
CSS Grid: Practical Application
Using the example pie site coded earlier with floats, and then Flexbox, Jen now wants to style this page using CSS Grids. She introduces the HTML and CSS files starting points and makes some changes to the first section of content as an example.
Practical Application Exercise Setup
To finish work on this example web page, Jen's exercise challenge is to complete the laying out the content using CSS Grid rules and classes.
Practical Application Exercise Solution
Jen discusses her approach to the solution and discusses the possibility of using the ‘grid-row’ vs. the ‘order’ properties.
Properties Review
Covering additional properties with a reference document, Jen reviews 'grid-template', 'grid-column', 'grid-row', along with different ways to denote widths such as px, fr, % and how span and repeat work.
Grid-area Introduction
Jen introduces a method of using to use real names to define areas of a grid item's location by using ‘grid-area’ and ‘grid-template-areas’. Jen codes examples of how to use grid area to layout mobile, tablet and desktop resolutions.
Grid-area Exercise Setup
After explaining how to create page layouts with 'grid-template-area', Jen's challenge is to create the desktop layout with this new tool.
Grid-area Exercise Solution
To solve this quick exercise, Jen uses classes around the CSS media query and 'grid-template-areas' properties. She also leads a discussion around how layouts work with different ‘grid-template-columns’ options and ‘fr’ and "..." declarations.
Nesting CSS Grids
By coding an example of a nested CSS grid within a CSS grid at different resolutions, Jen discusses the pros and cons of this approach versus Flexbox withing a CSS Grid.
Nesting and Offsets Exercise Setup
Jen sets up an exercise that combines the nesting and offset concepts and answers a question about how the syntax around repeat and ‘fr’ works in the ‘grid-template-columns’ declaration.
Nesting and Offsets Exercise Solution
Jen’s shows the solution to this exercise which uses ‘grid-template-columns’, ‘grid-template-areas’, and the ‘fr’ and ‘…’ syntax. Then she answers a question on using an approach that switches from ‘grid’ display to ‘block’ display for mobile vs. desktop resolutions.
Flexbox and CSS Grid Exercise 1 Setup
Returning to the example pie webpage, Jen introduces this exercise which focuses on translating the Flexbox approach used earlier into a CSS Grid layout. She also recommends some great tooling in Firefox and the Firefox Developer build to understand better how Flexbox layouts are rendered and interpreted by the browser.
Flexbox and CSS Grid Exercise 1 Solution
While a full example of the completed solution can be reviewed in the "/end" folder for this exercise, Jen does a high-level recap which includes adding the wrapping elements to the HTML. Then she uses CSS Grid syntax to rebuild the layout.
Grid Fallbacks
As a starting point for cross-browser compatibility, Jen highlights Rachel Andrew’s blog post which emphasizes on graceful fallbacks for older browsers without the need to completely fork your code.
Flexbox and CSS Grid Exercise 2 Setup
In this exercise, Jen’s challenge is to use Flexbox in an ideal scenario - as an image gallery. Using the same image gallery built earlier in Flexbox, this exercise focuses on integrating that into a grid layout within the example pie website.
Flexbox and CSS Grid Exercise 2 Solution
This resulting solution is notable because, as Jen argues, this is the layout of the future with grid laying out the structure of the webpage, and flex laying out the ui elements within. The solution consists of adding some HTML to gain control over elements, and then defining their layout by adding Flexbox and grid-based styles.
Wrapping up
Optional Practice Exercise: Putting it all Together
Jen sets up a challenge that can be completed later as a practice that uses all the tricks covered in this course. The challenge is to finish the build of the example pie website using best judgment incorporating everything taught in this course from scratch. To help give direction, Jen goes through highlights of her solution, and briefly touches on HTML5 forms, accessibility, and the <label> and <datalist> tags.
Conclusion
Jen opens the discussion up for questions, talks about current and future browser support and gives her conclusion and contact information.