grid.styl

/*
 * Динамическая сетка 
 * Внедряется подмешиванием DOM-узлу поведенческих классов: grid_col_3, grid_cell...
 */

.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
            width auto

        // Общий контейнер сетки
        &_wrap
            widthForCol(colNum, 2 * marginX)
            margin 0 auto

        // Горизонтальные отступы = полям сетки
        &_marginX
            padding-left marginX
            padding-right marginX

        // Отрицательные горизонтальные отступы, обнуляющие поля сетки
        &_unmarginX {
            margin-left - marginX
            margin-right - marginX
        }

        // Правый отступ = межколонник
        &_gapMarginRight
            margin-right gapWidth

        // Левый отступ = межколонник
        &_gapMarginLeft
            margin-left gapWidth

        // Ячейки с горизонтальным отступом gapWidth
        &_cell {
            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)