Upload
uxkontur
View
3.809
Download
1
Embed Size (px)
DESCRIPTION
Доклад Василия Аксенова на конференции DUMP-2012.
Citation preview
margin: automin-width: 960px
max-width: 1280px
Нам нужна она
Зачем?
Единообразие размеровПростота и скорость разработки
Подробнее о сетках
goo.gl/wKuOМодульные сетки. Алексей Черенкевич
А как же дизайн?
Взаимосвязь сеток
Сетка дизайна
Сетка вёрстки
.prefix-
.suffix-.alfa
.omega
.push-.pull-
IBlockint
Positionint Width
.col-1 .span-5
Взять всё, да и поделить!
5 5 5 5 55 5 5 5 55 5 5 5 55 5 5 5 5
goo.gl/cPgoq
10 %
100
200 %
300 %
padding-right: 90.55 %9,45
9,45
18,9 %
28,35 %
Но…
100 %10 %
500 %
600px60px
300px
604px60px
300px
610 px61px
305px
604 px60px
302px
60,4px
БОЛЬШЕ КОЛОНОК!!!!!
50 %
20
40 %
60 %
80 %
100 %
width: 20%margin-right: −20%
position: relativeleft: 20%
Результат
<div class="g-12"><div class="g-col-1 g-span-5"></div><div class="g-col-6 g-span-7"></div>
</div>
Универсальныйи быстрый CSS
.container-16 .grid-5
.container-16 .grid-6
.container-16 .grid-7
.g-12 { width: 41.76% }
.g-24 { width: 21.15% }
.g-span-3 { width: 60% }
.g-span-4 { width: 80% }
Независимость блоков
Мультиконфигурационность
Бесконечная вложенность
Восстановление контекста
.g-10 > .g-span-5
.g-10 > .g-span-3 > .g-span-4
.g-restore.g-10
> .g-span-3 > .g-span-4
Вёрстка форм
Label Input
Label Input
Фиксированная сетка
Просто добавь ширину!
Разбиение по строкам
.g-span-1
.g-span-2.g-row
.g-span-1
.g-span-2
.g-row > .g-span-1 > .g-span-2
.g-row > .g-span-1 > .g-span-2
.g-span-1. g-span-2
. g-span-1.g-first. g-span-2
.g-last?
AnyGrid.net
LESS, Sass, SCSS, Stylus