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

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

Василий Аксёнов@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 %

𝑊 𝑔𝑢𝑡𝑡𝑒𝑟𝑙𝑒𝑠𝑠=𝑁 𝑐𝑜𝑛𝑡𝑎𝑖𝑛𝑒𝑟 𝑐𝑜𝑙𝑠

𝑁𝑔𝑟𝑖𝑑 𝑐𝑜𝑙𝑠

×100

𝑊 𝑔𝑢𝑡𝑡𝑒𝑟𝑙𝑒𝑠𝑠=512×100=41,67

𝑊=𝑊 𝑔𝑢𝑡𝑡𝑒𝑟𝑙𝑒𝑠𝑠+𝑊𝑔𝑢𝑡𝑡𝑒𝑟𝑙𝑒𝑠𝑠×𝑊 𝑔𝑢𝑡𝑡𝑒𝑟 (𝑊 𝑐𝑜𝑙)

𝑁𝑔𝑟𝑖𝑑 𝑐𝑜𝑙𝑠

𝑊=41,67+41,67×0,25

12=42,53

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-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