Responsive CSS and Google Fonts

CSS Grid Overview

CSS Grid Resources:

CSS Grid Experiments:

The CSS grid is used to create columns and rows within your website.
Previously, this was achieved using floats, but using floats wasn’t ideal and created limitations and problems in responsive layout
The main advantage of using CSS Grid is that you can specify how many columns and how many rows you want your site to have, reorder and place them in specific areas of your website as needed. No floats needed.

Responsive Website Examples

Examine each site below. Start with your browser window opened as wide as possible. Slowly narrow the window and note carefully how each element on the page changes, and at which points major changes occur.

RWD Overview

To achieve fluidity in the necessary elements, especially <div> widths, pixel dimensions in the CSS must be changed to percentages.
Using Chrome Dev Tools, you can test a design to determine at what screen widths the design breaks. You may see elements move offscreen or columns slide out of place. Media Queries are used to change the CSS at those breakpoints.
A browser knows what size it is open to at any given time. A media query says “when the browser is width n, apply style x.” In other words, when a browser shrinks to a determined breakpoint, new styles kick in for elements defined in the media query. The new styles often change floats or widths, and relative font sizes.

Converting a Fixed Width Page to a Fluid, Responsive Page

Observe that the code above results in a fixed-width page that becomes hidden as the browser window shrinks. To accommodate different sized browser windows, mobile devices, and assistive technologies such as screen-readers, fixed-widths must be converted to percentages, and media queries will be used to alter the design at specified breakpoints.

Getting Started

Convert pixel measurements to percentages using the formula:
target ÷ context = result
Every fixed-width block element (target) can be expressed as a proportion of its parent element (context.)
Calculate flexible font sizes and set in CSS. The Browser Reset CSS placed at the top of your CSS will give the body tag an initial font-size attribute of 100%. Most browsers interpret 100% as 16px. If the target size of your <p> text, for example, is 11px, divide 11px by the font-size of its containing element: 11 ÷ 16 = 0.6875em.
Most font-sizes in the supplied CSS have been expressed as ems, which are flexible units equivalent to 100% of the parent base font-size. The nav li rule uses a size of 13px. Convert it to ems using the formula: target ÷ context = result.

Instructions

Convert your grid from using floats to the CSS grid. Copy the code below and replace the code in your style.css file

@charset "UTF-8";
/* CSS Document */
/* Universal Selector Reset cssreset.com */
 * { margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
/* End Reset */
:root {
 --body-color: #d5d7ff;
}

body {
   background-color: var(--body-color);
   text-align: left;
   font: 11px/1.1em "Lucida Grande", Lucida, Verdana, sans-serif;
/* Necessary for gradient to work properly */
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}

#wrapper {
   margin: 0 auto;
   width: 960px;
   display: grid;
   grid-template-columns: 660px 300px;
  grid-template-rows: auto;
}

h1 {
   font-size: 1.5em;
   color: #639;
}

h2 {
   font-size: 1.3em;
   line-height: .5em;
}

h3 {
   font-size: 1.1em;
}

header {
   width: 100%;
   background-color: #000;
   grid-column-start: 1;
   grid-column-end: span 2;
}

nav {
   padding-top: 3px;
   height: 40px;
   display: flex; /* or inline-flex */
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content:flex-end;
   align-content: space-around;
}

nav ul{
  display: flex;
}

nav li {
   font-family: "Courier New", Courier, monospace;
   font-size:13px;
   white-space: nowrap;
   list-style-type: none;
   padding-right: 1.5em;
}
nav li a {
   color: #FFFFFF;
   text-decoration: none;
}
nav li a:hover {
   color: #d5d7ff;
   text-decoration: underline;
   font-weight: normal;
}

#banner {
   width: 100%;
   height: 50px;
   background-image: url(images/banner.png);
   background-size: cover;
   background-repeat: no-repeat;
}

 

main {
   width: 60%;
   margin-right: 5%;
   margin-top: 50px;
   grid-column-start:1;
   grid-column-end: 1;
}
aside {
  
   margin-top: 50px;
   grid-column-start: 2;
   grid-column-end: 2;
}

Change the #wrapper width from 960px to 96% and observe how the page now resizes. Note that the sections contained within were already set as percentages, so they are now able to resize based on their parent’s width. Set a max-width: 960px;
Determine the breakpoints at which the design fails by monitoring window size using your browser’s Inspect command. (If you are using Safari, hover over the <body> element and the current width will be displayed in the upper left. If you are using Chrome, as you resise your browser the width will appear in the upper right.)

Create a media query to alter the design at that point. At 580px, the <aside> element should flow beneath the <main> element, and the nav elements should float left and stack vertically. Add the below code to your CSS:Add pseudo-classes for and a:visited.

/* Media Queries */


@media screen and (max-width: 960px) {


   :root { 
      --body-color: #27e627; 
   }
   
   
   #wrapper { 
      width: 90%;
      grid-template-columns: 90%;
      grid-template-rows: auto;
   }
   
   
   header nav, main, aside {
      margin: 0 0 10px;
      width: 100%;
   }
   
   
   header nav {
      flex-direction: column;
      height: 140px;
   }

   nav ul{
      display: flex;
      flex-direction: column;
    }
   
   
   header nav li {
      margin: 0;
      background: #000;
      display: block;
      margin-bottom: 3px;
   }
   
   
   header nav a {
      display: block;
      padding: 10px;
      text-align: center;
   }
   
   
   #banner {
      display: none;
   }

   main {
      width: 90%;
      margin-top: 30px; 
      grid-column-start: 1;
      grid-column-end: span 2;
   }

   aside {
     
      margin-top: 50px;
      padding-top: 50px;
      grid-column-start: 1;
      grid-column-end: span 2;
      border-top: 1px solid #000;
   }
}

Make the kitten image clickable by wrapping the img element in an <a> tag and assigning an href value.
Change the image to black and white “filter: saturate(0);” on img:hover.
Optional: Swap out the banner image in the CSS using a #banner:hover rule with an image the same size as banner.png which you create.

Google Fonts

Visit fonts.google.com and choose the font family and styles you wish to incorporate into your pages. Be mindful of choosing few families and only the styles that you will need, since each will increase page load time.
Select the family to reveal the code you will need to embed within your HTML and CSS. You may choose to “Customize” your selection to include only the styles you intend to use.
The <link> code must be added to your HTML <head> section.
The font-family code should be added to any CSS rule in which you want to control the font, for example, your <p>, <a>, <h1>, etc. tags.

Code Generators

Use Code Generators to easily create CSS effects like styled buttons, rounded corners and color gradients.

css3gen.com – buttons, as well as box and text shadows
border-radius.com – rounded-corner elements

Submit

Submit your complete Exercise 02 Submit folder on Box by Thursday, Feb 25. It must include:

Custom Google Fonts
The kitten image must be clickable
Change the image color to Black and White on hover
2 other customizations of your choice. Ideas include: switching out font sizes, colors, additional images or links, or use the optional banner image swap out on hover stated above.