diff --git a/UI/WebServerResources/scss/core/layout-attributes.scss b/UI/WebServerResources/scss/core/layout-attributes.scss
index 8782602f0..a2302cad1 100644
--- a/UI/WebServerResources/scss/core/layout-attributes.scss
+++ b/UI/WebServerResources/scss/core/layout-attributes.scss
@@ -3,3 +3,98 @@
 // Import from sources for extends
 // -------------------------------
 @import "../../angular-material/src/core/services/layout/layout-attributes";
+
+$sogo-breakpoints: 'xs' 'gt-xs' 'sm' 'gt-sm' 'md' 'gt-md';
+
+@mixin layouts_for_breakpoint($name:null) {
+  @if $name == null or index($sogo-breakpoints, $name) != null {
+    @debug "layouts_for_breakpoint: #{$name}";
+    @include flex-order-for-name($name); // ~44KB
+    @include offset-for-name($name); // ~11KB
+    @include layout-align-for-name($name);
+
+    @include flex-properties-for-name($name); // ~400KB
+    @include layout-for-name($name);
+  }
+}
+
+@mixin flex-properties-for-name($name: null) {
+  $flexName: 'flex';
+  @if $name != null {
+    $flexName: 'flex-#{$name}';
+    $name : '-#{$name}';
+  } @else {
+    $name : '';
+  }
+
+  [#{$flexName}]             { flex: 1;         box-sizing: border-box; }  // === flex: 1 1 0%;
+
+  [#{$flexName}-grow]        { flex: 1 1 100%;  box-sizing: border-box; }
+  [#{$flexName}-initial]     { flex: 0 1 auto;  box-sizing: border-box; }
+  [#{$flexName}-auto]        { flex: 1 1 auto;  box-sizing: border-box; }
+  [#{$flexName}-none]        { flex: 0 0 auto;  box-sizing: border-box; }
+
+  // (1-10) * 10 = 0-100%
+  @for $i from 0 through 10 {
+    $value : #{$i * 10 + '%'};
+
+    [#{$flexName}="#{$i * 10}"] {
+      flex: 1 1 #{$value};
+      max-width: #{$value};
+      max-height: 100%;
+      box-sizing: border-box;
+    }
+
+    [layout="row"] > [#{$flexName}="#{$i * 10}"] {
+      flex: 1 1 #{$value};
+      max-width: #{$value};
+      max-height: 100%;
+      box-sizing: border-box;
+    }
+
+    [layout="column"] > [#{$flexName}="#{$i * 10}"] {
+      flex: 1 1 #{$value};
+      max-width: 100%;
+      max-height: #{$value};
+      box-sizing: border-box;
+    }
+
+    @if $name != '' {
+      [layout#{$name}="row"] > [#{$flexName}="#{$i * 10}"] {
+        flex: 1 1 #{$value};
+        max-width: #{$value};
+        max-height: 100%;
+        box-sizing: border-box;
+      }
+
+      [layout#{$name}="column"] > [#{$flexName}="#{$i * 10}"] {
+        flex: 1 1 #{$value};
+        max-width: 100%;
+        max-height: #{$value};
+        box-sizing: border-box;
+      }
+    }
+  }
+
+  [layout="row"] {
+    > [#{$flexName}="33"]   , > [#{$flexName}="33"]     {  flex: 1 1 33.33%;  max-width: 33.33%;  max-height: 100%; box-sizing: border-box; }
+    > [#{$flexName}="66"]   , > [#{$flexName}="66"]     {  flex: 1 1 66.66%;  max-width: 66.66%;  max-height: 100%; box-sizing: border-box; }
+  }
+
+  [layout="column"] {
+    > [#{$flexName}="33"]   , > [#{$flexName}="33"]     {  flex: 1 1 33.33%;  max-width: 100%;  max-height: 33.33%; box-sizing: border-box; }
+    > [#{$flexName}="66"]   , > [#{$flexName}="66"]     {  flex: 1 1 66.66%;  max-width: 100%;  max-height: 66.66%; box-sizing: border-box; }
+  }
+
+  @if $name != '' {
+    [layout#{$name}="row"] {
+      > [#{$flexName}="33"]   , > [#{$flexName}="33"]     {  flex: 1 1 33.33%;  max-width: 33.33%;  max-height: 100%; box-sizing: border-box; }
+      > [#{$flexName}="66"]   , > [#{$flexName}="66"]     {  flex: 1 1 66.66%;  max-width: 66.66%;  max-height: 100%; box-sizing: border-box; }
+    }
+
+    [layout#{$name}="column"] {
+      > [#{$flexName}="33"]   , > [#{$flexName}="33"]     {  flex: 1 1 33.33%;  max-width: 100%;  max-height: 33.33%; box-sizing: border-box; }
+      > [#{$flexName}="66"]   , > [#{$flexName}="66"]     {  flex: 1 1 66.66%;  max-width: 100%;  max-height: 66.66%; box-sizing: border-box; }
+    }
+  }
+}