Modern CSS Layout Techniques

Curiosity about grids

This course has three goals:

  1. Learn CSS Grid

  2. Learn Flexbox

  3. Apply both to Drupal

We’re going to leverage some excellent online courses that already exist so that you may review these concepts at any time. Additionally, for every Drupal exercise, I have provided an example solution that you can reference if you get stuck. Remember, there are many right answers, and if you’re learning, you’re doing it right.

Let’s get started.

A VERY QUICK HISTORY OF LAYOUTS ON THE WEB

We first had tables to layout sites in a grid. But tables couldn’t reflow when mobile devices started showing up, and let’s be honest, tables were meant to display tabular data, not control layout.

So, we all moved to using floats, which was at least meant for layouts. Floats helped to allow for layouts that could change based on various screen widths, but they still had shortcomings. A developer had to learn all of the tricks to getting items to line up and clear each other. CSS frameworks like Singularity.io, Zurb, and Bootstrap largely abstracted away the complications of using floats for layouts, but these frameworks forced you to rely on the thinking behind each one. Each also implemented layouts in different ways, meaning that instead of learning CSS standards, you were learning the thought process behind each framework's implementation. Switch jobs, and your new job used a different framework? You're now spending time learning another framework.

Enter CSS Grid and Flexbox. These CSS standards are supported in all major modern browsers. Once you learn them, you don't need to rely on an external framework to handle layout. In this class, we aren't going to rely on CSS processors or external frameworks. We're going to write vanilla CSS to create responsive layouts.

Setup

SETTING UP THE COURSES

Let’s start with the easy stuff. Set up an account on flexbox.io and cssgrid.io. (Once you set up an account on one of them, you can use the same account on the other.) The rest of this class will be watching a few videos, then applying the concepts to Drupal.

Next, if you want to follow along with the example exercises in the videos, clone https://github.com/wesbos/What-The-Flexbox and https://github.com/wesbos/css-grid to your machine.

Finally, watch the first Flexbox video and the first two CSS Grid videos for an introduction and local environment setup.

SETTING UP DRUPAL EXERCISES: STATIC FILES

In order to work on the exercises that I created for this class, all you need is HTML and CSS. A running Drupal site, while nice to have, is not a requirement. Complete the steps below to work with an exported copy of the Drupal site where you can add CSS and see how it interacts with the HTML.

  1. Download or clone https://gitlab.com/wheatpenny/modern-css-layout-techniques to your computer.

  2. Navigate to the "html" folder, then the "csslayout.lndo.site" folder.

  3. Open the "index.html" file in your browser.

  4. Open the "themes/custom/layoutexercises/css/studentwork.css%3Fpmoknn.css" CSS file in your code editor.

  5. Jump to the "CSS Grid" section below to begin the exercises.

SETTING UP DRUPAL EXERCISES: AUTOMATED WITH LANDO

If you prefer a locally running Drupal site with Lando, complete the steps below. For a quicker setup, see the previous section to use the statically generated files.

I set up the repository to work with the Lando local development environment. If you prefer to use another local development environment, please skip to the next session.

  1. Download or clone https://gitlab.com/wheatpenny/modern-css-layout-techniques to your computer

  2. Read through the system requirements and install Docker from the appropriate link at the bottom of https://docs.devwithlando.io/installation/system-requirements.html.

  3. From https://docs.devwithlando.io/installation/system-requirements.html, install Lando from the Windows, Linux, or OS link in the menu.

  4. Open a terminal and navigate to the directory from #1 (cd /path/to/directory).

  5. In the terminal, type “lando start”

  6. In the terminal, type “lando siteinstall”

  7. Note: I get an error (Error: Call to a member function claimItem() on null in _drush_batch_worker()) in my terminal's output. However, when I go to "csslayout.lndo.site" in my browser, I see the site with example generated content. If you see the same, you are good to go.)

  8. Verify that you can visit csslayout.lndo.site in your browser. If you see generated content and a link to "Recipe Masonry" in the navigation, you are ready!

SETTING UP DRUPAL EXERCISES: MANUAL

If you prefer a locally running Drupal site with your own environment, complete the steps below. For a quicker setup, see the previous section to use the statically generated files.

The steps below are general. It will be up to you to apply them to your specific setup.

  1. Copy or clone https://gitlab.com/wheatpenny/modern-css-layout-techniques to your computer

  2. Use composer to download all modules and dependencies

  3. Install the site with the existing configuration. For example: drush site:install --existing-config

  4. Generate terms: drush gent course 5

  5. Generate terms: drush gent meal_of_the_day 6

  6. Generate terms: drush gent type_of_food 7

  7. Generate content: drush genc 20 --types=recipe

  8. Generate content: drush genc 4 --types=placeholder_page

CSS Grid

GRID FUNDAMENTALS

First, watch the videos listed in cssgrid.io. (Follow along with the coding exercises in what you downloaded above in the "SETTING UP THE COURSES" section.) Then, apply what you've learned to Drupal. Place your answer in /modern-css-layout-techniques/web/themes/custom/layoutexercises/css/studentwork.css.

For each exercise, there is a CSS file with an example solution within the theme directory (/modern-css-layout-techniques/web/themes/custom/layoutexercises/css). In order to enable each file, uncomment the appropriate line in /modern-css-layout-techniques/web/themes/custom/layoutexercises/layoutexercises.info.yml.

Use https://css-tricks.com/snippets/css/complete-guide-grid/ for reference.

  1. Videos 3, 4

  2. Exercise 1: Create a layout of 4 columns of 200px each with 15px of gap between each item.

  3. Videos 5, 6, 7

  4. Exercise 2: Create a layout with a single column with a gap of 10px. Then, for page widths larger than 500px create a layout of two equal and flexible columns with a grid gap of 15px. Last, for page widths larger than 1000px, create a layout of 4 equally sized and flexible columns with a grid gap of 30px;

    1. Bonus: on layouts larger than 1200px, feature the first column by making it twice as wide as the others.

  5. Videos 8, 9, 10

  6. Exercise 3: Duplicate your work from exercise 2, except for the bonus. Then, for page widths larger than 1000px feature the first recipe by making it span two columns and two rows. Finally, for page widths larger than 1100px, flip the placement of the featured item to the other side of the page, but still make it span two columns and two rows.

  7. Exercise 4: video 11

  8. Videos 12, 13

  9. Exercise 5: Recreate (as close as possible) exercise 3 using auto-fit, auto-fill, and/or minmax

  10. Video 14

  11. Exercise 6: Start with a mobile first layout that puts the page items in this order: Header, Main, First ads, Second ads, Footer. Name the areas as you wish. Next, create a two column layout at 50em units where the first column is 2.5 times wider than the second. The header and footer should span both columns, but place the ads to the right of the main content area.

    1. Bonus: the sales team really wants the first place ads to be above the content on phones. Quickly show them how this decision negatively impacts user experience with actual working code, not just Photoshop mockups.

  12. Exercise 7: Create a Layouts API module. Apply the layout to the Recipe content type. Apply CSS Grid to the layout in order to show the content on the page within the main area.

  13. Video 15, 16

  14. Exercise 8: Name your lines in the recipe view layout (Exercise 3) and use them to span for the featured item.

  15. Video 17, 18

  16. Exercise 9: Align items in recipe layout so that they look better

Flexbox

FLEXBOX FUNDAMENTALS

First, watch the videos listed in flexbox.io. (Follow along with the coding exercises in what you downloaded above in the "SETTING UP THE COURSES" section.) Then, apply what you've learned to Drupal. Place your answer in /modern-css-layout-techniques/web/themes/custom/layoutexercises/css/studentwork.css.

For each exercise, there is a CSS file with an example solution within the theme directory (/modern-css-layout-techniques/web/themes/custom/layoutexercises/css). In order to enable each file, uncomment the appropriate line in /modern-css-layout-techniques/web/themes/custom/layoutexercises/layoutexercises.info.yml.

Use https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for reference.

  1. Video 2, 3, 4

  2. Exercise 10: Lay out the navigation horizontally using flexbox and flex direction.

  3. Video 10, 11, 12

    1. Flexbox: sizing is applied to the items.

    2. Grid: sizing is applied to the grid container

  4. Exercise 11: Use the flex property to create equally sized columns of navigation.

  5. Video 5, 6, 7, 8, 9

    1. Align items: baseline

  6. Exercise 12: Use the flex property combined with justification and/or alignment to allow each link to grow only to the size it needs while also filling the available space and shrinking each item as needed.

  7. Video 14

  8. Exercise 13: Using a mobile first strategy, Responsive navigation. Apply grid to header.

  9. Video 16, 18

Advanced

ADVANCED IMPLEMENTATIONS

  1. CSS Grid: Video 19

  2. cssgrid.io Exercise: Video 19

  3. Flexbox: Video 19

  4. flexbox.io Exercise: Video 19

  5. CSS Grid: Video 21 (Grid vs. Flexbox)

  6. Exercise 14: Lay out the exposed filters on the masonry page so that they take up an equal amount of horizontal space in the widest layout. Did you choose CSS Grid or Flexbox? Why?

  7. Grid: video 25. Connect to Paragraphs.

Resources

RESOURCES