Topics

• Attaching and using an icon font;
• Features CSS layout tools:
  • text flow around shapes with shape-outside;
  • skewX(-8deg) and then attempt to deskew with the & > * all children selector;
  • apply a filter to images;
  • use the <video> HTML element;
  • use the object-fit property.
• Tours rotating cards CSS:
  • use perspective;
  • use backface-visibility;
  • use background-blend-mode in concert with two values set to background-image property;
  • how and when to use box-decoration-break.

Tutorials

• Section 05 Natours Features and Tours Sections, videos 038 – 041, icon font & css file
• This week includes probably the most complex bits of CSS to build the rotating cards in the tours section. Versions to upload to your site:
  • natours/v5-5/this-is-features-version-all-the-usual-files-folders (use the github repository for the linea icon set)
  • natours/v5-6/this-is-tours-version-all-the-usual-files-folders

Problem set

Your template inspired by the html5up models is just getting started. You’ve hopefully defined the main font as well as a heading font and presenting these in your first draft of your elements page.

There’s a lot to learn from downloading the template files and looking at the Sass files included. They do not strictly follow a 7-1 architecture, but they are definitely informed by it. Also, a number of functions and mixins include attributions to the original author. This led to additional research and I’ve added a number of interesting Sass resources on the resources page. In particular, note the use of Sass maps in the variables section to manage font and palette values as well as the functions written to help access those values.

Besides looking at the Sass files of a HTML5up template you’re interested in, also look at specifically Hugo Giraudel’s – Sass Guidelines & Sass Boilerplate. And note that Sass has syntax and rules for annotating Sass code.

Also you should consider employing a grid system like the Sass Flexbox Grid. This will work much better than the grid system built by Jonas in your tutorials.

Finish your elements page and add the following to your template:

• Your first component – most likely buttons, but if there’s something else you’d like to build go for it;
• Add a responsive image class, you should figure out how/where it should exist in your 7-1 architecture;
• Add a simple ‘generic page’ – includes a heading, image, sub-headings, and paragraphs. Here’s Editorial’s generic page;
• Consider replacing your grid system with Sass Flexbox Grid.

For the blog

To accomplish the angled look of the top and bottom of the features section, the tutorial makes use of CSS selectors to skew the parent then de-skew the direct children. Why direct children vs. all children? How do both selectors work? Describe how this works using a SCSS code snippet to illustrate.