Topics

• How to implement “solid-color gradients”;
  • uses a linear-gradient() function that takes a degree value and three color values rather than your typical two.
  • linear-gradient(105deg,
rgba($color-white, .69) 0%,
rgba($color-white, .9) 50%,
transparent 50%)
• How the general and adjacent sibling selectors work and why we need them;
  • [selector1] + [selector2] Adjacent sibling elements are on the same level and immediately follow one another within a parent. This first selector selects the element immediately after it (not before). If there are elements in-between these two sibling elements, then you may use the general sibling selector [selector1] ~ [selector 2].
• How to use the ::input-placeholder pseudo-element;
• How and when to use the
  • :focus, when an input or button has been selected
  • :invalid takes advantage of the HTML5 standards for inputs and recognizes whether the input value is invalid and then selected,
  • :placeholder-shown when the input has no value the shown placeholder is selected, and
  • :checked ;
• Techniques to build custom radio buttons.
  • You cannot style the <input type="radio"> button,
  • So instead you create a new button by placing an empty <span> inside the <label> element,
  • The <span> can then be selected and styled into our custom button while the <input type="radio"> button is hidden
• It’s common practice to use the !important value with all utility class declarations. This makes sure that the utility class will take precendence regardless.

Tutorials

• Section 05 Natours Project with Sass Part 5, videos 045-048
• This week focuses on how to style forms by setting a number of properties of the input element as well as using the :focus and :focus:invalid pseudo classes to style the input field while being interacted with.
  • natours/v5-8/this-is-booking-version-all-the-usual-files-folders

Problem set

Basic template version 3 – updating your grid using Flexbox Grid Sass.

The grid system developed in the Natours tutorials nicely divides the webpage into columns of two, three, or four. But what if you want to work in different ratios? How about 12 columns is that too many?

Also, the Natours grid system is not at all ‘responsive.’ Meaning if I were to open the Natours project on a small screen, it looks really terrible.

What we’d like to see instead is something more like this:

This is going to take an update how we write grids in our HTML as well as swapping out the grid system with our new one. You can install the necessary scss files from Flexbox Grid Sass, or you can find the necessary two here.

You’ll need exclude the old grid from your main.scss file and include the two new files.

The HTML updates will require you to update all the column classes with the new flexgrid system. For example:

<!-- old HTML -->
<div class="row">
   <div class="col-1-of-2">
      <!-- stuff in column one -->
   </div>
   <div class="col-1-of-2">
      <!-- stuff in column two -->
   </div>
</div>

<!-- new HTML -->

<div class="row">
   <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
      <!-- stuff in column one -->
   </div>
   <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
      <!-- stuff in column two -->
   </div>
</div>

You should look at all the examples on the Flexbox Grid Sass page to see more options.

For the blog

Describe how the :focus pseudo selector is used to style form inputs.