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)?

user3310748
  • 311
  • 3
  • 9
  • 2
    Without sounding like an arse it looks like you need to read the dev docs, they go through this in better detail than anyone can here. If you try and do some front-end work without having a good understand of themes in Magento 2 you'll only cause more problems for yourself. I recommend reading through this page at the very least - http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/themes/theme-create.html – Ben Crook Mar 13 '17 at 21:04
  • I have read that documentations and they write about overwriting/extending a less/css file (http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/css-guide/css_quick_guide_approach.html) but I cannot find an answer for my question... (My question is not a technical question (because technical it works) but about the best method...) – user3310748 Mar 13 '17 at 21:12
  • take a quick look at these posts: http://magento.stackexchange.com/questions/163836/override-less-file/163840#163840 and http://magento.stackexchange.com/questions/158070/magento-2-overriding-css-without-using-important-everywhere/159113#159113 – circlesix Mar 13 '17 at 21:54

1 Answers1

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

nuovecode
  • 644
  • 5
  • 19