feat(*): introducing grid and new breakpoints (#751)

alfa-laboratory · Dec 19, 2018 · 20f5178 · 20f5178
1 parent 394c1a1
commit 20f5178
Show file tree

Hide file tree

Showing 18 changed files with 1,008 additions and 10 deletions.
diff --git a/README_MOBILE.md b/README_MOBILE.md
@@ -14,7 +14,9 @@
 
 Для консистентной работы среди всех поддерживаемых браузеров используется единица измерения `em`.
 
+```css
 body { font-size: 16px };
+```
 
 - `--small`         0 to 100%
 - `--small-only`    0 to 767px
@@ -31,6 +33,21 @@ body { font-size: 16px };
 - `--xxlarge`       1920px to 100%
 - `--xxlarge-only`  1920px to 100%
 
+- `--mobile-s`      320px to 100%
+- `--mobile-m`      375px to 100%
+- `--mobile-l`      412px to 100%
+- `--mobile`        0 to 599px
+
+- `--tablet-s`      600px to 100%
+- `--tablet-m`      768px to 100%
+- `--tablet`        600px to 1023px
+
+- `--desktop-s`     1024px to 100%
+- `--desktop-m`     1280px to 100%
+- `--desktop-l`     1440px to 100%
+- `--desktop-xl`    1920px to 100%
+- `--desktop`       1024px to 100%
+
 ### Пример использования в CSS
 
 ```css

diff --git a/src/grid-col/README.md b/src/grid-col/README.md
@@ -0,0 +1,160 @@
+```jsx
+const style = {
+    height: 30,
+    lineHeight: '30px',
+    color: '#fff',
+    background: '#ff5c5c',
+    textAlign: 'center',
+    marginTop: 10
+};
+<div>
+    <GridRow>
+        <GridCol width={ { desktop: { m: 12 } } }>
+            <div style={ { ...style, background: '#f04539', marginTop: 0 } }>12</div>
+        </GridCol>
+    </GridRow>
+    <GridRow>
+        {
+            [1, 2].map(key => (
+                <GridCol width='6' key={ key }>
+                    <div style={ style }>6</div>
+                </GridCol>
+            ))
+        }
+    </GridRow>
+    <GridRow>
+        {
+            [1, 2, 3].map(key => (
+                <GridCol width='4' key={ key }>
+                    <div style={ { ...style, background: '#f04539' } }>4</div>
+                </GridCol>
+            ))
+        }
+    </GridRow>
+    <GridRow>
+        {
+            [1, 2, 3, 4].map(key => (
+                <GridCol width='3' key={ key }>
+                    <div style={ style }>3</div>
+                </GridCol>
+            ))
+        }
+    </GridRow>
+    <GridRow>
+        {
+            [1, 2, 3, 4, 5, 6].map(key => (
+                <GridCol width='2' key={ key }>
+                    <div style={ { ...style, background: '#f04539' } }>2</div>
+                </GridCol>
+            ))
+        }
+    </GridRow>
+    <GridRow>
+        {
+            [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(key => (
+                <GridCol width='1' key={ key }>
+                    <div style={ style }>1</div>
+                </GridCol>
+            ))
+        }
+    </GridRow>
+</div>
+```
+
+### Адаптивная ширина
+
+Сетку можно настроить для каждой контрольной точки для построения сложного адаптивного интерфейса.
+
+```jsx
+const style = {
+    height: 30,
+    lineHeight: '30px',
+    color: '#fff',
+    textAlign: 'center',
+    background: '#ff5c5c',
+    marginBottom: '10px'
+};
+<div style={ { marginBottom: '-10px' } }>
+    <GridRow>
+        <GridCol width={ { mobile: 12, tablet: 12, desktop: 4 } }>
+            <div style={ style } />
+        </GridCol>
+        <GridCol width={ { mobile: 12, tablet: 6, desktop: 4 } }>
+            <div style={ { ...style, background: '#f04539' } } />
+        </GridCol>
+        <GridCol width={ { mobile: 12, tablet: 6, desktop: 4 } }>
+            <div style={ style } />
+        </GridCol>
+    </GridRow>
+</div>
+```
+
+### Вертикальное выравнивание
+
+```jsx
+const style = {
+    height: 30,
+    background: '#ff5c5c'
+};
+<div style={ { background: '#f3f4f5' } }>
+    <GridRow>
+        <GridCol align='top'>
+            <div style={ style } />
+        </GridCol>
+        <GridCol align='middle'>
+            <div style={ { ...style, background: '#f04539' } } />
+        </GridCol>
+        <GridCol align='bottom'>
+            <div style={ style } />
+        </GridCol>
+        <div style={ { width: 0, height: 90, padding: 0 } } />
+    </GridRow>
+</div>
+```
+
+### Изменение порядка элементов
+
+```jsx
+const style = {
+    height: 30,
+    lineHeight: '30px',
+    color: '#fff',
+    textAlign: 'center',
+    background: '#ff5c5c'
+};
+<GridRow>
+    <GridCol order='1'>
+        <div style={ style }>Первый (order=1)</div>
+    </GridCol>
+    <GridCol order='3'>
+        <div style={ style }>Второй (order=3)</div>
+    </GridCol>
+    <GridCol order='2'>
+        <div style={ { ...style, background: '#f04539' } }>Третий (order=2)</div>
+    </GridCol>
+</GridRow>
+```
+
+Для быстрого изменения порядка одного элемента, возможно использование значений `first` и `last`.
+
+### Смещение колонок
+
+```jsx
+const style = {
+    height: 30,
+    lineHeight: '30px',
+    color: '#fff',
+    textAlign: 'center',
+    background: '#ff5c5c'
+};
+<div>
+    <GridRow>
+        <GridCol width='4'>
+            <div style={ style }>width 4</div>
+        </GridCol>
+        <GridCol width='4' offset='4'>
+            <div style={ { ...style, background: '#f04539' } }>width 4, offset 4</div>
+        </GridCol>
+    </GridRow>
+</div>
+```
diff --git a/src/grid-col/__snapshots__/grid-col.test.jsx.snap b/src/grid-col/__snapshots__/grid-col.test.jsx.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`grid-col should render without problems 1`] = `
+<div
+  className="grid-col grid-col_theme_alfa-on-white"
+/>
+`;
diff --git a/src/grid-col/grid-col.css b/src/grid-col/grid-col.css
@@ -0,0 +1,131 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+:root {
+    --col-width: calc(100% / 12);
+}
+
+.grid-col {
+    max-width: 100%;
+    min-height: 1px;
+    -ms-flex-preferred-size: 0;
+    flex-basis: 0;
+    -webkit-box-flex: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+
+    @for $i from 0 to 24 by 8 {
+        &_gutter_$(i) {
+            padding-left: calc($(i)px / 2);
+            padding-right: calc($(i)px / 2);
+        }
+    }
+
+    &_width_auto {
+        flex: 0 0 auto;
+        width: auto;
+        max-width: none;
+    }
+
+    &_width_available {
+        flex-basis: auto;
+        min-height: auto;
+        height: auto;
+    }
+
+    &_align_top {
+        align-self: flex-start;
+    }
+
+    &_align_middle {
+        align-self: center;
+    }
+
+    &_align_bottom {
+        align-self: flex-end;
+    }
+
+    @for $i from 1 to 12 {
+        &_width_$(i) {
+            flex: 0 0 calc(var(--col-width) * $(i));
+            max-width: calc(var(--col-width) * $(i));
+        }
+    }
+
+    @for $i from 1 to 11 {
+        &_offset_$(i) {
+            margin-left: calc(var(--col-width) * $(i));
+        }
+    }
+
+    &_order_first {
+        order: -1;
+    }
+
+    &_order_last {
+        order: 13;
+    }
+
+    @for $i from 1 to 12 {
+        &_order_$(i) {
+            order: $(i);
+        }
+    }
+
+    @each $breakpoint in
+        mobile, mobile-s, mobile-m, mobile-l,
+        tablet, tablet-s, tablet-m,
+        desktop, desktop-s, desktop-m, desktop-l, desktop-xl {
+        @media (--$(breakpoint)) {
+            @for $i from 8 to 24 by 8 {
+                &_gutter-$(breakpoint)_$(i) {
+                    padding-left: calc($(i)px / 2);
+                    padding-right: calc($(i)px / 2);
+                }
+            }
+
+            &_width-$(breakpoint)_auto {
+                flex: 0 0 auto;
+                width: auto;
+                max-width: none;
+            }
+
+            &_width-$(breakpoint)_available {
+                flex-basis: auto;
+                min-height: auto;
+                height: auto;
+            }
+
+            @for $i from 1 to 12 {
+                &_width-$(breakpoint)_$(i) {
+                    flex: 0 0 calc(var(--col-width) * $(i));
+                    max-width: calc(var(--col-width) * $(i));
+                }
+            }
+
+            @for $i from 1 to 11 {
+                &_offset-$(breakpoint)_$(i) {
+                    margin-left: calc(var(--col-width) * $(i));
+                }
+            }
+
+            &_order-$(breakpoint)_first {
+                order: -1;
+            }
+
+            &_order-$(breakpoint)_last {
+                order: 13;
+            }
+
+            @for $i from 1 to 12 {
+                &_order-$(breakpoint)_$(i) {
+                    order: $(i);
+                }
+            }
+        }
+    }
+
+    [hidden] {
+        display: none !important;
+    }
+}