CSS, HTML

Borp Magazine: Grid & Flex and More

First of All…

Please download the files for the exercise.

In the downloaded archive, there is one HTML file, a folder of images, and a folder of screenshots.

For this exercise, you are making a front page of a magazine-style site. There are two designs: one for regular marks and one for bonus marks.

The bonus marks design continues from the end of the regular marks design, so do the regular one first, and then decide if you want to do the bonus marks design.

You may not use floats. 

 

Regular vs Bonus…

If you compare the regular full-size and the bonus full-size screen shots, you will see the following differences:

  • The Site Header Text Treatment
  • The Site Header First Letter Treatment
  • The Triangular “Cutting” of Each Feature Image

The differences in the designs are also present in phone view.

In order that you do not take unnecessary risks in a test situation, please do the “bonus” exercise work on an additional stylesheet. That way, if it doesn’t work, you can just delete the link to the bonus styles, and be content with regular marks. Remember, also, that you do not have to do the bonus part.

The HTML

I have given you a lot, but not all, of the HTML required. You will need to write the FORM, for example. Feel free to add to or modify the HTML in any way, but try to get as close to the screenshot designs as possible.

The Form

Firefox has an amazingly full-featured screenshot ability, but it cuts off screenshots above a certain size. For that reason, I have included screenshots of the FORM at Desktop and Phone widths. The form is at the bottom of the page. It has two different layouts (like the rest of the exercise).

Fonts & Colors

Any sans-serif text is the Google font Fira Sans Condensed. You decide which weights from looking at the screenshots.

Any serif text is the georgia font stack.

Try to get the colors and spacing as close to those in the screenshots as possible.

 

Marking Details

Phone Layout 2
Desktop Layout 8
Form Layouts 6
Header (including NAV) 4
Possible Bonus Marks 5
Standard
CSS, HTML, JavaScript

“The Walrus” Layout Reconstruction Exercise

This exercise is meant to get you thinking about transitions, menus, responsive states, layouts, and as always web typography.

First, please download the files you will need.

In it, you will build a layout that was used to great effect by the Canadian literary magazine The Walrus.

I’ve put in some of the HTML, but not much. You’ll need to add more. Feel free to modify any I have put in.

There are two big editorial images. The first acts like a feature image. I’ve already put these two, and two ads, into the HTML, but notice the spacing of the images and the text at the various breakpoints.

For the three links in the header, use HTML button elements, and Font-Awesome—the new version that loads SVG instead of icon fonts.

The fonts used are two from Google — Source Sans Pro and Playfair Display — and the Georgia, Times, etc font-stack.

Make all your layouts as close as possible to the ones shown in the screenshots.

I will add mobile menu screenshots at a later date, but this should be enough to work with for now.

All menu states have transitions (from off-screen to on-screen) that take place over .5s.

You can use grid, flexbox, etc. Do not worry too much about backward compatibility.

You will definitely need JavaScript for:

– the classList method, to add classes to elements such as the body

– at least one condition to test how many menus are active

WORK in groups of two or three. When you are done, make a TEXT FILE name “group-members” and include the names of each group member. Only one person per group needs to hand in the project: you will be marked for your group work.

Standard
CSS, HTML

CSS Grid “Layouts in Abstract” Exercise

First, download the required  files. 

Using Firefox for your browser will allow you to use its Layout tab in its Inspector. If you’re at Langara, use the Firefox Developers Edition.

The task:

In the files you download is a grid-starter-template.html file. For each layout you are to build, duplicate and rename to reflect the layout you need to build.

There is a stylesheet called common-styles.html which just removes the dots on the list and does some basic formatting.

Put your styles for each exercise in the <style> area at the top of HTML.

Do the exercises in sequence: some build on what’s done in the previous exercise.

 

Example 1: 

Four rows, five columns.

  • Columns take all available space (i.e. between the BODY margins).
  • Font size determines height of rows
  • 1em space between items.

Example 2

  • Four rows, five columns
  • First column is 300px, other columns vary with browser width

Example 3

  • Seven rows, three columns
  • First and last columns are 300px, other columns vary with browser width.

Example 4

  • Three rows, seven columns. First row 3x the size of other rows.

Example 5

  • Three rows, seven columns. First item in row 1 covers four columns

Example 6

  • Three rows, seven columns. Last item in row 1 covers four columns

Example 7

  • First item in row 1 covers four rows

Example 8

  • First item in row 1 covers four rows and two columns

Example 9

  • Item number 1 appears at the end of row 2.

Example 10

  • Item number 1 takes up two rows and two columns from the right edge of the wrapper.

Example 11

  • Item number 1 takes up three columns in the middle of the entire wrapper.
  • Remember: no changes to the HTML.

Example 12

  • 3 columns, equal width.
  • 7 rows. Row 2 is 1/2 the height of row 1, and 1/3 the height of row 3.
  • That pattern continues with rows 4,5, & 6.
  • But the last row does not continue the pattern: the only thing determining its height will be the content itself.

Example 13

  • Two screenshots (one hanging off the edge)
  • Four columns. Each each an equal width, but each one never gets smaller than 200px. It can get bigger, however.
  • Hint: requires minmax()

Example 14

  • 4 rows, 5 columns.
  • Wrapper takes entire width and height of the page.

Example 15

  • Same layout as example 14, but item number is in top right of box.
  • Add 1rem of padding, too.

Example 16

  • Same layout as example 15, but text is in the horizontal and vertical center of the box

 

 

For layouts 20 – 23, use the file poem.html as your starting point.

Example 20

  • Style it like in the screenshot. Don’t worry that the text is different than in the screenshot.
  • Divide the items up such that they cover the entire page.
  • Make the number be in the top left corner and the text be in the bottom left corner.

Example 21

  • Lay it out like in the screenshot.

Example 22

  • Layout it out like in the screenshot
  • Modify the design so that the item number has a light background related to item background.
  • Have the number text centered vertically and horizontally in its box.

Standard
CSS, HTML

Flex Layout Exercise – Redunzl 2018

This exercise primarily focusses on the use of the FLEXBOX css module for layout. It should also reinforce your understanding of the use of multiple backgrounds.

First, download the starter files and screenshots.

Since this is an exercise, I have not sized the images down to the final size I would use them at. In a production site, I would definitely do so. Use the images as supplied. This is commonly done while figuring out how our layout is to behave.

You create all the HTML & CSS. I’ve supplied none.

Use so-called greek text, created with Emmet’s lorem functionality. In the paragraphs under story items, the paragraph lengths vary. To make the task easier, keep the headings short ( one or two words ). For the first image (ie the one in the feature story section), use the file bug-banner.jpg.

Conditions of the Exercise: Layout

You can’t use floats on anything. None. Zero. No br tags, either.

Do not make separate grid classes.

Use flex properties to control as much of your layout as possible, including widths of element boxes.

Notice the flow of alignments in the small menu area underneath the biggest image on the page—presumably, this would be a carousel kind of element. If a user clicked different numbers, they’d get different images and story titles. Don’t worry about adding that functionality, but definitely make sure you get the different responsive alignments of that little menu correct (more detail below).

Conditions of the Exercise: Perfect Vertical Alignment

I’ve included this below in the screenshots, but I wanted to describe what I’m looking for here, too.

When the number menu wraps, make sure that the headline and the menu items are perfectly centered vertically.  Definitely make sure that there does not appear to be more space on the top of this area than on the bottom. You will likely need to use the Developer Tools (right click: Inspect Element) carefully to figure out what’s going on here.

Conditions of the Exercise: Multiple Backgrounds

Header & Feature Area

The header and feature area (combined) uses two background images to create the grid + noise pattern. They are found in the patterns folder: asfalt.png and batthern.png.

Page Bottom

Open the full size screenshot. Make sure you look at it at full size ( in Preview (Mac): View > Actual Size ). Scroll down to the bottom. Notice the subtle background pattern. Now start scrolling up slowly. See how the pattern gradually fades away after a couple story boxes.

Figure out how to create that effect.

The image I used here came also from transparenttextures.com: skulls.png (it’s in the patterns folder, too).

 

Standard
CSS, HTML

Midterm: WordPress Theme Mockup Exercise 2018

In this exercise, you will build a mockup of the first page of a magazine-style WordPress theme called Midterm.  It will look more or less like this, but consult the screenshots that you will get shortly, because I’ve changed the design a bit.

Midterm-Full Width View

Download the starter files form here.

The Task

Build the layout as close as possible to that illustrated in the screenshot files that are contained in the files you downloaded.

Use FLEXBOX for the layout. 

Do not download any grid systems. 

The screenshots are captured on a Retina 27″ iMac, so there’s lots of detail. Zoom in on the files to get a sense of what I’m looking for.

Notice that the sidebar remains the same width throughout. Only the article area, and the articles themselves (including the photos contained inside) change size. The main differences between the layouts are described below:

  • Small Layout: single column, menu initially hidden
  • Medium Layout: two columns in article area, centered header at full width, menu initially hidden
  • Wide Layout: three columns, menu always visible. Menu button always hidden.

The fonts used are from Google: Lato & Merriweather (sans-serif and serif, respectively).

For the font icons, use Font-Awesome 4. You will notice that the HTML for the post-meta section (the credits and categories in each article) does not have any classes or spans on the links. Use Atom selection techniques to make the task of adding the classes and spans a simple one.

Do all your testing in Chrome. You can ignore other browsers for now.

One small caveat: in a real production site, I would of course not use images at the size I’ve supplied to you. For designing a layout, however, this is perfectly normal. You don’t need to size them down in this exercise.

 

Apart from blacks and greys, there is one main color used: #cd5c5c. I used the complimentary of that color in some places too. Figure out how to get that color without just using the eyedropper tool in Photoshop.

Links

When the use hovers over the MENU or TOP buttons, the background color changes to the complimentary color.

Menu Component

As the screenshots show, when the layout goes to the largest breakpoint, the menu button will disappear and the entire menu will be shown.

Conversely, at the medium breakpoint and smaller, the menu will be hidden and the menu button will appear.

Clicking on the menu button will cause the menu to appear. Clicking on it again will cause the menu to disappear again.

In a later class, we will do the JavaScript to enable this, with transitions. At this point, just make stuff appear or disappear via CSS.

Spotify

In the main footer of the site in the screenshots, a Spotify playlist is embedded. That playlist is right here. Figure out how to embed the small version of this playlist. Only do this if you have done the rest of the exercise.

And if the Langara network is causing any issues with Spotify in a local page slowing down loading, just drop this part of the task.

If you don’t do this, you will not lose any marks.

Standard
CSS, HTML

Flex In A Nutshell

The exercise will focus on the essential points of the FLEXBOX CSS module. It won’t have anything design-related—just pure css layout concepts.

To begin, make a folder, set it up as a new Atom project, then make an index.html file with a single unordered list with 15 list items, each holding one single-word link.

<ul>
  <li><a href="#">Lorem.</a></li>
  <li><a href="#">Libero.</a></li>
  <li><a href="#">Repudiandae!</a></li>
  <li><a href="#">Deserunt.</a></li>
  <li><a href="#">Tenetur.</a></li>
  <li><a href="#">Provident.</a></li>
  <li><a href="#">Ut.</a></li>
  <li><a href="#">Veritatis.</a></li>
  <li><a href="#">Ratione.</a></li>
  <li><a href="#">Ratione?</a></li>
  <li><a href="#">Dolores?</a></li>
  <li><a href="#">Voluptatum!</a></li>
  <li><a href="#">Facilis.</a></li>
  <li><a href="#">Eius?</a></li>
  <li><a href="#">Est?</a></li>
</ul>

Now remove the list’s dots, and zero out its margin and padding.

Give the LIs a border, and set the LINKS to display: block with generous padding.

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    li {
      border:1px solid black;
      box-sizing: border-box;
    }
    a {
      text-decoration: none;
      display: block;
      padding: 1rem;
    }

Test your page in a browser. It should look like a bunch of boxes taking the full width of the page, in the default UL layout of a single column.

Now, set the UL to display:flex. Your list should now look something like this:

List With Default Flex Flow

We see, then, that the LIs are now arranged in a single row. Each box is a different width. In other words, its content size (single word + padding) is determining the box size.

Flex-Flow

In addition, notice that the LIs are running off the page. This is because the default FLEX-FLOW value on the UL is ROW NOWRAP. ( Flex-flow is a shorthand property combining Flex-Direction and Flex-Wrap ).

Let’s change that. In your UL style add FLEX-FLOW: ROW WRAP. Your page should now look like this:

LIST with ROW WRAP

What we observe here is that the list items are filling as much of each row as will fit, then wrapping. In a sense, they’re behaving similarly to inline-block elements.

One way FLEX gets its name, however, is from how easily we can adjust the distribution of the items. For example, if we add justify-content: center to our UL style, the elements will line up in the center of each row, and the remaining space will appear at the sides:

Centered Flex Rows

Additional values for JUSTIFY-CONTENT include

  • Space-Around: additional space is distributed on each side of each flex-child (first screenshot below)
  • Space-Between: additional space is distributed on each side of each flex-child, except not on the beginning or end of the row (second screenshot below)
  • Flex-Start: the items line up at the front of the row, and additional space is put at the end of the row (third screenshot below)
  • Flex-End: the items line up at the front of the row, and additional space is put at the end of the row (fourth screenshot below)

http://wrmf.ca/wp-content/uploads/2018/01/FlexDemo4.png

http://wrmf.ca/wp-content/uploads/2018/01/FlexDemo5.png

http://wrmf.ca/wp-content/uploads/2018/01/FlexDemo6.png

http://wrmf.ca/wp-content/uploads/2018/01/FlexDemo7.png

Flex-Grow, Flex-Shrink, Flex-Basis: FLEX

So far, all the Flex properties have been applied to the Flex Parent.

Three very useful properties that get applied to flex-children are Flex-Grow, Flex-Shrink, and Flex-Basis. All three are quite typically applied as the Flex shorthand property. I think that its actually easier to understand each if you use the shorthand method.

All three properties concern how the browser will assign space in each flex row or column.

With just FLEX-FLOW:Row Wrap set on our UL, our list lines up like this:

http://wrmf.ca/wp-content/uploads/2018/01/FlexDemo9.png

Now, add flex:1 0 100px; to the LI style. Resize the browser window (bigger and smaller).

http://wrmf.ca/wp-content/uploads/2018/01/FlexDemo8.png

In the FLEX shorthand property, order matters. The first is the FLEX-GROW value, then FLEX-SHRINK, then FLEX-BASIS.

FLEX-BASIS represents the starting size of the element. So in the above code, each LI’s initial width is 100px. The browser will place as many of the 100px LIs in the ROW (in this case). Then it will calculate how much additional space is left. That additional space will be distributed by referring to the FLEX-GROW property. Since all our LIs have a FLEX-GROW value of 1, they will all get an equal share of the remaining space.

To understand how Flex-Grow really works, let’s comment out all but four of the list items. Add the following style:

    li:first-of-type{
      flex: 10 0 100px;
    }

We see here that the FLEX-GROW property on the first LIST ITEM is set to 10. Test the page in a browser (resizing big and small).

http://wrmf.ca/wp-content/uploads/2018/01/FlexDemo10.png

This whole shorthand, then, means that the first item will get 10 times as much of the remaining space as the other items.

Now add the following style:

    li:nth-of-type(4) {
      flex: 5 0 100px;
    }

This means that the fourth list item will get 5 times as much of the leftover space as the “ordinary” LIs (which have flex-grow values of 1), but only half as much of the additional space as the first LI (which has a flex grow value of 10). In the screenshot below, we see this reflected.

http://wrmf.ca/wp-content/uploads/2018/01/FlexDemo11.png

So, in a nutshell, our FLEX shorthand sets the “starting” size of the element, and the FLEX-GROW propertiy determines how much “leftover space” in the parent is distributed to each of the flex children.

The FLEX-SHRINK property will determine how items are allowed to shrink. It’s not as commonly used as FLEX-GROW. That is why I’ve set the FLEX-SHRINK to zero: a value of zero means the element won’t shrink (and a value of zero for FLEX-GROW means it won’t grow).

Hopefully, this simple example gives you a sense of what we can do with FLEX. There are a lot of additional things we can manipulate with flex, but you can build a lot of layouts with what we’ve covered here.

In later exercises, we’ll examine those properties.

Standard
CSS, HTML, JavaScript, Tools & Generators

ATOM Packages

A lot of good text editors, like Sublime Text and Atom, have the ability to easily install packages that will extend their core functionality.

Sometimes, people will make packages to replicate functionality found in other editors. For example, I am a longtime Sublime Text user. However, since Atom is free, I’ve started using it so students don’t feel compelled to buy Sublime Text. But there are a few features of Sublime that I miss in Atom. Fortunately, a number of packages allow me to add those features.

To install a package in Atom, do the following:

  • Bring up the Command Palette (command-shift-p on Mac, control-shift-p on Windows or Linux)
  • Type install and then select Install Packages And Themes
  • Search for the package you want to install
  • When you find one, press the INSTALL button

Here are some of the packages I always install:

  • Emmet: a brilliant, and essential, HTML/CSS macro utility.
    And here’s the official Emmet documentation and the excellent cheatsheet.
    Emmet practice exercise 1 | answer key | Emmet practice exercise 2
  • Open in Browser / Open in Browsers. There are number of packages that make testing the page in the browser quicker.
  • Col0r-Picker: command-shift-c (mac) or control-alt-c (win/linux) brings up a color picker
  • Atom-Live-Server: for testing dynamically generated pages
  • Atom-Beautify: for tidying up html, css, javascript, php, etc.
  • Auto-Update-Packages: does what you think it would do
  • Wrap in Tag: this replicates Sublime Text’s wrap in tag command. Which is really useful.
  • Linter: linters provide error messages. ( You will need to install language-specific linters in addition to this “base” linter )
  • Linkter-htmlhint: this provides HTML error messages on save (look at the bottom of the editor. Click for error panel.)
  • Linter-CSSLint: this provides CSS error messages on save (look at the bottom of the editor. Click for error panel.)
  • Linter-jshint: for JavaScript hinting on save (look at the bottom of the editor. Click for error panel.)
  • Pigments: A CSS color viewer. It adds a background color to all your color declarations. It even understands SASS variables and color-changing functions.

That’s just a few of the available useful packages.

Note, also, that most packages also have settings that can be configured from the Preferences / Settings menu.

 

Standard
CSS, HTML

Float-Based Layout Practice Exercises

If you want to practice float-based layout techniques, here are a few exercises. There are some very useful techniques contained in these exercises.

If we have not yet covered a technique or tag yet in class, google it.

Berlin Photo Gallery

Go to this page and download the files and follow the setup instructions. This exercise has a lot of hints in the instructions. It also has a highly annotated (HMTL & CSS) solutions file to download, if you want.

Upside Down Mag

Go to this page and download the files and follow the setup instructions. This exercise has a lot of hints in the instructions. It also has a highly annotated (HMTL & CSS) solutions file to download, if you want.

 

The other exercises, below, are arguably harder, and they have much less hints. Try them if you like a challenge.

Gibson Vs Fender 1

Download these files. Read the included Instructions  file. Build the various responsive layouts shown in the included screenshots.

Techniques Required

  • Floats
  • Clears
  • Clearfix
  • “CSS Math”
  • Border-radius
  • Position (for the heading / border trick… )

Gibson Vs Fender 2

Download these files. This package does not include an instructions file. Just build the various responsive layouts shown in the included screenshots.

Techniques Required

  • Floats
  • Clears
  • Clearfix
  • “CSS Math”
  • Nested Elements

PedalMania

Download these files. Read the included Instructions file. Build the various responsive layouts shown in the included screenshots.

Techniques Required

  • Floats
  • Clears
  • Clearfix
  • “CSS Math”
  • Background Images
  • Background Color
  • Tables
  • Hover
  • Position (for the heading – border trick… )
Standard
CSS, HTML

Responsive Design Exercise: GuitarMania 2017

First, please download the files you’ll need for this exercise.

Once you unpack the downloaded zip file, open the main folder in your code editor. You will see that you have two folders: one for images and one for your CSS files.

In this exercise, we are going to use a mobile first methodology to build the index page of a site devoted to Gibson guitars.

If you are taking my ECUAD Advanced WordPress course, we will build this site and then turn it into a WordPress theme.

Here’s what our final comp is going to look like:

Desktop View: Click for expanded image

 

And here it is in the iPhone simulator:

iPhone view. Click for expanded image.

 

The keys to this kind of layout:

  1. Percentage-Based Widths
  2. Fluid Images
  3. CSS3 Media Queries
  4. The Viewport Meta-Tag

The Basic Setup

First, we will download a reset stylesheet to use as a foundation for the project.

To do this, go to the normalize.css webpage and download the latest version of this “starter” stylesheet into the empty css folder. Name it normalize.css. 

This stylesheet neutralizes differences between browsers so we can build upon a level playing field. One browser might have different default values for margin, or padding, or font-sizes, etc etc,  than another browser. This can cause layout problems. The purpose of reset stylesheets is to get all browsers reset in such a way that they behave the same way with all elements.

 

Next, go to HTMLShell.com to get a starter HTML file. Before copying it, however, click the button to include the viewport meta-tag. I will explain what viewport does later in this exercise. Save the index.html file at the top level of the site folder.

Wire up the stylesheets to this html file by adding the following two lines inside the <head> of your document.

<link href= "css/normalize.css" rel= "stylesheet">
<link href= "css/style.css" rel = "stylesheet">

Make a file called style.css and save it inside the css folder.

Put the phrase Guitar Mania inside your <title> tags.

Inside the <body> of your document, put in the following code for the header .

( Type it out rather than cutting and pasting from my website: this will help you memorize the tags and concepts. )


<header>

<h1>Guitar Mania</h1>

<nav>
 <ul>
  <li><a href="#">Guitars</a></li>
  <li><a href="#">Amps</a></li>
  <li><a href="#">Players</a></li>
  <li><a href="#">Lessons</a></li>
  <li><a href="#">Search</a></li>
  <li><a href="#">Contact</a></li>
 </ul>
</nav>

</header>

Test your page. Make sure that this content is showing up.

Add The Main Content

Now wrap everything that’s inside the body tags inside a DIV with a class of wrapper. This will set the ultimate wrapper for our content. We will style it shortly.

After the closing <header> tag (but inside the .wrapper DIV), put in the following code.


<section class="original">

  <h2>Original Models</h2>

  <div class="guitar-small">
    <a href="#">
      <img src="images/custom.jpg">
      <h3>Les Paul Custom</h3>
    </a>
  </div>

  <div class="guitar-small">
    <a href="#">
      <img src="images/goldtop.jpg">
      <h3>Les Paul Goldtop</h3>
    </a>
  </div>

  <div class="guitar-small">
    <a href="#">
     <img src="images/standard.jpg">
     <h3>Les Paul Standard</h3>
    </a>
  </div>

</section>
<!-- END ORIGINAL -->

What we are doing here is the following:

  • Grouping the content with a section tag and an explanatory h2.
  • For styling purposes, wrapping a DIV around each image and the h3 text that identifies it.
  • Wrapping a link around the image and the h3 (even though the anchor tag is inline, this is allowed).

Test the page in a browser. It should now look like this:

 

The first problem we notice is that under a certain size, the images go beyond the edge of the browser window rather scaling with the page.

Responsive Images

The solution, and a fundamental technique of Responsive Web Design, is to make your images resize to fit your box. It’s easy to do this.

Open the file style.css if it isn’t already open. Add the following style:

img {
  max-width: 100%;
  height: auto;
}

.guitar-small img {
  border: 1px solid #888; /*For design, not for responsiveness. */
}

Test your page now. Shrink it to see if the images are scaling down and have the border. The page should look like this:

Images scaling responsively

Make More Rows

If it does look like this, copy that row of guitars (the <section> with a class of original). If it doesn’t look like this, consider validating your html & css.

Paste that row twice after it. Change the classes of the pasted outer <section> elements to budget and artists, respectively.

Change the h2 text in the second row to Budget Models and the H2 text in the third row to Artist Models.

In the second row, change the H3s to: Les Paul Junior, then another Les Paul Junior, and finally Les Paul Special.

In the third row, change the H3s to: Alex Lifeson, then Peter Framptonand finally Ace Frehley.

With rows two and three, change the images in the inner sections to their correspondingly named guitar pictures (there are two Les Paul JRs, but the image names reflect that).

Finally, change each comment that ends each row, to reflect the changes you’ve made to each section.

Test the page. Make sure that all the images and headings are different.

Typography

Go to the Google fonts website and select the fonts Oswald (weights 400 & 700) and Roboto Slab (weight 400 only). If you need to review how to do that, consult this page.

Now let’s make our basic typographic decisions. In your style.css file, add the following CSS;

h1, h2 {
	font-family: oswald, sans-serif;
}

h1 {
	font-weight: 400;
	color: white;
	background-color: #000;
	margin-top: 0;
	padding-top: 3rem;
	text-align: center;
}

h2 {
        font-weight: 700;
	text-transform: uppercase;
	font-size: 2.6rem;
	text-align: center;
	margin-bottom: .75rem;
	margin-top: 2rem;
	line-height: 1;
}

h3 {
	font-family: "Roboto Slab", georgia, serif;
	font-weight: 400;
	margin: 0;
	font-size: .75rem;
}

a {
	font-family: "Roboto Slab", serif;
}

Test your HTML page at a narrow browser width. It should look more or less like this:

Obviously, our content is getting too close to the end of the browser window.

Wrapper DIV

The purpose of the WRAPPER div we put in earlier was to have a box with which to easily style our main layout.

Add the following to your stylesheet. Because the wrapper div is our main structuring element, I would put it just after the BODY style.

.wrapper {
  margin: 0 2%;
}

The page should now look like this:

In other words, we have now pushed the all the content away from the left and right edges of the browser.

Later, when we work on our desktop view, we will modify the .wrapper style more.

More Header Tweaks

Let’s work on the menu.

/* MENU and LINKS =========================================== */
a {
  font-family: "Roboto Slab", serif;
  text-decoration: none;
}

nav ul {
  list-style-type: none; 
  margin-left: 0; 
  padding-left: 0;
}

nav li {}

nav a {}

The NAV UL style here is an extremely common approach: we are removing the LIST dots with list-style-type: none and clearing up the space the browser made for the dots. ( We use margin-left and padding-left because different browsers have used different defaults ).

If you test the page, you will see that the dots are gone and the list is now sitting fully to the left of the wrapper.

Now let’s arrange and style the menu as in the iPhone simulator screenshot at the top of this page.

Modify your link and menu styles as follows:

nav a {
  font-size: 1.4rem;
  line-height: 2;
}
nav li {
  background-color: #ccc;
}

This will create the following presentation of our menu:

Now add the following styling

nav li {
  background-color: #ccc;
  border: 1px solid white;
  float: left;
  width: 50%;
}

Test the page. The results might surprise you:

Two things are happening here:

  • Because our LIs have borders, their width is 50% + 2px. This means that they won’t go beside each other.
  • The h2 is coming up beside the floated LI elements.

This kind of thing often confuses people, but there is an easy fix. Add box-sizing:border-box to your NAV LI style. This will make the browser treat the border (and padding, if the style has it) as inside the box. Very useful, indeed.

A few more tweaks remain. First, add the following to your h1 style:

h1 {
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

This will give you rounded bottom corners on your site name (the h1).

Add text-align:center to your NAV LI style to get the links to sit in the center of their containing elements.

Finally, add display: block to your NAV A style. This will make the links cover the full width of their containing elements (so mousing over the LI will cause the browser to display the pointer cursor that indicates links).

Test your page. We’ve got much of the mobile layout covered now.

Our First Clearfix

But if you scroll down the page, you will notice that the browser appears to be ignoring the margin-top on the first h2.

In contrast to the above screenshot, here is the second h2 in the page.

Both h2s share common styling.

What’s happening here, however, is common when you use floated elements. Specifically, if all the children (or the last children) of an element are floated, the parent element will appear to shrink (ie backgrounds will disappear and borders will collapse). The reason for this is to allow subsequent elements to come up beside the floated element.

This is, in fact, desired behavior: think of a tall image in a short paragraph: if we float it, we want subsequent paragraphs to come up beside the image.

In our case, since the NAV UL’s child LIs are all floated, they hang out of the UL.

The secret to fixing that is to use the clearfix hack.

For an explanation of clearfix, read this.

Copy the clearfix code from here. (You can omit the comments and the IE 6/7 code, too). Paste it into your style.css file.

NoW, apply the clearfix class as an attribute to the UL that’s inside your NAV.

<ul class="cf">

Test your page. You should see that the clearfix has made it appear that the first h2 now has a top margin again. This is because the UL has “grown” to encompass its floated children.

Additional Layouts: Media Queries

Media Queries allow us to direct additional or different styles to different viewing conditions.

For example, we could hide advertisements and change the paragraph font-size when the document is printed (notice the used of points and inches, which make sense for print but not for screen):

@print {
  .ad {
     display: none;
  }

  p {
    font-size: 9pt;
    line-height: 11pt;
    margin: .25in;
  }

}  /* end print query */

Each query starts with an @ symbol. Often it will also include a condition. For example, this series of queries will change the body background-color as the page size increases:


@media screen and (min-width: 500px) {
  body{
     background-color: orange;
  }
} /* end 500px min query*/

@media screen and (min-width: 800px) {
  body{
     background-color: red;
  }
} /* end 800px min query */


@media screen and (min-width: 1000px) {
  body{
     background-color: yellow;
  }
} /* end 1000px min query */

Think of each query as an additional stylesheet.

As noted, we’ve been building this guitar site using the Mobile First methodology. The simple background-color example above shows how we will continue the build: with a series of escalating-value min-width media queries.

Here’s why Mobile First makes so much sense:

Since block elements already take up 100% of their containers, and since typical phone layouts are often predominantly single-column, the phone layout is the easiest one to do.

Moreover, by first making the styles that are common to all our layouts, we can build UP rather than DOWN. In other words, we will add more complex layout styles as the browser width increases, rather than remove them as the browser width decreases.

When smart phones first came out, designers typically took a Mobile Last approach. They would build the wider views and then use media queries to simplify or undo some of the layout at smaller widths. Mobile First means less work because we don’t have to undo anything we build.

Back to our Task

If we look at the desktop width screenshot at the top of the page, we’ll see some obvious divisions. For example, the h2s and the guitar-small DIVs are four per row. So we could style them like this (put the query after your other styles, so they don’t get overridden):

@media screen and (min-width: 700px) {
  h2, .guitar-small {	
	margin: 1%;
	width: 23%;
	float: left;
  }
} /* end 700px min query */

Test your page. Shrink it as much as the browser will allow. Here we see the phone layout. Now make the page wider. Eventually we will see the 700+ layout change to something like this:

As you make the page bigger, the layout will end up looking like this:


The reason for the first problem (700px to approximately 800px) is that as the images scale down, their enclosing DIVs get shorter, too. As a result, the h2 boxes are taller than the .guitar-small boxes. This causes each succeeding row to get enjambed.

The reason for the second problem is that the Les Paul Special image is a pixel or two shorter than the other ones. As a result, the h2 in the third row gets enjambed, too.

The solution to both problems: clearfix the SECTIONS. This will make each section exactly as tall as the highest element. As a result, the bottom of each section will be smooth rather than uneven, which means that succeeding content will not get enjambed.

(To add another class to an element that already has one, put it inside the ” ” and separate the classes with spaces).

 <section class="artist-models cf">

Once we clearfix the three sections, our layout should look like this.

Your Remaining Tasks: Add and Style More Content

Please download the final layout screenshots.

Open them up in Preview or some other PDF reader and view them at actual size.

Note the additional content in the screenshot. Please add it in. The image is of a Gibson ES-175, which you can find in the images folder.  The h3 that goes with the image says Featured and the paragraph below that says:

It’s not a Les Paul, and we’re a Les Paul site, but this Gibson ES-175 is so gorgeous that we decided to feature it anyway.

Beside that (in the Desktop view) is a form entitled Contact The Editors, with fields for First Name, Last Name, Email, and Comments.

I’ll give you the code for the form:

<section class="subscribe">

  <h4>Contact The Editors</h4>

  <form action="#" method="post"> 

    <label for="firstname">First Name</label>
    <input type = "text" class="firstname" id="firstname">

    <label for="firstname">Last Name</label>
    <input type = "text" class="lastname" id="lastname">	

     <label for="email">Email</label>
     <input type="email" class="email" id="email">

     <label for="comments">Comments</label>
     <textarea id="comments" class="comments"></textarea>

     <input type="submit">

  </form>
</section>

You figure out how to style the form. Hint: the display property is very useful here.

Please finish the page layout, getting it as close as possible to those shown in the downloaded screenshots, and then show your page to me.

About the Viewport Meta Tag

The Viewport Meta Tag, which we added when we got the HTML from HTMLShell.com, tells mobile browsers not to scale the page down.

First making sure that the meta tag is in your code, test your page in the Apple mobile simulator. Or test it on your phone by uploading it to webspace and then going to that URL on your phone.

Comment out the viewport meta tag line and then test it again in the mobile simulator or on an actual phone.

Doing this will show how mobile browsers scale pages without viewport meta tags, assuming that they were built without a responsive strategy (as practically all pages were built before the advent of smart phones).

In essence, when you use the viewport meta tag, you tell the mobile browser that you have in fact taken its dimensions into account in your design.

From the Mozilla Developers Network, more information on why the viewport meta tag is required.

Guitar images © Gibson Brands. Used with permission.

Standard