PART 1.2.2 – Styles

CSS – Cascading Style Sheets

All Magento modules come without styles (less files), all Magento styles come from theme (blank and luma).

• \web\css\source:

  • Configuration less files consider all theme styles, mostly mixins,and invoke global elements from the Magento UI library
  • _theme.less which overrides the default variables values
  • _extend.less which extends the parent theme

• styles-m.less gathers the Magento UI Lib and everything above and compiles the results into plain CSS, considering all general and mobile styles

• styles-l.less is similar to styles-m.less except that it considers only specific styles for desktop

All theme web assets sources such as images, fonts, and media content located in <theme>/web/ are stored under an appropriate folder. During deployment everything is published into a pub/static/ folder. All web assets can be overridden from children themes.

Location of LESS Resources

Directory, relative to app/design/frontend/Magento/<theme>

Description

/web/css

Contains the following:

• print.less: Used to generate styles for the printed version of store pages.

• _styles.less: A composite file, which includes all LESS files used in the theme. The underscore sign (“_”) in a file name conventionally means that a file is not used independently, but is included in other files.

• styles-m.less: Used to generate mobile-specific styles, includes_styles.less.

• styles-l.less: Used to generate desktop-specific styles, includes_styles.less.

• /source: This subdirectory contains LESS configuration files that invoke mixins from the Magento UI library.

• /source/_theme.less: Overrides the default Magento UI library variables values.

/<Vendor_Module>/web/css

Module-specific styles

 

Basic files for custom theme

Example of custom theme

It is a great part of the documentation – Simple way to customise theme’s styles. Notice, that all your less files are in app/design/frontend/<Vendor>/<theme>/web/css/source/ directory or app/design/frontend/<Vendor>/<Module_Name>/web/css/source/ directory. There is not skin directory anymore. Let’s check some important files.

    1. When you inherit from blank or luma, there is no need for styles-l.less or styles-m.less files.
    2. _extend.less is the simplest option when you are happy with everything the parent theme has, but want to add more styles.
    3. _theme.less is used to overwrite existed variables, remember that it overrides the parent _theme.less. Copy all variables you need from the parent _theme.less, including those which will not be changed. 
      It is important part, in other case you will get errors during compilation.
    4. _variables.less is a file with all your custom variables. Don’t define them anywhere else. 
    5. In order to extend specific components, add, for example, _buttons_extend.less and include it in your _extend.less. For instance, my _extend.less looks like
  • @import‘_buttons_extend.less’;
    @import‘_typography_extend.less’;
    @import‘_navigation_extend.less’;


  1. In case you would like to overwrite some of components, just create file, for example, _buttons.less
  2. It is worth to see predefined variables which we can overwrite in _theme.less
  3. Notice, that styles are defined in specific modules. The general styles for framework, you can see in Magento_Theme module, in order to overwrite them create app/design/frontend/<Vendor>/<theme>/Magento_Theme/web/css/source/_module.less. This file will be overwritten, not extented. You should keep structure and overwrite styles for specific modules by copy them to your theme, another example app/design/frontend/<Vendor>/<theme>/Magento_Newsletter/web/css/source/_module.less in order to modify styles for Newsletter.

@magento_import directive

To clarify some specifics for Magento 2 functionality, use the

@magento_import directive.

In compiled styles-m.less and styles-l.less you will see:

magento import

//@magento_import ‘source/_module.less’;

 

After deploying this directive, Magento creates an import process for all of the enabled modules in a static file.

@magento_import is also used for widgets and extends.

magento import

//@magento_import ‘source/_module.less’; // Theme modules

//@magento_import ‘source/_widgets.less’; // Theme widgets

@magento_import is a Magento-specific less directive that enables you to include multiple files by a name pattern. It is used to include files with the same name from the different locations; for example, different modules.

 

blank/web/css/styles-l.less

/**

 * Copyright © 2016 Magento. All rights reserved.

 * See COPYING.txt for license details.

 */

 

//

//  Blank theme desktop styles

//  _____________________________________________

 

//  These desktop styles are additional to mobile

 

//

//  Global lib + theme styles

//  ———————————————

 

@import ‘_styles.less’;

@import (reference) ‘source/_extends.less’;

 

//

//  Magento Import instructions

//  ———————————————

 

//@magento_import ‘source/_module.less’; // Theme modules

//@magento_import ‘source/_widgets.less’; // Theme widgets

 

//

//  Media queries collector

//  ———————————————

 

@import ‘source/lib/_responsive.less’;

 

@media-target: ‘desktop’; // Sets target device for this file

@media-common: false; // Sets not to output common styles

 

//

//  Global variables override

//  ———————————————

 

@import ‘source/_theme.less’;

 

//

//  Extend for minor customisation

//  ———————————————

 

//@magento_import ‘source/_extend.less’;

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s