PART 1.2.2.2 – Icons

In order to add icons I would recommend to use IcoMoon. Add icons as font rather than images. In order to generate font, you will need to have icons in svg fill format, please, see the documentation how to convert strokes to fill. The next step is to upload and select icons, generate font and add to the project app/design/frontend/<Vendor>/<theme>/web/fonts/

Notice, that you will need to generate woff2 version as it is not included in IcoMoon zip, use some online convertors.

The next step is to create _typography_extend.less file with following content:

 

_typography_extend.less

//

// Copyright © 2009-2017 Vaimo Group. All rights reserved.

// See LICENSE.txt for license details.

//

  

body {

 .lib-font-face(

    @family-name:’Icomoon’,

    @font-path: ‘@{baseDir}fonts/icomoon/icomoon’,

    @font-weight: @font-weight__light,

    @font-style: normal

 )

}

 

Notice that @font-weight__light is already defined. fonts/icomoon is directory where you can find font files named icomoon.xxx in different formats. All font files should have the same name. 

Remember to add_typography_extend.less  to _extend.less file.

As Magento2 has already icons as font, you will need to overwrite current icon font in _theme.less by adding following lines:

_theme.less

//

//  Icons

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

@icons__font-path: “@{baseDir}fonts/icomoon/icomoon”;

@icons__font-name: ‘icomoon’;

@icon-font__size: 2.2rem;

 

 

Notice that all new icons variables should be defined in _variables.less file. 

 

_variables.less

//

//  Icons

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

@icon-fb: ‘\e900’;

@icon-twitter: ‘\e904’;

@icon-yt: ‘\e905’;

<rdf:RDF xmlns:rdf=”http://www.w3.org/1999/02/22-rdf-syntax-ns#&#8221; xmlns:dc=”http://purl.org/dc/elements/1.1/&#8221; xmlns:trackback=”http://madskills.com/public/xml/rss/module/trackback/”&gt; <rdf:Description rdf:about=”https://confluence.vaimo.com/display/CD/PART+1.2.2.2+-+Icons&#8221; dc:identifier=”https://confluence.vaimo.com/display/CD/PART+1.2.2.2+-+Icons&#8221; dc:title=”PART 1.2.2.2 – Icons” trackback:ping=”https://confluence.vaimo.com/rpc/trackback/29884549″/&gt; </rdf:RDF>

Advertisements

PART 1.2.2.1 – UI library

Mixin

A mixin is a class that contains a combination of methods from other classes.

The Magento UI library source files are stored under the source directory.

The Magento UI library documentation is stored under the docs directory:

  • lib/web/css/docs/source/README.md: Describes the Magento UI library structure, naming conventions, and code style.
  • lib/web/css/docs: Contains a set of .html files with detailed information about the library mixins. Each file is named after the mixin it describes, and contains a detailed mixin description and navigation controls to access documentation for other mixins.
  • The documentation is available in a convenient HTML view in the following location in your Magento installation: pub/static/frontend/Magento/blank/en_US/css/docs/index.html

UI Library

The library provides the ability to customize all of the following user interface elements:

• actions-toolbar

• breadcrumbs

• buttons

• components

• drop-downs

• forms

• icons

• layout

• loaders

• messages

• pagination

• popups

• ratings

• resets

• responsive

• sections – tabs and accordions

• tables

• tooltips

• typography

• utilities

• list of theme variables

 You can find the Magento UI library under lib/web/css.

Library source.less files are stored under the source directory.

Each file contains mixins for configuring a certain element, and in most cases the element coincides with the file name.

Here are some documentation links.

UI library elements:

 http://magento installation>/pub/static/frontend/Magento/blank/en_US/css/docs/index.html

Typopgraphy information:

 http://magento installation>/pub/static/frontend/Magento/blank/en_US/css/docs/typography.html

You can also look up documentation for each element – for example, buttons:

 http://magento installation>/pub/static/frontend/Magento/blank/en_US/css/docs/buttons.html

 

Exercise 5.0

Overwrite button’s colour and link’s colour on your site.

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’;