PART 1.4.4 – Vaimo CMS

Vaimo CMS includes much more functionality for M2 than for M1. 

 

Layout XML and Vaimo CMS

XML containers to create areas that can be used to insert content. 

Add container

<container name=“vaimo-cms-container” label=“Vaimo CMS container” after=“other-element” />

 

Addons to Vaimo CMS

https://bitbucket.org/vaimo/module-widget-background

 

How to find existing widgets? 

All widgets with their own repositories (that follows the naming convention) can be found by searching for them in bitbucket: https://bitbucket.org/vaimo/profile/repositories?search=module-widget-

Add configurations using js mixin

You can easily add simple settings to Vaimo CMS from your theme. A common use case is where you add classes to elements and can then add styling using less.

<theme_location>/requirejs-config.js

requirejs-config.js

/**

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

 * See LICENSE.txt for license details.

 **/

 

var config = {

    “map”: {

        “*”: {

            example: “js/example”

        }

    },

 

    config: {

        mixins: {

            “Vaimo_Cms/js/component/content-editor”: {

                “js/mixins/vcms-styles”: true

            }

        }

    }

};

<theme_location>/web/js/mixins/vcms-styles.js

web/js/mixins/vcms-styles.js

/**

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

 * See LICENSE.txt for license details.

 **/

;define([

    ‘vcms/editor/utils’

], function(utils) {

    ‘use strict’;

 

    var typographyTags = {‘h1’: true, ‘h2’: true, ‘h3’: true, ‘p’: true};

 

    return utils.createWidgetMixin({

        options: {

            styles: {

                //  Typography styles

                ‘text–light’: {

                    label: ‘Light text on dark background’,

                    tags: typographyTags

                },

                ‘text–dark’: {

                    label: ‘Dark text for light backgrounds’,

                    tags: typographyTags

                }

            }

        }

    });

});

Notes

  • Remember to keep naming convention when creating modules, themes and widgets. 
  • encourage other developers to document their widgets in Bitbucket
  • Help improve existing ones – recycling! Ask before creating new modules!
Advertisements

PART 1.4.3 – BEM

BEM at Vaimo

More and more FE devs in Vaimo have started using BEM. Product department have implemented BEM in multiple modules.

There have been requests to Magento to adopt a more BEM like approach as well more on that here: https://alankent.me/2016/10/06/magento-2-css-class-naming-request-for-feedback/ 

BEM at a glance

BEM style naming methodology which allows you effectively scopes your CSS so you only use the cascade then you actually want to.

.block {}

.block__element {}

.block–modifier {}

 

.site-search {} /* Block */

.site-search__field {} /* Element */

.site-search–full {} /* Modifier */

.block represents the higher level of an abstraction or component.

.block__element represents a descendent of .block that helps form.block as a whole.

.block–modifier represents a different state or version of .block.

 

It is a smart way of naming your CSS classes to give them more transparency and meaning to other developers. They are far more strict and informative, which makes the BEM naming convention ideal for teams of developers on larger projects that might last a while.

<form class=”site-search  site-search–full”>

    <input type=”text” class=”site-search__field”>

    <input type=”Submit” value =”Search” class=”site-search__button”>

</form>

PART 1.4.2 – Flexbox

No grid system?

Magento 2 doesn’t come with a grid system like Twitter Bootstrap. A lot of elements does not have a template used as a wrapper instead they are wrapped using a container in xml, for example the header and the footer.

There are some different approaches on how to work without the grid systems but a lot of the current projects are using flexbox for parts of the layout.

Grid systems are implemented by third party modules and Vaimo CMS.

Mixins vs autoprefixer

Magento’s default grunt setup currently doesn’t vendor prefix flexbox, instead this is done by using mixins. Note that not all flexbox properties have a mixin if you’re using Magento’s approach. You don’t need to worry about this if you’re using gulp since our frontend workflow module adds prefixing.

The Magento mixins for flex can be found in lib/web/css/source/lib/_utilities.less  

Flex mixin

.lib-vendor-prefix-display(

    @_value: flex

) {

    display: ~“-webkit-@{_value}”;

    display: ~“-ms-@{_value}box”;

    display: @_value;

}

 

Flexbox Resources

Magento 2.0 uses Flexbox (Flexible Box Layout Module) which lets you to control the size, order and alignment of elements by several axes, as well as distribute free space between elements and do many other things.

In order to learn a little bit more about flexbox we recommend following links.

http://flexboxfroggy.com/

https://philipwalton.github.io/solved-by-flexbox/

https://github.com/philipwalton/flexbugs

PART 1.4.1 – Template inline editing

Source maps is the module which allows you find template in PhpStorm by easily clicking on the element on the site.

Moreover all below modules together allows you to modify template in the browser.

https://bitbucket.org/vaimo/module-template-sourcemaps 

https://bitbucket.org/vaimo/module-theme-builder 

https://bitbucket.org/vaimo/module-template-reloader