Jive Factory: Finishing the Wireframe

Topics Covered in This Mobile & Responsive Web Design Tutorial:

Structuring the Page for Various Sizes/devices, Min & Max-width Media Queries, Using CSS Calc() to Gain Control over Fluid Layouts, Hiding Elements for Specific Sizes/devices

Exercise Preview

Exercise Overview

In the previous exercise, we started a wireframe for Jive Factory. In this exercise, we’ll finish the wireframe by adding the structure for the page at different breakpoints.

1. If you completed the previous exercise you can skip the following sidebar. We recommend you finish the previous exercise (2D) before starting this one. If you haven’t finished it, do the following sidebar.

   If You Did Not Do the Previous Exercise (2D)

   1. Close any files you may have open.
   2. On the Desktop, go to Class Files > yourname-Mobile and Responsive Class.
   3. Delete the Jive folder if it exists.
   4. Select the Jive Basic Wireframe Done folder.
   5. Duplicate the folder.
   6. Rename the folder to Jive.

Structuring the Page for Tablets

1. If you like, you can go to Jive > layouts and open up Layout2-Tablet.pdf to use as a reference as you code up the wireframe.

   For our tablet design, we want the Upcoming Shows section to float right and take up two thirds of the screen. Floating to the left of it will be our Just Announced, Happy Hour, and Email Signup sections which will take up one third of the screen. Let’s add some HTML that will allow us to position these sections.

2. In your code editor, open index.html (from the Jive folder), if it’s not already open.

3. Now let’s edit the code. As shown below, add a shows class to the div that will hold the Upcoming Shows content:

   <div class="shows module">
      Upcoming Shows
   </div>

4. Next, wrap an aside tag around the Just Announced, Happy Hour, and Email Signup content:

   <aside>
      <div class="module">
         Just Announced
      </div>
      <div class="module">
         Happy Hour
      </div>
      <div class="module">
         Email Signup
      </div>
   </aside>

   TIP: In Sublime Text (with Emmet installed) to wrap a selection you can press CTRL–Option–Return (Mac) or CTRL–ALT–Enter (Windows) and type in the wrapper, which in this case is aside. Then hit Return (Mac) or Enter (Windows).

5. Save the file.

6. Switch to main.css (from the css folder within the Jive folder).

7. In the min-width: 480px media query, after the body rule add the following code:

   .shows {
      float: right;
      width: 67%;
   }
   aside {
      float: left;
      width: 33%;
   }

8. Save the file.
9. Preview index.html in a browser.
10. Resize the window so you have a green background. This is the breakpoint for screens 480 pixels and wider. Notice that the Footer section has moved up on the page (on the left, below Slideshow). That’s because it comes after two elements that are floated (floated items collapse and therefore no longer push the content below them down). We need that footer area to clear the floats.
11. Return to main.css in your code editor.

12. In the min-width: 480px media query, after the aside rule, add the following code:

    footer {
       clear: both;
    }

13. Save the file.

14. Preview index.html in Chrome (we’ll be using its DevTools).

    In the tablet and desktop versions, the Footer should now be below the two columns of content, but the aside and the shows content are too wide to fit side-by-side. What gives?

Using the Calc() CSS Function

Although the 67% width for the shows content and the 33% width for the aside add up to 100%, the margin that we set on the .module style is causing some trouble. Let’s use the browser inspector to verify this.

1. CTRL–click (Mac) or Right–click (Windows) on Upcoming Shows and choose Inspect.

   NOTE: The following instructions are written for Chrome’s DevTools. If you use another browser, the steps will be similar.

2. The DevTools window will open either on the bottom or the right of the browser. If you’re still in Device Mode, click the Toggle device toolbar button to leave the mobile emulator.

3. In the Elements tab, make sure the <div class="shows module"> line is selected.

4. In the Styles tab, you should see the .shows rule. Just below, you should see the .module rule that is also being applied.

5. In the .module rule, uncheck the box next to margin: 0 10px 20px; to disable it.

   Now the aside and shows content fits side-by-side into the browser. We’d still like to keep the margins though. The calc() function will come in handy here.

   NOTE: Even though we’re using the new border-box for box-sizing, that only changes how padding and borders affect width. Margins are always outside an element’s width.

6. Return to main.css in your code editor and edit the rule for .shows as follows, making sure you include the spaces around the minus sign!

   .shows {
      float: right;
      width: calc(67%—20px);
   }

   NOTE: Using calc() is a way to use CSS to ask the browser to do some math for us at render time. Here, we are asking the browser to maintain the 67% width for the element but subtract 20 pixels of margin to account for the 10 pixels on either side that the .module style also adds to this element. Remember that when using addition and subtraction with calc(), the + and—operators must always be surrounded by whitespace.

7. Save the file.

8. Preview index.html in a browser. Much improved!

Structuring the Page for Desktop

1. Now for the desktop layout. If you like, you can go to Jive > layouts and open up Layout3-Desktop.pdf to use as a reference.

Per the design PDFs, in the layout for wider screens, we want the Logo & Nav to float to the left of our Slideshow and Upcoming Shows section. It will take up 25% of the screen while the Slideshow and Upcoming Shows will take up 75% of the width. The aside div will creep up below the Logo & Nav.

2. Switch to main.css.

3. In the min-width: 1024px media query, after the body rule add the following code:

   header {
      float: left;
      width: 25%;
   }

4. Save the file.

5. Preview index.html in a browser and resize the window to the blue background. Notice that the aside content below the header (Just Announced, etc.) doesn’t match the width of the Logo & Nav, but we’ll fix that in a little bit. First let’s get the Slideshow and Upcoming Shows content floating right.

   We want the Slideshow and Upcoming Shows content to float right with a 75% width. We don’t currently have a way to target both elements grouped together. Let’s remedy this.

6. Back in index.html, wrap them in a main tag as follows:

   <main role="main">
      <div class="module">
         Slideshow
      </div>
      <div class="shows module">
          Upcoming Shows
      </div>
   </main>

7. Save the file.
8. Switch to main.css.

9. After the header style in the min-width: 1024px media query, add the following code:

   main {
      float: right;
      width: 75%;
   }

10. Save the file.

11. Preview index.html in a browser.

    Once again we see two columns not fitting next to each other (Logo & Nav and Slideshow) because of the margins. The fix will be the same.

12. Switch back to main.css.

13. In the min-width: 1024px media query, edit the width of the header rule:

    header {
       float: left;
       width: calc(25%—20px);
    }

    NOTE: Why do we edit header and not main? Header has the module class which adds margin to the header element. Main does not have the module class (it just wraps other divs which have the module class).

14. Save the file.
15. Preview index.html in a browser.

16. Notice that Upcoming Shows is smaller than we wanted. This is because the tablet layout cascades through to the desktop breakpoint. In the tablet layout, we specified that if the screen is 480 pixels or wider, .shows should be 67% of its parent, so this is still true here. But we only want this to be true for the tablet layout, not the desktop. How do we fix this?

    In the min-width: 1024px media query we could add more CSS to fix this, but then we have CSS that does something, and more CSS that undoes it. While this is OK sometimes, there is another way. We could move the original .shows rule into a media query that only applies it to the tablet layout, nothing smaller or larger. This second method is how we’ll fix it.

17. Return to main.css. Before the min-width: 1024px media query, add the following new media query. Pay close attention to where it says min versus max!

    @media (min-width: 480px) and (max-width: 1023px) {
    
    }

18. In the min-width: 480px media query find the .shows rule.

19. Select and cut the .shows rule.

20. Paste it inside the new min/max-width media query you just made:

    @media (min-width: 480px) and (max-width: 1023px) {
       .shows {
          float: right;
          width: calc(67%—20px);
       }
    }

21. Save the file.

22. Preview in a browser at the largest breakpoint. Now Upcoming Shows should be the same width as the Slideshow above it. Great! But the Just Announced aside isn’t tucking up below the Logo & Nav. That’s because it’s too wide. Let’s change it so it has the same 25% width as the Logo & Nav.

23. Back in main.css, in the min-width: 1024px media query, after the main style, add the following code:

    aside {
       width: 25%;
    }

24. Save the file and preview in a browser. Now the left side’s content should be all the same size and nicely stacked on top of each other.

Structuring the Page for Phablets

Now that we have this built, we can see that some of the content becomes really narrow when we get close to the mobile breakpoint. Let’s not have it break into our tablet styles until the page is a little wider.

1. Back in main.css, as shown below, edit the min-width: 480px media query:

   @media (min-width: 740px) {
      body {
         background: green;
      }

2. As shown below, edit the min and max-width media query as well:

   @media (min-width: 740px) and (max-width: 1023px) {.shows {
         float: right;

3. Save the file and preview in a browser. Now the tablet size is looking good, but before the 740px breakpoint, some of the content now gets too wide in the mobile layout. What we really want is to have a separate layout for devices with widths between 480 and 740 px. We can think of these sizes as phablet sizes. Phablets are large phones that are like a small tablet.

4. Let’s make a new media query for these sizes. Back in main.css, before the min-width: 740px media query, add the following media query:

   @media (min-width: 480px) {
   
   }

5. Inside the min-width: 480px media query, add the following rule:

   body {
      background: yellow;
   }

6. Save and preview in a browser. Resize the window so the background is yellow. At this new phablet size we want the Just Announced and Happy Hour content to sit side-by-side.
7. We need to add some HTML that lets us position these elements. Switch to index.html in your code editor.

8. Let’s add a class of tout. These are kind of like ads but not for a different service, so that’s why we are calling them touts. As shown below, add a tout class to both divs:

   <div class="tout module">
      Just Announced
   </div>
   <div class="tout module">
      Happy Hour
   </div>

9. Save the file.
10. Switch to main.css.

11. We want these to float next to each other and take up a 50% width. We just saw how these divs also have the module class, so once again we’ll need to use calc to compensate for their margin. Inside the min-width: 480px media query, after the body rule, add the following code:

    .tout {
       float: left;
       width: calc(50%—20px);
    }

12. Save the file.
13. Preview index.html in a browser.
14. At the yellow background size, notice that the touts are floating next to each other, but now the Email Signup section is coming up into the gutter between them. Let’s tell the Email Signup section to clear the floats.
15. Switch to index.html in your code editor
16. Find the div containing Email Signup, around line 31.

17. We need a way to target it with CSS, so add an email-signup class as shown below:

    <div class="email-signup module">
       Email Signup
    </div>

18. Save the file.
19. Switch to main.css.

20. Inside the min-width: 480px media query, find the .tout rule (around line 34). After that rule, add the following code:

    .email-signup {
       clear: both;
    }

21. Save the file.

22. Preview index.html in a browser. That looks good, but resize the window to see the tablet styles (green). The behavior we just added for our touts is carried over to the next breakpoint, unfortunately. Let’s fix this by creating a new media query that specifically targets phablets, nothing smaller or larger.

23. Switch to main.css.

24. Before the min-width: 740px media query, add the following new media query. Pay close attention to where it says min versus max!

    @media (min-width: 480px) and (max-width: 739px) {
    
    }

25. In the min-width: 480px media query, cut both the .tout and .email-signup rules.

26. Paste them inside the new min-width: 480px and max-width: 739px media query so you end up with the following:

    @media (min-width: 480px) and (max-width: 739px) {.tout {
          float: left;
          width: calc(50%—20px);
       }.email-signup {
          clear: both;
       }
    }

27. Save and preview in a browser. Resize the window to see the phablet styles (yellow) and tablet (green). The touts (Just Announced and Happy Hour) should only be in two columns for phablets (yellow).

Hiding the Slideshow

We want the slideshow hidden on the mobile version. Let’s write a media query for screens with a max-width of 479px that we can hide the slideshow in.

1. In index.html, as shown below, add a class of slideshow to the Slideshow content:

   <div class="slideshow module">
      Slideshow
   </div>

2. In main.css, before the min-width: 480px media query, add a new max-width media query:

   @media (max-width: 479px) {
   
   }

3. Inside the media query you just added, add the following to hide the slideshow:

   @media (max-width: 479px) {
      .slideshow {
         display: none;
      }
   }

4. Save and preview in a browser. The slideshow should no longer be visible on the red background mobile styles, but visible at all other sizes.