kovchiy · April 22, 2024 10:15 · May 10, 2016 · May 10, 2016 · May 10, 2016
diff --git a/grid.styl b/grid.styl
@@ -1,3 +1,8 @@
+/*
+ * Динамическая сетка 
+ * Внедряется подмешиванием DOM-узлу поведенческих классов: grid_col_3, grid_cell...
+ */
+
 .grid
     box-sizing border-box
 

diff --git a/grid.styl b/grid.styl
@@ -54,35 +54,35 @@
                 width 100%
 
         // Отключение модификатора col
-        &_disableCol_yes
+        &_disableCol
             width auto
 
         // Общий контейнер сетки
-        &_wrap_yes
+        &_wrap
             widthForCol(colNum, 2 * marginX)
             margin 0 auto
 
         // Горизонтальные отступы = полям сетки
-        &_marginX_yes
+        &_marginX
             padding-left marginX
             padding-right marginX
 
         // Отрицательные горизонтальные отступы, обнуляющие поля сетки
-        &_unmarginX_yes {
+        &_unmarginX {
             margin-left - marginX
             margin-right - marginX
         }
 
         // Правый отступ = межколонник
-        &_gapMarginRight_yes
+        &_gapMarginRight
             margin-right gapWidth
 
         // Левый отступ = межколонник
-        &_gapMarginLeft_yes
+        &_gapMarginLeft
             margin-left gapWidth
 
         // Ячейки с горизонтальным отступом gapWidth
-        &_cell_yes {
+        &_cell {
             display inline-block
             vertical-align top
             & + & {

diff --git a/grid.styl b/grid.styl
@@ -0,0 +1,119 @@
+.grid
+    box-sizing border-box
+
+    /*
+     * Генерирует стили для сетки
+     * @colNum   {number} число колонок
+     * @colWidth {px} ширина колонки
+     * @gapWidth {px} ширина межколонника
+     * @marginX  {px} горизонтальные поля
+     */
+    defineGrid(colNum, colWidth, gapWidth, marginX)
+
+        /*
+         * Вычисляет ширину для числа колонок @num с учетом межколонника @gapWidth
+         * @num number Число колонок
+         */
+        calcColWidth(num)
+            num * colWidth + (num - 1) * gapWidth
+
+        /*
+         * Общая ширина сетки
+         */
+        gridWidth = calcColWidth(colNum)
+
+        /*
+         * Устанавливает свойство width соответствующее функции calcColWidth
+         * @num        Число колонок
+         * @extraWidth Дополнительная ширина
+         */
+        widthForCol(num, extraWidth = 0)
+            width calcColWidth(num) + extraWidth
+
+        /*
+         * Модификаторы
+         */
+        &_col
+            for i in (1..colNum)
+                &_{i}
+                    width calcColWidth(i)
+                    &^[0]_square
+                        height @width
+                &_{i}Margin
+                    width calcColWidth(i) + marginX
+
+            &_1Left
+                widthForCol(colNum - 1)
+            &_2Left
+                widthForCol(colNum - 2)
+            &_3Left
+                widthForCol(colNum - 3)
+            &_half
+                width (gridWidth / 2 - gapWidth / 2)
+            &_max
+                width 100%
+
+        // Отключение модификатора col
+        &_disableCol_yes
+            width auto
+
+        // Общий контейнер сетки
+        &_wrap_yes
+            widthForCol(colNum, 2 * marginX)
+            margin 0 auto
+
+        // Горизонтальные отступы = полям сетки
+        &_marginX_yes
+            padding-left marginX
+            padding-right marginX
+
+        // Отрицательные горизонтальные отступы, обнуляющие поля сетки
+        &_unmarginX_yes {
+            margin-left - marginX
+            margin-right - marginX
+        }
+
+        // Правый отступ = межколонник
+        &_gapMarginRight_yes
+            margin-right gapWidth
+
+        // Левый отступ = межколонник
+        &_gapMarginLeft_yes
+            margin-left gapWidth
+
+        // Ячейки с горизонтальным отступом gapWidth
+        &_cell_yes {
+            display inline-block
+            vertical-align top
+            & + & {
+                margin-left gapWidth
+            }
+        }
+
+    /*
+     * Настройка сетки под ширину экрана
+     */
+
+    // 414dp (iphone 6+)
+    @media (min-width: 414px) and (max-width: 767px)
+        defineGrid(7, 40px, 16px, 19px)
+
+    // 411dp (Nexus 6)
+    @media (min-width: 411px) and (max-width: 413px)
+        defineGrid(7, 41px, 15px, 17px)
+
+    // 384dp (Nexus 4)
+    @media (min-width: 384px) and (max-width: 410px)
+        defineGrid(6, 45px, 16px, 17px)
+
+    // 375dp (iphone 6)
+    @media (min-width: 375px) and (max-width: 383px)
+        defineGrid(6, 45px, 15px, 15px)
+
+    // 360dp (большинство android-телефонов)
+    @media (min-width: 360px) and (max-width: 374px)
+        defineGrid(6, 40px, 16px, 20px)
+
+    // 320dp (iphone 5)
+    @media (max-width: 359px)
+        defineGrid(6, 36px, 14px, 17px)