Responsive

in LESS

The following functions are available in LESS to create media queries.

// Create @media only screen and (min-width: @screen[md])
.media(md, {
  // applies to screen size 720px and above
});

// Create  @media only screen and (max-width: @screen[md])
.mediamax(md, {
  // applies to screen size 720px and below
});

The media variables (md) is part of the variables defined in @screen collection, by default it looks like this:

// breakpoints
@screen: {
  xs: 480px; // special cases
  sm: 600px; // mobile interface
  md: 720px; // tablet portrait
  lg: 960px; // the usual desktop and landscape tablets
  xl: 1280px; // more popular small desktop
  ds: 1600px; // up above desktop
};

You can add more breakpoints, and start using it with media functions, or change the values.

Page layout

By default, .page is defined for three break points, in addition to the default (mobile first). To control padding inside page, wrap content with .container element, to control padding, customize @mainpad variable.

Responsive font size

By default, at screen width md, the font is scaled by @resFontFactor factor. To switch that off, set @enable-res-fonts to false.

The following function is availbale in LESS when @enable-res-fonts is set to true

// Produces font-size: 20px * @resFontFactor or 2 rem * @resFontFactor
#rem>.res-font-size(2);

// To use with media queries, to produce a class with responsive font size.
.myClass {
  #rem>.font-size(2);
}
.media(lg, {
  .myClass {
    #rem>.res-font-size(2);
  }
});