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

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