Core concepts #

• The fundamental elements of responsive design are breakpoints. Use these to determine which viewports or device sizes the layout can be modified.

• To structure the CSS by breakpoint, use media queries. Media queries are a CSS feature that lets to apply styles only when specific browser and operating system conditions are met. There is min-width in the media queries the most frequently.

• The objective is to design with mobile users in mind. The CSS used by UX4G seeks to use the fewest possible styles to make a layout function at the smallest breakpoint before adding more styles to adapt the design for larger devices. This makes the CSS more efficient, speeds up rendering, and gives the visitors a wonderful experience.

Available breakpoints #

Six preset breakpoints, sometimes known as "grid tiers," are provided by UX4G to help developers create responsive designs. The source Saas files can be used to modify these breakpoints.

Each breakpoint was selected to hold containers with widths that are multiples of 12 comfortably. Breakpoints do not directly target any use cases or devices; rather, they are representative of a subset of common device sizes and viewport widths. Instead, the ranges offer a solid and reliable basis on which almost any device can be built.

These breakpoints can be customized using Sass; which you can find in Saas map in the _variable.scss stylesheet

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);
                                        

Please see [the Sass portion of the Grid documentation] Sass for more details and examples on how to modify the Sass variables and maps.

Media queries #

Since UX4G is developed with mobile users in mind first, there is a use of few media queries to provide logical breakpoints for the layouts and interfaces. These breakpoints allow to scale up elements when the viewport changes and are mostly dependent on minimal viewport widths.

Min-width #

For our layout, grid system, and components, UX4G generally uses the following media query ranges, or breakpoints, in our source Sass files.

 // Source mixins

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}
                                        

These Sass mixins translate in our compiled CSS using the values declared in our Sass variables. For example:

Max-width #

We occasionally use media queries that go in the other direction (the given screen size or smaller)

These mixins take those declared breakpoints, subtract .02px from them, and use them as our max-width values. For example:

// `xs` returns only a ruleset and no media query
// ... { ... }

// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }
                                        

CAUTION

Single breakpoint #

There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(xxl) { ... }
                                        

For example the @include media-breakpoint-only(md) { ... } will result in :

@media (min-width: 768px) and (max-width: 991.98px) { ... }

Between breakpoints #

Similarly, media queries may span multiple breakpoint widths:

@include media-breakpoint-between(md, xl) { ... }

Which results in:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }