Breakpoints

We try to follow mobile first approach as it has been proven it generates less code an is easier to maintain. When creating a mobile layout it is usually a single column stack with margins and padding, which is already native for HTML elements. On the other hand, deskotop layouts are more complex with flexbox and grid, which deviates form native HTML layout.

Deciding on a specific list of breakpoints can be a subjective topic.
In favor of standardization throughout our projects, here is the proposed list of breakpoints:

SCSS

$site-breakpoints: (
	phablet: 600px,
	tablet: 768px,
	laptop: 1024px,
	desktop: 1200px,
	large: 1400px,
);

Use the following mixins to write media queries based on the enum above.

// Makes the @content apply to the given breakpoint and wider.
@include media-breakpoint-up();

// Makes the @content apply to the given breakpoint and narrower.
@include media-breakpoint-down();

// Makes the @content apply between the min and max breakpoints
@include media-breakpoint-between();

// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
@include media-breakpoint-only();

Example

@include media-breakpoint-up(tablet) {
  body { font-size: 87%; }
}

Resolutions

Bellow is the table with the most common device screen resolutions. For more details refer to CSS Media Query Breakpoints.

• Configuration
• Style