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

At Absolute Commerce, we spent a long time creating the perfect structure for a responsive, mobile-first LESS theme in Magento 2. 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 the 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/_tabletweb/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";
}

Photo by Nick Karvounis on Unsplash.
Article originally published on the Absolute Commerce website.

Published by Joseph McDermott

A certified Magento solution specialist with eleven years experience leading ecommerce development projects, converting complex problems into elegant technical solutions.

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.