Responsive Meta Tag

Mobile First

When writing our CSS we should put our defaults at the top to apply to all devices.

These defaults should be focused on MOBILE-sized screens.

We call this mobile-first approach.

• This way, older mobile devices that don't understand the media queries, will still display the default values that are optimized for mobile small screens.

• We will be leveraging the default styles of the elements before adding layouts in the media queries.

CSS Media Queries

Device Widths

Media Queries & Layout

Most semantic HTML elements we use for layout are block level elements. This means by default the contents inside will align vertically one after another like we've seen with other text based elements. HTML adapts to any screen size and we can use this to our advantage to style our layouts for all screen sizes.

One of the best ways to get started building any web application is to iron out the layout components before worrying about what's inside. We can look for common patterns to group in larger boxes. Everything on the web fits into this model.

To simply decouple our layout from other elements its much easier and more efficient to keep these layout elements separate than grouping them together by a class when it might seem redundant to add another div. Adding another div for the layout specific style ensures a more module component.

Let's look at a common layout pattern. Header, content, right sidebar, footer. We can imagine the layout structure will look similar to the image below. The wire frame on the left represents the layout structure smaller screens sizes will render. On the right, when there is enough minimum width to support the content side by side, Float the Main Content and Sidebar Left to each other.

Example

Html

<!-- Header -->
<header class="header">Header</header>

<!-- 
When we float elements
We need a container with clearfix
-->
<div class="container clearfix">

  <!-- Main Content -->
  <section class="main-content">Main Content</section>

  <!-- Sidebar -->
  <aside class="sidebar">Sidebar</aside>
</div>


<!-- Footer -->
<footer class="footer">Footer</footer>

CSS

/*
Properly calculates the height of the containing element with elements floated inside.
*/
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/*
Remove default margin on Body
*/
body{
  margin: 0;
}

/*
Assign a background color to
.header
.main-content
.sidebar
.footer
*/
.header,
.main-content,
.sidebar,
.footer{
  background: #72C2FF;
  margin: 2px 0;
}

/*
Center Components inside
At a max width of
*/
.container{
  max-width: 400px;
  margin: 0 auto;
}


/*
Set visual heights to visualize
*/
.header{
  height: 60px;
}

.main-content{
  height: 160px;
}

.sidebar{
  height: 100px;
}

.footer{
  height: 40px;
}


/*
At 400px wide float the main content and sidebar beside eachother
*/
@media screen and (min-width: 400px){
  .main-content{
    width: 70%;
    float: left;
  }
  .sidebar{
    width: 29%;
    float: right;
  }
}

Tips

• Do not use absolute width.

• Use relatively sized fonts.

• Use the fluid grid and fluid image.