• .page
  • .container


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.

Up to the smallest size, the layout is fluid, after which, layout is fixed.
Mobile first, full width
width: @screen[md]
width: @screen[lg]
width: @screen[xl]

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.

There is only one breakpoint in the framework for fast prototyping. Creating a more responsive behavior, is project-specific.

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

// Produces font-size: 20px * @resFontFactor or 2 rem * @resFontFactor

// To use with media queries, to produce a class with responsive font size.
.myClass {
.media(lg, {
  .myClass {