Building a Mobile Site: Starting a Mobile Site

This module will take you step-by-step through the generation of a header for a mobile website.

It covers best practices in mobile site design and project structure.

Prerequisites: Mobile Styling

Outline


Creating a Header

Open up the header.ts file in the scripts/sections folder.

Since iGadget already has a #Header element, we can transform that existing element to fit our mobile needs.

If you’re unsure how to use the Chrome Web Inspector, or just need more clarification on the tools we’re using, learn more about our standard Web Development Tools.

Start by scoping into the #Header element and into the #Logo element where we’ll implement the top part of our header mock-up.

If you’re not yet comfortable using selectors, read our documentation on XPath and CSS selectors.

$(".//div[@id='Header']") {
  $("./div[@id='Logo']") {
    # Move top menu into #Logo container

  }
}

Next, we’ll move the content we want in the top part of the header into the #Logo element using the function move_here(). We’ll also remove some of the unwanted elements with some neat XPath tricks.

$("./div[@id='Logo']") {
  # Move top menu into #Logo container
  move_here("../../../div[@id='TopMenu']", "bottom") {
    # Remove unwanted top menu items from upper menu
    remove(".//li[not(contains(@class, 'CartLink') or contains(@class, 'First'))]")
  }
}

Checkpoint 1

Inserting HTML

For the bottom of the header we’re going to insert some structure and move the search and the menu content into that structure.

Here’s the HTML markup that we’re going to use for our header:

<div class="mw_header_bottom">
  <div class="mw_search"></div>
  <div class="mw_menu_btn sprites-menu"></div>
</div>

Close the #Logo scope and use the following code to insert our HTML structure:

# Insert HTML for bottom of header
insert("div", class: "mw_header_bottom") {
  insert("div", class: "mw_search")
  insert("div", class: "mw_menu_btn sprites-menu", data-ur-toggler-component: "button")
}

To use inserted elements, we scope into the markup that we inserted and move elements into that markup.

You may have noticed we added a data-ur-toggler-component attribute to the menu button. That will be explained later in the course, but if you’re curious check out uranium.io.

Scope into the .mw_search element and move in the #SearchForm that we want to use with the move_here() function. Remove any unwanted content.

# Fill search HTML
$("..//div[@class='mw_search']") {
  # Move search form into container element
  move_here("//div[@id='SearchForm']", "bottom") {
    remove("./p")
  }
}

Open the <form> and wrap the image input in a <div> with some classes we’ll use later for styling. Also, add a placeholder to the text input.

# Fill search HTML
$("..//div[@class='mw_search']") {
  # Move search form into container element
  move_here("//div[@id='SearchForm']", "bottom") {
    remove("./p")

    $("./form") {
      remove("./label")
      # Change search button background image
      $("./input[@type='image']") {
        wrap("div", class: "mw_search_btn sprites-search")
      }
      $("./input[@type='text']") {
        attribute("placeholder", "Search...")
      }
    }
  }
}

Styling Example

Finally, close the search scope and make sure we have all the content we want in the menu.

# Move menu items into header
move_here("../div[@id='Menu']", "bottom") {
  attribute("data-ur-toggler-component", "content")
  # Move "Category List" element on bottom of #Menu element
  move_here("../../div[@id='Wrapper']/div[@class='Left']/div[@id='SideCategoryList']", "bottom")
  $$("li") {
    add_class("mw_bar2")
  }
}

If you’re running the server, you’ll see that all the links and other elements we want to use are in the correct place (right at the top of the page, inside our header element). However … they’re not styled! Let’s move onto our stylesheets to get that sorted out.


Applying Styles

Go to the stylesheet _header.scss in assets/stylesheets/sections (you can overwrite anything that is already there).

Here are some sample styles that might help you get started.

#Header {
  border-top: 1px solid black;
  #Logo {
    @include background(linear-gradient(#C14102 0, shade(#C14102, 20%) 100%));
    h1 {
      margin: 0;
      padding: 10px;
      a {
        font-size: 22px;
        text-shadow: 0 -1px rgba(0,0,0,0.9);
        color: white;
      }
    }
  }
  .mw_header_bottom {
    width: 100%;
    display: block;
    @include background(linear-gradient(top, #852201, #6a1b00));
    .mw_search {
      display: inline-block;
      width: 75%;
      position: relative;
      input[type='text']{
        border: 1px solid black;
        background-color: #f1f0f0;
        font-size: 13px;
        padding: 4px;
        height: 23px;
        margin: 0;
        width: 100%;
        display: block;
      }
      .mw_search_btn {
        height: 33px;
        position: absolute;
        top: 0;
        right: -13px;
      }
    }
    .mw_menu_btn {
      float: right;
      display: block;
      &[data-ur-state="enabled"] span {
        @extend .sprites-menu-on;
      }
    }
  }
}

Checkpoint 3

Although these styles will get you started, you really want to make sure that you’re implementing the Style Guide from the previous lesson.

Go to your Style Guide and do the following:

With a bit more styling you might end up with something like this:

Checkpoint 3

Repeat the above process for creating the footer.

This should be much easier because the content in the footer should be mostly plain text.