Mobile-first, responsive Magento 2 LESS Theme Skeleton

Organise your CSS for a responsive, mobile-first theme allowing size-specific overrides.

- Chris Pook, 13th September 2018

We have spent a long time creating the perfect structure for a responsive, mobile-first LESS theme in Magento 2, and now we give it away to you for FREE! This structure allows you to apply mobile, tablet and desktop specific styles and furthermore target specific mobile phone device sizes for ultimate control and flexibility.

Download Skeleton Theme from GitHub

The folder structure of your CSS files within your theme is broken down like this:

.
└── web
    └── css
        └── source
            ├── _common
            ├── _mobile
            │   └── _xxs
            │   ├── _xs
            │   ├── _s
            │   ├── _m
            ├── _tablet
            ├── _desktop
            ├── _highres
            ├── _extend.less
            ├── _variables_extend.less
            └── vendor
                ├── bootstrap
                │   └── 3.3
                └── font-awesome
                    └── 5.0

Common Styles

The majority of your CSS belongs in web/css/source/_common for your mobile-first theme. These styles will be used for mobile, tablet and desktop, but can be overridden in the specific folders below.

Tablet, Desktop and High Resolution

CSS overrides for tablet, desktop and large screen desktops belong in their corresponding folders web/css/source/_tablet, web/css/source/_desktop and web/css/source/_highres.

Mobile styles

Add mobile styles for all screen sizes in web/css/source/_mobile.

Mobile styles for specific screen sizes

Size-specific mobile styles can be added to the screen size folders, eg. web/css/source/_mobile/_xs for very small screens.

Third party libraries

Add third party library files to web/css/source/vendor/{library}/{version}. We recommend including the version number in the folder structure for clarity and in case multiple versions are required in the future.

Overrides of Magento Blank / Luma

Add variable overrides to the Magento 2 theme in web/css/source/_variables_extend.less

Initial Entry Point (_extend.less)

Finally _extend.less pulls everything together and separates all LESS files by device and screen size.

// Import variables globally
@import "_variables_extend";

// Mobile-first / Common styles
& when (@media-common = true) {
  @import "vendor/bootstrap/3.3/bootstrap";
  @import "vendor/font-awesome/5.0/fontawesome";
  @import "_common/_header";
  @import "_common/_footer";
  @import "_common/_cms";
  @import "_common/_catalog";
}

// Mobile-specific styles
& when (@media-target = 'mobile') {
  // All screen sizes (< 768px)
  @media only screen and (max-width: (@screen__m - 1)) {
    @import "_mobile/_header";
  }

  // XXS (>= 0, < 320px)
  @media only screen and (min-width: 0px) and (max-width: (@screen__xxs - 1)) {
    @import "_mobile/_xxs/_header";
  }

  // XS (>= 320px, < 480px)
  @media only screen and (min-width: @screen__xxs) and (max-width: (@screen__xs - 1)) {
    @import "_mobile/_xs/_header";
  }

  // S (>= 480px, < 640px)
  @media only screen and (min-width: @screen__xs) and (max-width: (@screen__s - 1)) {
    @import "_mobile/_s/_header";
  }

  // M (>= 640px, < 768px)
  @media only screen and (min-width: @screen__s) and (max-width: (@screen__m - 1)) {
    @import "_mobile/_m/_header";
  }
}

// Tablet (>= 768px)
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
  @import "_tablet/_header";
}

// Desktop (>= 1024px)
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
  @import "_desktop/_header";
}

// Large (>= 1440px)
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xl) {
  @import "_highres/_header";
}