CSS-Responsive Websites and Frameworks

Min-width media queries

A responsive website should be built with min-width media queries. This approach means that our media queries are consistent, readable and minimize selector overrides.

• For most selectors, properties will be added at later breakpoints. This way we can reduce the usage of overrides and resets.
• It targets the least capable browsers first which is philosophically in line with mobile first — a concept we often embrace for our sites
• When media queries consistently “point” in the same direction, it makes it easier to understand and maintain stylesheets.

Avoid mixing min-width and max-width media queries.

Breakpoints

Working with Sass, we can take advantages of mixins and avoid having a ton of different breakpoints. Example of a basic media query mixin with a function to check if the breakpoint we want to use has been defined before:

/// Register devices widths
$devices: (
	mobile-landscape: 480px,
	tablet: 768px,
	tablet-landscape: 1024px,
	laptop: 1280px,
	desktop: 1440px
) !default;
/// Verify that the breakpoint width is listed
///
/// @param {string} $breakpoint - breakpoint name
/// @group mediaqueries
@function get-breakpoint-width($breakpoint) {
	@if map-has-key($devices, $breakpoint) {
		@return map-get($devices, $breakpoint);
	} @else {
		@warn "Breakpoint #{$breakpoint} wasn't found in $devices.";
	}
}
/// Min-width media query
///
/// @param {string} $breakpoint - breakpoint name
/// @group mediaqueries
@mixin at-least($breakpoint) {
	$device-width: get-breakpoint-width($breakpoint);
	@media screen and (min-width: $device-width) {
		@content;
	}
}

Media queries placement

In Sass files, nest the media query or media query mixin within the selector it modifies. Do not create size-based partials (e.g. _1024px.scss, _480px.scss): it will be frustrating to hunt for a specific selector through all the files when we have to maintain the project. Putting the media query inside the selector will allow developers to immediately see all the different styles applied to an element.

Avoid:

@media only screen and (min-width: 1024px) {
	@import "responsive/1024up";
}
.some-class {
	color: red;
}
.some-other-class {
	color: orange;
}
@media only screen and (min-width: 1024px) {
	.some-class {
		color: blue;
	}
}

Prefer:

.some-class {
	color: red;
	@media only screen and (min-width: 1024px) {
		color: blue;
	}
}
.some-other-class {
	color: orange;
}

IE8 and older browser support

We prefer showing a fixed-width non-responsive desktop version to older IE users rather than showing a mobile version.

• Use a breakpoint mixin to target older browsers (See sass-mq and similar).
• Load a different stylesheet for older browsers.

Frameworks

Grids

If a simple grid is needed, define and document placeholders and mixins as needed in a _grid.scss partial. For an example of lightweight grid systems, see Don’t Overthink It Grids.

Our preference is not to use a 3rd party grid system. Too often we are faced with a design that isn’t built on a grid or purposefully breaks a loosely defined grid. Even if the designer had a grid in mind, there are often needs that require more creative solutions. For example: fixed-width content areas to accommodate advertising.

Sometimes a more complex grid sytem is warranted and leveraging a 3rd party library will gain some efficiency. However, keep in mind that by adopting a grid system you are forcing all future collaborators on the project to learn this system. For some sites we will consider the use of popular and well supported grid systems, such as Bourbon Neat or Susy.

Resets

As of August 13th, 2015 10up has taken stewardship of sanitize.css, making it our primary tool for resets. Although we can still consider using normalize.css.