Topics

• Thinking about components;
• How and why to use utility classes;
  • .u-center-text a specific class for simply centering a block of text.
  • .u-margin-bottom-8 a class for adding an 8rem margin at the bottom.
• How to use the background-clip property;
• How to transform multiple properties simultaneously
• How to use the outline-offset property together with outline;
• How to style elements that are NOT hovered while others are. Clever descending selector .composition:hover .composition__photo:not(:hover) Where .composition is the parent div and .composition_photo is the img child which is descend selected.

Tutorials

• Section 05 Natours About Section, videos 035 – 037
• This week you’re going to add to your HTML and write your second component. You’ll also add a number of new selectors in your typography partial Sass file.
• Files to upload:
  • natours/v5-4/index.html
  • natours/v5-4/package.json
  • natours/v5-4/css/style.css
  • natours/v5-4/sass/main.scss
  • natours/v5-4/sass/all-7-1-directories-and-partials

Problem Set

Inspired by HTML/CSS templates by HTML5up. For this assignment, you will create the start of an “elements” page using Sass.

HTML5up templates usually includes three parts: a homepage layout, a “generic” page, and an “elements” page. The homepages are the most complicated part of the layout, but the generic and elements pages are the practical parts. They showcase basic layout the styling of every element in the template. Also illustrated are a number of components – buttons, forms, responsive images, etc. Here’s the elements reference for Editorial and Massively as examples.

This week you’re going to build the seeds for your own HTML / CSS template using Sass. We’ll focus on making some practical decisions with typography and color and build the beginnings of the elements page. Unlike a lot of the work with Natours using BEM class naming, for the elements page you’ll start with your element selectors and set values to the main ones. The exception to this will be your grid and responsive image component

Your template should include the following:

• Consider using the Sass boilerplate and Sass Flexbox Grid
• Select a Google font pairing for your headings and body fonts (inspiration);
• Select a primary color as well as set a palette of black, white, and greys (consider looking at Google’s material design for reference);
• The start should include the following elements styled as well as your grid rebuilt:
  • p, h1 – h6, a
  • grid
  • resets
  • showcase the layouts and elements similar to Editorial (or another page of interest)
• Files to include
  • my-template/v1/elements.html
  • my-template/v1/package.json
  • my-template/v1/css/style.css
  • my-template/v1/sass/main.scss
  • my-template/v1/sass/all-7-1-directories-and-partials

For the blog

Describe how the :not pseudo selector works. Give an example in a code block to support your description.