Skip to content

Instantly share code, notes, and snippets.

@kovchiy kovchiy/grid.styl
Last active Aug 31, 2017

Embed
What would you like to do?
/*
* Динамическая сетка
* Внедряется подмешиванием 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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.