sharps
Version:
Modular grid powered by Lost and BEM
184 lines (131 loc) • 3.82 kB
Markdown
# Row
Контейнер для колонок. По смыслу схож с тэгом `<tr>` ;-)
## Использование блока
``` js
{
block : 'row',
content : [
]
}
```
## Модификаторы блока
### _reverse
Задает обратный порядок колонок.
### _sal, _mal, _lal, _xlal, _xxlal
Выравнивание колонок по левому краю.
### _sac, _mac, _lac, _xlac, _xxlac
Выравнивание колонок горизонтально по центру.
### _sar, _mar, _lar, _xlar, _xxlar
Выравнивание колонок по правому краю.
### _svat, _mvat, _lvat, _xlvat, _xxlvat
Выравнивание колонок по верхнему краю.
### _svam, _mvam, _lvam, _xlvam, _xxlvam
Выравнивание колонок вертикально по центру.
### _svab, _mvab, _lvab, _xlvab, _xxlvab
Выравнивание колонок по нижнему краю.
### _no-flexbox
Будет автоматически добавлен блоку `row`, если браузер не поддерживает flexbox'ы, а затем
создаст деградацию до таблиц.
### _type
***js***
Добавляет JavaScript методы для управления колонками и сеткой.
## Элементы блока
### __col
Колонка.
## Использование элемента
``` js
{
block : 'row',
content : [
{
elem : 'col',
content : [
]
}
]
}
```
## Модификаторы элемента __col
### _sw, _mw, _lw, _xlw, _xxlw
Ширина на маленьких, средних и больших разамерах экрана. Целое значение от 1 до количества колонок.
0 делает колонку невидимой на данном размере экрана. Количество колонок можно варьировать в блоке `variables`.
``` js
{
block : 'row',
content : [
{
elem : 'col',
mods : { sw : 2, mw : 4, lw : 12 },
content : [
]
},
{
elem : 'col',
mods : { sw : 10, mw : 8, lw : 0 },
content : [
]
}
]
}
```
### _so, _mo, _lo, _xlo, _xxlo
Отступ на маленьких, средних и больших разамерах экрана. Целое значение от 1 до количества колонок.
Количество колонок можно варьировать в блоке `variables`.
``` js
{
block : 'row',
content : [
{
elem : 'col',
mods : { so : 2, mo : 3, lo : 1, mw : 3 },
content : [
]
}
]
}
```
### _s, _m, _l, _xl, _xxl
Задает колонкам автоматическую ширину на маленьких, средних и больших разамерах экрана.
``` js
{
block : 'row',
content : [
{
elem : 'col',
mods : { s : true },
content : [
]
}
]
}
```
### _sof, _mof, _lof, _xlof, _xxlof
Отображает колонку как первую.
``` js
{
block : 'row',
content : [
{
elem : 'col',
mods : { sof : true },
content : [
]
}
]
}
```
### _sol, _mol, _lol, _xlol, _xxlol
Отображает колонку как последнюю.
``` js
{
block : 'row',
content : [
{
elem : 'col',
mods : { sol : true },
content : [
]
}
]
}
```