3

I have to create new theme that looks the default Magento Blank theme (other colors, other font). That's why I created a new theme with 1 file less css/source/_theme.less.

This file _theme.less looks like:

// first overwrite all variables    
@font-family__base: "Times";
  // @etc.

    // mobile first
    body {
      background-color: green;
      font-family: @font-family__base;
    }

    // desktop
    @media only screen and (min-width: 768px) {
      body {
        background-color: red;
      }

    }

Technical it works, but it looks not nice :(

In addition, I often have to "!important" many rules, to overrule the Blank Theme, and I hate important-rules.

What is the most correct way to create a proper responsive theme (as tiny as possible)?

1

In css/source/_theme.less override all your variables.

Put your rules in different .less files (override the ones in your parent theme or create your own).

Your sample code might be improved in this way:

Mobile and small screen:

  & when (@media-common = true) {
       body {
          background-color: green;
          font-family: @font-family__base;
        }
    }

Desktop:

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
   body {
     background-color: red;
   }       
}

Override the @screen__m with the value of your breakpoint. The question is a bit long, take a look at the documentation

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.