Сетки для всегоили как использовать чужие недостатки

Василий Аксёнов

@outring, outring@gmail.com

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

@outringoutring@gmail.com