Retrofitting with AWD

Unlike RWD where the widths are fluid and elastic (ems and percentages), hence the term relative units, in AWD, the widths are fixed (pixels). Hence, we use the term absolute units and elements will snap to these fixed widths when we resize our browser window.

In AWD, we use pixels for practically every width, even our media queries.

Creating the styles.scss file

The first thing we're going to do in the styles.scss file is to import the partial _980gs.scss file:

//Retrofitting with Adaptive Web Design
@import "980gs";

Then, we're going to include our simple desktop-first mixin to handle the media queries. However, remember I mentioned before how this is mixin is scalable and we could make it compile pixel-based values if we wanted to? All we need to do is remove the value /16+em from the division $media/16+em:

//Retrofitting with Adaptive Web Design
@import "980gs";

//Desktop-first Media Query Mixin
@mixin forSmallScreens($media) {
    @media (max-width: $media) { @content...