Design Your Theme In Magento 2

Design in Magento 2.0 is entirely different as compared to Magento 1 due to its architecture and the introduction of .less files. But this blog will make everything easy for you and will explain in detail the procedure of creating custom theme and design in Magento 2.0 using LESS. So, keep reading the blog till the end to get to know the correct process of creating your custom theme in Magento 2.

Now let us advance step by step towards Magento 2 custom theme creation.

 

Creating the required design structure

Start with creating your theme at the following location:

<your Magento installation dir>/app/design/frontend/<vendor>/<theme>

vendor: Your Organization Name / Any Unique Name.

theme: Your Theme Name.

 

a. Declare your theme

After creating a directory for your theme, you must create theme.xml containing at least the theme name and the parent theme name (if the theme inherits from one). Optionally you can specify where the theme preview image is stored. Add or copy from an existing theme.xml to your theme directory.

app/design/frontend/<Vendor>/<theme>

Configure it using the following example:

<theme xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
       <title>New theme</title> <!-- your theme's name -->
       <parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme -->
       <media>
              <preview_image>media/preview.jpg</preview_image> <!-- the path to your theme's preview image -->
       </media>
</theme>

b. Make your theme a Composer package (optional)

Magento 2 default themes are distributed as Composer packages. To distribute your theme as a package, add a composer.json file to the theme directory and register the package on a packaging server. A default public packaging server is https://packagist.org/. “composer.json” provides theme dependency information.

Example of a theme composer.json:

{

    "name": "magento/theme-frontend-luma",

    "description": "N/A",

    "require": {

        "php": "~5.5.0|~5.6.0|~7.0.0",

        "magento/theme-frontend-blank": "100.0.*",

        "magento/framework": "100.0.*"

    },

    "type": "magento2-theme",

    "version": "100.0.1",

    "license": [

        "OSL-3.0",

        "AFL-3.0"

    ],

    "autoload": {

        "files": [

            "registration.php"

        ]

    }

}

c. Add registration.php

To register your theme in the system, add a registration.php file in your theme directory with the following content:

<?php

/**

 * Copyright © 2015 Magento. All rights reserved.

 * See COPYING.txt for license details.

 */

\Magento\Framework\Component\ComponentRegistrar::register(

    \Magento\Framework\Component\ComponentRegistrar::THEME,

    'frontend/<Vendor>/<theme>',

    __DIR__

);

d. Configure images

Product image sizes and other properties used on store-front are configured in the view.xml configuration file. It is required for a theme, but is optional if it exists in the parent theme.

If the product image sizes of your theme differ from those of the parent theme, or if your theme does not inherit from any theme, add view.xml using the following steps:

1. Log in to your Magento 2 server as a user with permissions to create directories and files in the Magento 2 installation directory. (Typically, this is the Magento 2 file system owner)
2. Create the etc directory in your theme folder.
3. Copy view.xml from the etc directory of an existing theme (for example, from the Blank theme) to your theme’s etc directory.
4. Configure all store-front product image sizes in view.xml. For example, you can make the category grid view product images square by specifying a size of 250 x 250 pixels, here is how the corresponding configuration would look like:

...

    <image id="category_page_grid" type="small_image">

        <width>250</width>

        <height>250</height>

    </image>

...

e. Create directories for static files

Your theme will likely contain several types of static files: styles, fonts, JavaScript and images. Each type should be stored in a separate sub-directory of web in your theme folder:

app/design/<area>/<Vendor>/<theme>/

├ web/

│ ├ css/

│ │ ├ source/

│ ├ fonts/

│ ├ images/

│ ├ js/

In the …/<theme>/web/images you store the general theme related static files. For example, a theme logo is stored in …<theme>/web/images. It is likely that your theme will also contain module-specific files, which are stored in the corresponding sub-directories, like …/<theme>/<Namespace_Module>/web/css and similar.

 

Including your new Css

If you want to include .less files in your theme then you can do it by the following steps:

First of all, you need to add your file. So for this you just need to add the simple css file from the following location,

app/design/frontend/<vendor>/<theme>/Magento_Theme/layout/default_head_blocks.xml

Example: <css src="css/custom.css" />

Now you will be thinking that the blog is for including .less files so why we are including .css files. So, the answer is Magento’s built in LESS preprocessing system. Whenever we add any css file in the layouts, LESS preprocessor does the following:

1. Checks if the requested .css file is found. If it is found, the preprocessor stops its execution. Otherwise, it proceeds to the next step.
2. Changes the extension of the requested file to .less and tries to find the file using the Magento fall-back mechanism. If the .less file is not found, LESS preprocessor stops its execution. Otherwise, it proceeds to the next step.
3. Reads .less file contents and resolves @magento_import and default LESS @import directives.
4. Resolves all paths in .less files to relative paths in the system using the Magento fall-back mechanism. All files resolved by the LESS preprocessor are copied to var/view_preprocessed/less. Imported files are processed recursively.
5. All source files are passed to the PHP LESS compiler. The resulting compiled .css files are published to pub/static/frontend/<Vendor>/<theme>/<locale>.

You just need to add the file with .less extension. It will be added and preprocessed by Magento when you deploy the static content.

Here we would like to clear out one confusion that Magento 2.0 supports both: normal Css files and LESS. You can either use LESS to simplify the management of complex CSS files or can directly include a css file and write your css upfront. But using LESS is suggested more, as otherwise you are not using one of the many benefits of Magento 2.

 

LESS in Magento 2.0

Magento 2 supports LESS, a CSS per-processor that simplifies the management of complex CSS files. To define styles of a Magento store, you can use both – CSS and LESS style sheets.

Magento 2.0 application provides a built-in LESS UI library, which you can optionally extend.

To customize store-front styles, you need to create a custom design theme. Then you can use one of the following approaches:

• If your theme inherits from the Magento out-of-the-box Blank or Luma theme, you can override the default LESS files; for example, to change the values of the variables used in the default files. The Whole Magento UI library is located in lib/web/css and .less library files are imported in one _lib.less file using the @import command.
• Create your own LESS files using the built-in LESS per-processor.
• Create your own CSS files, optionally having compiled them using third-party CSS per-processor.

Where Magento stylesheet files are organized ?

Conventionally, CSS and LESS files are stored only in themes. Module directories do not contain any default styles.

web/css/source– this subcatalog contains the LESS configuration files that trigger mixins from Magento UI library

• web/css/source/_theme.less – overrides the default Magento UI library variables values.
• web/css/_styles.less – this is a composite file that includes all LESS files that are used in the theme. The underscore (“_”) in the file name usually means that the file isn’t used separately, but as a part of other files.
• web/css/print.less – this file is used to generate styles for the printed version of saved pages.
• web/css/email.less – this file is used to generate email styles.
• web/css/styles-l.less – it’s used to generate desktop-specific styles using _styles.less.
• web/css/styles-m.less – it’s used to generate mobile styles including _styles.less.

BREAKING IT DOWN FOR BEGINNERS

 

What Is LESS and Why Use It?

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, extendible and as per your theme. We use it as it allows us to use variables, mixins, functions and mathematical operations for creating our CSS files.

 

How to use It in Magento 2.0?

The Best Practice to use the LESS is to Create a new theme, which inherits from the Blank theme as it saves your time and creates an easier experience for developers and designers.

 

Where are the files in the Blank Theme?

• You can find the file at this location /app/design/frontend/Magento/blank/web/css/_styles.less
• now further enter the “/source” directory: here you will find the set of LESS files which are imported to the _style.less using the @import command.
• The _styles.less has the following files included:@import ‘source/lib/_lib.less’; // Global lib@import ‘source/_sources.less’; // Theme styles@import ‘source/_components.less’; // Components styles (modal/sliding panel)

 

Understanding default structure

• First Let’s start with the source directory /app/design/frontend/Magento/blank/web/css/source/. This consists of various .less files and all the .less files are imported to the _sources.less file.
• Now come back to the css directory /app/design/frontend/Magento/blank/web/css/. Here You will find the _styles.less file which has the _sources.less imported into it.

 

The Journey From .LESS file To CSS file in Magento 2.0 ?

• The easiest way to understand the concept behind .LESS file is :
  It is a dynamic style sheet language that can be compiled into Cascading Style Sheets (CSS) and run on the client side or server side.
• It allows you to make CSS that is more maintainable, theme-able and extendible.
• In order to Compile your .less files in Magento 2.0 you need to use compilers like Grunt.
• Magento 2.0 has built-in Grunt tasks configured, but there are still several prerequisite steps you need to take to be able to use it:
• You can find the details about “Installing and configuring Grunt” here : https://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html 

WAIT : Not able to work out your .less via GRUNT, don’t worry there is also way around to it, find it under topic “Compiling Your Theme Files.”

 

How Will You Generate a Custom Css using less?

We have already told you how you will add a custom css to your theme, now how will a custom css generate from a less file and to do this we would like to demonstrate it through an example:

Step 1: Include a Css file for your custom changes and name it any thing according to your requirement, for example we name it: custom.css

Step 2: Now inside your theme under web/css/ create a file names custom.less i.e. web/css/custom.less

Step 3 : Now inside the  web/css/ and parallel to the custom.less create a custom directory which will contain different files in which you have made your custom changes according your theme and even those files which you need to create new, this can contain as many files as you require to make your changes.

It should look like: web/css/custom/_anyfile.less

For Example:

If you need to declare new sets of variables and also make some specific changes to the header section you can create the files like:
_variables.less
_header.less

Step 4 : And now you can import your files into your custom.less using @import
Example: 

@import “custom/_variables.less”;

@import “custom/header.less”;

Step 5: And now when you compile your less file you will find that all the codes from different files onside the custom directory have sampled down into one single file which is custom.css

 

Compiling Your Theme Files

If You have .less files in your theme, then you have to compile those files to generate the corresponding .css files. You can do it via multiple ways like using grunt etc. But we’ll tell you the most common and easiest way which is by “Static Content Deploy“. Whenever you make changes in your .less file then you have to flush the existing static content of your theme, which resides at the following location:

>><your Magento install dir>/pub/static/frontend/<vendor>/<theme>/

You have to delete all the content inside this directory. Then Deploy the static content by using following command:

>>php bin/magento setup:static-content:deploy

Once you deploy your static content then your .less file will be compiled at the following location:

>><your Magento install dir>/pub/static/frontend/<vendor>/<theme>/<locale>/css

Both the files i.e. complied .less file as well as its corresponding .css file will be created inside that directory.

NOTE: Every time you make changes in your .less file then you have to repeat the whole process.

With this we come to the end of custom theme creation in Magento 2. Please share your reviews and suggestions regarding this blog. We would be happy to hear from you.

 

Reference Links

For more details please visit the given links:

https://devdocs.magento.com/guides/v2.0/frontend-dev-guide/bk-frontend-dev-guide.html

https://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css-preprocess.html