Magento 2 – Different Styles for Different Languages Using Frontools

In one of the recent Magento 2 projects, we came across the problem of different designs of page elements for different language versions. Luckily, Frontools did the trick (source: https://github.com/SnowdogApps/magento2-frontools).
Today, we will not dwell on the entire configuration, but rather focus on tips on replacing files for a given language version.

The configuration file themes.json

The first thing we need to focus on is the localeOverwrites variable.
We need to make sure it’s set to true.

"localeOverwrites": true,

The next step is setting locale.
In our case, there is an English and a French language version of the store.

"locale": ["en_US", "fr_FR"]

The entire themes.json file is the following:

{
  "blank": {
      "src"    : "vendor/snowdog/theme-blank-sass",
      "dest"   : "pub/static/frontend/Snowdog/blank",
      "locale" : ["en_US", "fr_FR"],
      "lang"   : "scss",
      "postcss": ["plugins.autoprefixer()"]
    },
  "magently": {
      "src"             : "app/design/frontend/Magently/magently",
      "dest"            : "pub/static/frontend/Magently/magently",
      "parent"          : "blank",
      "locale"          : ["en_US", "fr_FR"],
      "localeOverwrites": true,
      "lang"            : "scss",
      "postcss"         : ["plugins.autoprefixer()"],
      "sprites"         : true
  }
}

The catalog structure

Another crucial point is the folder structure.
For basic styles, it goes like this (en_US):

+ app/
+--+ design/
   +--+ frontend/
      +--+ Magently/
         +--+ magently/
            +--+ styles/
               +--+ layout/
               |  +--- _header.scss
               |  +--- _footer.scss
               |  +--- _main.scss
               |  +--- _form.scss
               |  +--- (...)
               |
               +--- styles.scss

Let’s assume that in the French version the header and the footer have a totally different look.
Instead of providing different styles for some elements of the French version with CSS (i.e. using the [lang=”fr_FR”] selector), we can overwrite the components we’re interested in. In order to overwrite both files upon the compilation, we need to create the structure:

+ app/
+--+ design/
   +--+ frontend/
      +--+ Magently/
         +--+ magently/
            +--+ i18n/
               +--+ fr_FR
                  +--+ styles/
                     +--+ layout/
                        +--- _header.scss
                        +--- _footer.scss
                        +--- (...)

Please note that after removing i18n and {lang_code} (in this case i18n/fr_FR), we’d end up with exactly the same structure of folders and files.

app/design/frontend/Magently/magently/i18n/{lang_code}/styles…
app/design/frontend/Magently/magently/styles…

Launching Gulp

Having executed the above actions, all we need to do is deploy our localized styles by running gulp deploy. The compiled styles for the French version will differ from the English ones only in the changes of components included in i18n/{lang_code} folder.
This article was initially based on version 1.1 and updated for 1.4. Frontools is constantly being updated and configuration format may change in further versions. If you find anything in this article become outdated please let us know in the comments.