Journey Into Mobile - Level 2

Notes from Code School's Journey Into Mobile - Level 2 (Fluid Layouts)

Fluid Layouts: Layouts that scale to the size of the viewport
Fixed Layouts: Layouts that are static

What makes a fluid site?

- Fluid Grid: The grid is a series of same-size columns spaced apart evenly across the page. This helps make the design more legible to the user and better organized for the designer.

fluid grid

- Relative Values (percentages): When you resize the viewport, each element remains the same size relative to everything else.

left: static layout, right: fluid layout

Converting a Fixed Layout to a Fluid One

target ÷ context = result

The example site we will be working with:
- a main <div> called .site

- a sidebar <div> called .sidebar

- and a content <div> called .content

The Main Site Area

html:
<div class="site"></div>

css (static layout):
.site {
  margin: 40px auto;
  width: 940px;
}

The main .site area currently has a fixed width, there is nothing wrong with fixed width sites, but they don't scale with the viewport. Instead of 940px, we need to set this as a percentage. When talking about the main site container there is not a magic formula to determine the proper percentage, its really a matter of trial and error, because you want to make sure the design looks good in the browser.

css (fluid layout)
.site {
  margin: 40px auto;
  width: 90%;
}

At the smaller viewport size, this conversion does not make a difference, but as you scale it, things change. The site is no longer centered in the browser, everything is flush left. This is because the main site container is scaling at 90%, but the rest of the site is still static.

regular viewport view

expanded viewport view

Now to convert the other elements:

Sidebar

Our sidebar layout in html:

<section class="sidebar">

  <header></header>

 <nav>

    <ul class="menu>

    </ul>

  </nav>

  <footer></footer>

</section>

styles:

.sidebar {

  float: left;

  text-align: center;

  width: 305px;

}

To change our 305px width to a percentage, use the target ÷ context = result formula.

305px ÷ 940px = 0.32446809

305px = our .sidebar width
940px = the width of .sidebar's parent container (.site)

0.32446890*100 = 32.446890%

There is no need to round the percentages up or down as we want to be precise.

New fluid styles:

.sidebar {

  float: left;

  text-align: center;

  width: 32.446890%;  /* 305px/940px */

}

Now that our sidebar element has a relative size, but the content section does not, the sidebar creeps into the content section. Let's fix this.

.sidebar and .site fluid, .content fixed

html of content section:
<section class="content">
  <aside></aside>
  
  <p></p>

  <footer class="stapleton">
    <div class="bio">
    </div>
  </footer>
</section>

styles (fixed layout):
.content {
  background-color: #fff;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3);
  margin-left: 325px;
  padding: 20px;
  width: 590px;
}

In this case, we will need to change the margin, padding and width to a percentage value for relative sizing.

Width

target ÷ context = result
590px ÷ 940px = 0.62765957 or 62.765957%

590px = .content width
940px = width of parent container (.site)

Our styles so far:
.content {
  background-color: #fff;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3);
  margin-left: 325px;
  padding: 20px;
  width: 62.765957%;  /* 590px/940px */
}

Flexible Margins

When setting flexible margins on an element, your context is the width of the element's container. - Ethan Marcotte (Responsive Web Design, 35)

target ÷ context = result
325px ÷ 940px = .34574468 or 34.574468%

325px = width of margin-left
940px = width of parent container (.site)

Our styles so far:
.content {
  background-color: #fff;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3);
  margin-left: 34.574468%;  /* 325px/940px */
  padding: 20px;
  width: 62.765957%;  /* 590px/940px */
}

Flexible Padding

When setting flexible padding on an element, your context is the element itself. -Ethan Marcotte (Responsive Web Design, 35)

This makes sense when you think about the box model, because with margin you're dealing with the space outside an element and with the padding you're dealing with the space inside an element.

The box width will be the context for our flexible padding:
target ÷ context = result
20px ÷ 590px = .03389830 or 3.389830%

20px = width of margin-left
590px = width of parent container (.content)

Our new flexible styles:
.content {
  background-color: #fff;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3);
  margin-left: 34.574468%;  /* 325px/940px */
  padding: 3.389830%;  /* 20px/590px */
  width: 62.765957%;  /* 590px/940px */
}

Now the site scales based on the size of the viewport.

fluid layout expanded viewport

fluid layout contracted viewport