{"id":1423,"date":"2017-09-23T21:53:34","date_gmt":"2017-09-23T21:53:34","guid":{"rendered":"http:\/\/inchoo.net\/?p=30421"},"modified":"2017-09-23T22:12:56","modified_gmt":"2017-09-23T22:12:56","slug":"why-not-start-using-magento2-ui-library-its-easy-and-fun","status":"publish","type":"post","link":"https:\/\/www.sushilkumar.ind.in\/blog\/magento-2\/why-not-start-using-magento2-ui-library-its-easy-and-fun\/","title":{"rendered":"Why not start using Magento2 UI library, it\u2019s easy and fun"},"content":{"rendered":"<p>Magento2 came with very \u201ccontroversial\u201d frontend architecture approach. We will not discuss that but we will try to explain how to empower current Magento2 UI library to achieve most common frontend task.<span id=\"more-30421\"><\/span><\/p>\n<p>First, what is Magento UI library and where to find it.\u00a0As intro text explain:<\/p>\n<blockquote><p>The Magento UI library is a flexible modular Magento frontend library that is designed to assist Magento theme developers. It employs a set of mixins for base elements to ease frontend theme development and customization. The Magento UI library offers the following characteristics for those who develop or customize Magento themes.<\/p><\/blockquote>\n<p>Ok, sound great, what we can expect from this library? As further text says,<\/p>\n<p>The library provides the ability to customize all of the following user interface elements:<\/p>\n<ul>\n<li>actions-toolbar<\/li>\n<li>breadcrumbs<\/li>\n<li>buttons<\/li>\n<li>components<\/li>\n<li>drop-downs<\/li>\n<li><strong>forms<\/strong><\/li>\n<li>icons<\/li>\n<li>layout<\/li>\n<li>loaders<\/li>\n<li>messages<\/li>\n<li>pagination<\/li>\n<li>popups<\/li>\n<li>ratings<\/li>\n<li>resets<\/li>\n<li>responsive<\/li>\n<li>sections \u2013 tabs and accordions<\/li>\n<li>tables<\/li>\n<li>tooltips<\/li>\n<li>typography<\/li>\n<li>utilities<\/li>\n<li>\u2026<\/li>\n<\/ul>\n<p>Before we proceed, maybe you\u2019ll find usefull our previous posts regarding Magento2\u00a0as <a href=\"http:\/\/inchoo.net\/magento-2\/css-preprocessing-in-magento-2\/\">CSS preprocessing in Magento 2<\/a>, and this can be interesting <a href=\"http:\/\/inchoo.net\/magento-2\/validate-custom-form-in-magento-2\/\">Validate a custom form in Magento 2<\/a>.<\/p>\n<p>Today I will focus on simple task related to customizing\u00a0forms. Look and feel, functionality, validation etc.<br \/>\nFirst, let\u2019s say that we need to locate library documentation. If you already install Magento2 then you can access library documentation pointing browser to<\/p>\n<pre class=\"ish\"><code class=\"language-text\">http:\/\/your-ip-installation-name-whatever\/pub\/static\/frontend\/Sushil\/workshop\/en_US\/css\/docs\/index.html<\/code><\/pre>\n<p>Here you will find documented and structured all documentation related to interface elements.<\/p>\n<div id=\"attachment_30425\" class=\"wp-caption aligncenter\" style=\"width: 770px;\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-30425\" src=\"\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2017\/09\/why-not-start-using-magento2-ui-library-its-easy-and-fun.png\" alt=\"\" width=\"760\" height=\"751\" \/><\/p>\n<p class=\"wp-caption-text\">Magento UI library<\/p>\n<\/div>\n<p>So we have guessed that you have already installed Magento2, sample data, create custom theme, using fallback mechanism, parent theme is blank. We can start with simple tasks.<br \/>\nOpen<\/p>\n<pre class=\"ish\"><code class=\"language-text\">http:\/\/magento2install\/customer\/account\/create\/<\/code><\/pre>\n<p>we will have registration form:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-30426\" src=\"\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2017\/09\/why-not-start-using-magento2-ui-library-its-easy-and-fun-1.png\" alt=\"\" width=\"666\" height=\"745\" \/><\/p>\n<p>Under theme _theme.less files we can start by adding<\/p>\n<pre class=\"ish\"><code class=\"language-text\">@form-field-type-revert:block;<\/code><\/pre>\n<p>Save, compile and we will have this:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-30427\" src=\"\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2017\/09\/why-not-start-using-magento2-ui-library-its-easy-and-fun-2.png\" alt=\"\" width=\"659\" height=\"885\" \/><\/p>\n<p>This is globally for all forms switched from inline to block label and then input field. Same thing goes if you want to change color, border, fonts, just follow documentation where all possible variables are listed.<\/p>\n<p>Nice feature that is really simple to get forms in columns. We will use same register form and create two columns.<\/p>\n<pre class=\"ish\"><code class=\"language-text\">.form-create-account{ .fieldset { .lib-form-fieldset(); &gt; .field { .lib-form-field( @_column: true, @_column-number:2 ); } }\r\n}<\/code><\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-30429\" src=\"\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2017\/09\/why-not-start-using-magento2-ui-library-its-easy-and-fun-3.png\" alt=\"\" width=\"669\" height=\"700\" \/><\/p>\n<p>We can change color of Form field label and Label \u201crequired\u201d asterisk<\/p>\n<pre class=\"ish\"><code class=\"language-text\">.form-create-account{ .fieldset { .lib-form-fieldset(); &gt; .field { .lib-form-field( @_label-color:red, @_label-asterisk-color:blue, @_column: true, @_column-number:2 ); } }\r\n}<\/code><\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-30432\" src=\"\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2017\/09\/why-not-start-using-magento2-ui-library-its-easy-and-fun-4.png\" alt=\"\" width=\"683\" height=\"711\" \/><\/p>\n<p>We can try to play with more global variables, for example validation:<\/p>\n<pre class=\"ish\"><code class=\"language-text\">@form-validation-note-icon__use:true;\r\n@form-validation-note-icon__font-color:blue;<\/code><\/pre>\n<p>We can add a custom icon to validation message, color, size etc.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-30434\" src=\"\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2017\/09\/why-not-start-using-magento2-ui-library-its-easy-and-fun-5.png\" alt=\"\" width=\"643\" height=\"782\" \/><\/p>\n<p>This is only a few examples what you can achieve in few minutes if you are following library documentation. As you can see there are tons of things that can be modified and reuse in different places.<\/p>\n<p>I hope that these few short snippets will help you to dive in more in library and start using existing code which can be very helpful on Magento2 projects.<\/p>\n<p>The post Why not start using Magento2 UI library, it\u2019s easy and fun appeared first on Sushil.<\/p>\n<p><a href=\"\/\/www.sushilkumar.ind.in\/custome-devlopment\/\">Do you need any custome Development Click here and fill the form with full your requirement<\/a> and after i will send the quotes of your work requirements.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Magento2 came with very &#8220;controversial&#8221; frontend architecture approach. We will not discuss that but we will try to explain how to empower current Magento2 UI library to achieve most common frontend task. First, what is Magento UI library and where to find it.\u00a0As intro text explain: The Magento UI library is a flexible modular Magento&#8230;<br \/>\nThe post Why not start using Magento2 UI library, it&#8217;s easy and fun appeared first on Inchoo. Do you need any custome Development Click here and fill the form with full your requirement  and after i will send the quotes of your work requirements&#8230;.<\/p>\n","protected":false},"author":1,"featured_media":1424,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[225,20,226,227,229],"tags":[230,22,231,232,233,234],"class_list":["post-1423","post","type-post","status-publish","format-standard","has-post-thumbnail","","category-frontend","category-magento-2","category-magento2","category-magento2-custom-theme","category-ui-library","tag-frontend","tag-magento-2","tag-magento2","tag-magento2-custom-theme","tag-magento2-theme","tag-ui-library"],"jetpack_publicize_connections":[],"acf":[],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2017\/09\/why-not-start-using-magento2-ui-library-its-easy-and-fun.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p99pkJ-mX","_links":{"self":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/posts\/1423"}],"collection":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/comments?post=1423"}],"version-history":[{"count":0,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/posts\/1423\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/media\/1424"}],"wp:attachment":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/media?parent=1423"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/categories?post=1423"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/tags?post=1423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}