Building Responsive Layouts: Redux

tl:dr version

  • new Demo
  • new CodePen
  • GitHub Repo
  • Adjusted codebase to use relative positioning and left floats. No longer using absolute positioning for fixed columns

Thank You for Your Feedback!

I wrote an article about building responsive layouts in December 2013. It has received a lot of traffic and great feedback. But there is a problem with the codebase, and I have a few commenters to thank for noticing the issue. If it wasn’t for the community using the code in their projects and providing feedback, I wouldn’t have noticed the problem. Thank you, readers!

The Problem

A few people responded that they experienced issues with the header and footer not rendering correctly above and below the content area. I looked into it and discovered that that the solution I crafted had a document flow problem; which caused some unforeseen problems in the responsive layout. By using absolute positioning on the fixed column, the element was effectively taken out of the document flow. That means that the HTML document is unaware of the height, width, and any content in that section. Which is why the footer will overlap with the column that is absolute positioned (if that column is taller than the fluid column). See the figure below:

Continue reading

Use jQuery to Mimic nth-child Behavior in IE8

Nth-child pseudo-selectors are a cool way to supercharge your CSS. They do a great job of styling a group of elements that need slight changes based on their order. A popular example of this is a grid system, or any similar list of items.

This works great in modern browsers, but if you are developing sites that need to be compatible with IE8 and below, you’ll find that :nth-child does not work.

You can use an alternate method to :nth-child by explicitly chaining elements together with the ‘+’ selector. This will select adjacent siblings. However, this method does not scale well and will likely break if your list is dynamic. Below is an example:

 ul > li:first-child + li + li { color: red; } /* find the 3rd list item and color it red */ 

 

Instead, use conditional comments in your HTML and leverage jQuery to add IE specific selectors in your CSS to recreate nth-child rules.

 


<!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="css/ie-style.css">
    <script src="scripts/vendor/jquery.min.js"></script>
    <script src="scripts/nth-child-fixer.js"></script>
<![endif]-->

Continue reading

Building a Responsive Two Column Layout

UPDATE #3: A new article has been added that addresses the layout issue with this solution. Please read about the new version of the codebase if you want to avoid the document flow issues found in this tutorial.

UPDATE #2: Added navigation/menu section to the demos. The GitHub repo and CodePen example has been updated.

UPDATE: Based on numerous comments about how to include a footer in the layout, I have added a footer to all examples with accompanying styles. Thank you everyone for your feedback! The GitHub repo and CodePen example have been updated as well.

tl;dr version

  • Demo
  • CodePen
  • Github Repo
  • Use min-width media queries to progressively enhance the layout of the design.
  • Use “box-sizing: border-box” to calculate borders as part of the total width of an element.
  • Use Scott Jehl’s Respond.js polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more).
  • All wireframes were created using Balsamiq Mockups. I highly recommend this tool for making quick wireframes.

Introduction

This tutorial will explain how to create a two column layout with one fixed column and one fluid column. The example is basic, but it can be expanded to have multiple columns, even fluid nested columns. We will start with a mobile first view that consists of the columns stacked on top of each other. We will later add media queries to make the columns sit side by side as screen size allows.

I created this tutorial because there are many examples on how to use a grid framework for responsive layouts, but not enough examples on how to create a custom layout that doesn’t need a full blown grid framework. Those frameworks are wonderful and very educational, but typically I don’t need an entire grid framework. I just need a simple flexible layout. I don’t need the overhead of styles that I won’t use and I have no use for a 12 column grid system.

Let’s imagine a layout that has a fixed right column of 300 pixels wide (or 18.75ems, if you are using 16 pixels as your baseline) and a left column that will be fluid. The left column will be for main content. The right column will be used for sidebar content. A place for ads, links, or other ancillary content.

Continue reading

Readmill API Authentication with oAuth using PHP

Introduction

I started using Readmill on my iPad 3 months ago and have been in love with the app/service ever since.
The minimalist reader makes it very easy to dive right into the book you are reading at the moment. As well as quickly switch in an out of other books in your library. And the social interaction and highlighting features with other Readmillers is quite excellent. You can even import your Kindle library into your Readmill library.

Enough about how awesome Readmill is; check it out if you do a lot of reading on your device. It is definitely worth your time. You’ll love it. It has replaced the Kindle App for me, which is a big deal.

I decided to dive into the Readmill API to see if I could create a web app. However, I was not able to find any PHP flavored examples out there. So I put together an example for anyone looking to do Readmill API oAuth connections using PHP. Here is a link to the  gist.

Continue reading