diff --git a/src/js/_components/_ui.form.basics.js b/src/js/_components/_ui.form.basics.js
index 65e405c..a5fd888 100755
--- a/src/js/_components/_ui.form.basics.js
+++ b/src/js/_components/_ui.form.basics.js
@@ -3,7 +3,7 @@ import $ from 'jquery';
 //import 'bootstrap-select/dist/js/bootstrap-select';
 //$.fn.selectpicker.Constructor.BootstrapVersion = '4';
 import select2 from 'select2/dist/js/select2.js';
-import Inputmask from 'inputmask';
+//import Inputmask from 'inputmask';
 
 //import select2 from 'jquery.inputmask/dist/jquery.inputmask.bundle';
 
@@ -11,125 +11,125 @@ import Events from '../_events';
 import SpinnerUI from './_ui.spinner';
 import FormFieldUI from './_ui.form.fields';
 
-const FormBasics = (($) => {
-  // Constants
-  const NAME = 'jsFormBasics';
-  const DATA_KEY = NAME;
-  const $Html = $('html, body');
-  const W = window;
-  const D = document;
+const FormBasics = ($ => {
+	// Constants
+	const NAME = 'jsFormBasics';
+	const DATA_KEY = NAME;
+	const $Html = $('html, body');
+	const W = window;
+	const D = document;
 
-  class FormBasics {
-    constructor(el) {
-      const ui = this;
-      const $el = $(el);
+	class FormBasics {
+		constructor(el) {
+			const ui = this;
+			const $el = $(el);
 
-      ui._el = el;
-      $el.data(DATA_KEY, this);
+			ui._el = el;
+			$el.data(DATA_KEY, this);
 
-      //$('[data-inputmask]').inputmask();
+			//$('[data-inputmask]').inputmask();
 
-      const $fields = $el.find(Events.FORM_FIELDS);
-      // init fields ui
-      $fields.each((i, el) => {
-        // skip some fields here
-        new FormFieldUI(el);
-      });
+			const $fields = $el.find(Events.FORM_FIELDS);
+			// init fields ui
+			$fields.each((i, el) => {
+				// skip some fields here
+				new FormFieldUI(el);
+			});
 
-      const $selectFields = $el.find('select:not([readonly])');
-      const $radioOptions = $el.find('input[type="radio"]');
+			const $selectFields = $el.find('select:not([readonly])');
+			const $radioOptions = $el.find('input[type="radio"]');
 
-      $selectFields.each((i, el) => {
-        $(el).select2();
-      });
+			$selectFields.each((i, el) => {
+				$(el).select2();
+			});
 
-      $fields.each((e, el) => {
-        const $el = $(el);
+			$fields.each((e, el) => {
+				const $el = $(el);
 
-        if ($el.hasClass('required') || $el.attr('aria-required')) {
-          $el.closest('.field').addClass('required');
-        }
-      });
+				if ($el.hasClass('required') || $el.attr('aria-required')) {
+					$el.closest('.field').addClass('required');
+				}
+			});
 
-      $radioOptions.each((e, el) => {
-        const $el = $(el);
+			$radioOptions.each((e, el) => {
+				const $el = $(el);
 
-        if ($el.is(':checked')) {
-          $el.parents('.radio').addClass('checked');
-        }
-      });
+				if ($el.is(':checked')) {
+					$el.parents('.radio').addClass('checked');
+				}
+			});
 
-      $radioOptions.on('change', (e) => {
-        const $el = $(e.currentTarget);
-        const $parent = $el.parents('.radio');
+			$radioOptions.on('change', e => {
+				const $el = $(e.currentTarget);
+				const $parent = $el.parents('.radio');
 
-        $parent.siblings('.radio').each((i, el) => {
-          const $el = $(el);
+				$parent.siblings('.radio').each((i, el) => {
+					const $el = $(el);
 
-          if (!$el.find('input').is(':checked')) {
-            $el.removeClass('checked');
-          }
-        });
+					if (!$el.find('input').is(':checked')) {
+						$el.removeClass('checked');
+					}
+				});
 
-        if ($el.is(':checked')) {
-          $parent.addClass('checked');
-        }
-      });
+				if ($el.is(':checked')) {
+					$parent.addClass('checked');
+				}
+			});
 
-      $el.on('submit', (e) => {
-        SpinnerUI.show();
-      });
+			$el.on('submit', e => {
+				SpinnerUI.show();
+			});
 
-      $el.addClass(`${NAME}-active`);
-      $el.trigger(Events.FORM_INIT_BASICS);
-    }
+			$el.addClass(`${NAME}-active`);
+			$el.trigger(Events.FORM_INIT_BASICS);
+		}
 
-    // Public methods
-    dispose() {
-      const $el = $(this._el);
+		// Public methods
+		dispose() {
+			const $el = $(this._el);
 
-      const $selectFields = $el.find('select:not([readonly])');
-      $selectFields.each((i, el) => {
-        $(el).select2('destroy');
-      });
+			const $selectFields = $el.find('select:not([readonly])');
+			$selectFields.each((i, el) => {
+				$(el).select2('destroy');
+			});
 
-      $el.removeClass(`${NAME}-active`);
-      $.removeData(this._el, DATA_KEY);
-      this._el = null;
-    }
+			$el.removeClass(`${NAME}-active`);
+			$.removeData(this._el, DATA_KEY);
+			this._el = null;
+		}
 
-    static _jQueryInterface() {
-      return this.each(() => {
-        // attach functionality to el
-        const $el = $(this);
-        let data = $el.data(DATA_KEY);
+		static _jQueryInterface() {
+			return this.each(() => {
+				// attach functionality to el
+				const $el = $(this);
+				let data = $el.data(DATA_KEY);
 
-        if (!data) {
-          data = new FormBasics(this);
-          $el.data(DATA_KEY, data);
-        }
-      });
-    }
-  }
+				if (!data) {
+					data = new FormBasics(this);
+					$el.data(DATA_KEY, data);
+				}
+			});
+		}
+	}
 
-  // jQuery interface
-  $.fn[NAME] = FormBasics._jQueryInterface;
-  $.fn[NAME].Constructor = FormBasics;
-  $.fn[NAME].noConflict = function() {
-    $.fn[NAME] = JQUERY_NO_CONFLICT;
-    return FormBasics._jQueryInterface;
-  };
+	// jQuery interface
+	$.fn[NAME] = FormBasics._jQueryInterface;
+	$.fn[NAME].Constructor = FormBasics;
+	$.fn[NAME].noConflict = function() {
+		$.fn[NAME] = JQUERY_NO_CONFLICT;
+		return FormBasics._jQueryInterface;
+	};
 
-  const init = () => {
-    $('form').jsFormBasics();
-  };
+	const init = () => {
+		$('form').jsFormBasics();
+	};
 
-  // auto-apply
-  $(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
-    init();
-  });
+	// auto-apply
+	$(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
+		init();
+	});
 
-  return FormBasics;
+	return FormBasics;
 })($);
 
 export default FormBasics;
diff --git a/src/scss/_components/_ui.main.scss b/src/scss/_components/_ui.main.scss
index e9cb7e6..99fc376 100755
--- a/src/scss/_components/_ui.main.scss
+++ b/src/scss/_components/_ui.main.scss
@@ -112,12 +112,12 @@ textarea,
 }
 
 .btn-toolbar {
-    margin-top: $grid-gutter-height / 2;
+    margin-top: $field-gutter-height;
 }
 
 .field {
     position: relative;
-    margin: ($grid-gutter-height / 2) 0;
+    margin: $field-gutter-height 0;
 
     &.composite {
         margin-top: 0;
@@ -173,8 +173,8 @@ textarea,
 
 // element col paddings
 .col-block {
-    padding-top: $grid-gutter-height / 4;
-    padding-bottom: $grid-gutter-height / 4;
+    padding-top: $col-block-gutter-height;
+    padding-bottom: $col-block-gutter-height;
 }
 
 // rewrite btn opacity on hover
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 8cec249..e7b4cf7 100755
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -36,6 +36,9 @@ $grid-gutter-height: 2rem !default;
 $grid-gutter-xs-width: $grid-gutter-width / 2 !default;
 $grid-gutter-element-height: $grid-gutter-height * 2 !default;
 
+$field-gutter-height: $grid-gutter-height / 2 !default;
+$col-block-gutter-height: $grid-gutter-height / 4 !default;
+
 $footer-size: 18.5rem !default;
 $footer-bar-size: 2.5rem !default;