Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Сетки для всегоили как использовать чужие недостатки          Василий Аксёнов     @outring, outring@gmail.com
margin: automin-width: 960pxmax-width: 1280px
Нам   нужна она
Зачем?
Подробнее о сетках       goo.gl/wKuOМодульные сетки. Алексей Черенкевич
А как же дизайн?
Взаимосвязь сеток Сетка         Сеткадизайна       вёрстки
.prefix-   .omega.pull-               .push-     .alfa    .suffix-
IBlock   int Position   int Width
.col-1 .span-5
Взять всё, да и поделить!
55555555555555555555
goo.gl/cPgoq
100  200 %       300 %10 %
9,45  18,9 %       28,35 %9,45       padding-right: 90.55%
Но…
500 %10 %           100 %
300px60px           600px
300px60px           604px
305px61px           610 px
302px60,4px   60px           604 px
2040 %     60 %        50 %      80 %        100 %
width: 20%margin-right: −20%
position: relative    left: 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
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Сетки для всего или как использовать чужие недостатки (Василий Аксенов)
Upcoming SlideShare
Loading in …5
×

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

1,848 views

Published on

  • Be the first to comment

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

  1. 1. Сетки для всегоили как использовать чужие недостатки Василий Аксёнов @outring, outring@gmail.com
  2. 2. margin: automin-width: 960pxmax-width: 1280px
  3. 3. Нам нужна она
  4. 4. Зачем?
  5. 5. Подробнее о сетках goo.gl/wKuOМодульные сетки. Алексей Черенкевич
  6. 6. А как же дизайн?
  7. 7. Взаимосвязь сеток Сетка Сеткадизайна вёрстки
  8. 8. .prefix- .omega.pull- .push- .alfa .suffix-
  9. 9. IBlock int Position int Width
  10. 10. .col-1 .span-5
  11. 11. Взять всё, да и поделить!
  12. 12. 55555555555555555555
  13. 13. goo.gl/cPgoq
  14. 14. 100 200 % 300 %10 %
  15. 15. 9,45 18,9 % 28,35 %9,45 padding-right: 90.55%
  16. 16. Но…
  17. 17. 500 %10 % 100 %
  18. 18. 300px60px 600px
  19. 19. 300px60px 604px
  20. 20. 305px61px 610 px
  21. 21. 302px60,4px 60px 604 px
  22. 22. 2040 % 60 % 50 % 80 % 100 %
  23. 23. width: 20%margin-right: −20%
  24. 24. position: relative left: 20%
  25. 25. Результат<div class="g-12"> <div class="g-col-1 g-span-5"></div> <div class="g-col-6 g-span-7"></div></div>
  26. 26. Универсальный и быстрый CSS
  27. 27. .container-16 .grid-5.container-16 .grid-6.container-16 .grid-7
  28. 28. Независимость блоков
  29. 29. Мультиконфигурационность
  30. 30. Бесконечная вложенность
  31. 31. Восстановление контекста
  32. 32. .g-10 > .g-span-5
  33. 33. .g-10 > .g-span-3 > .g-span-4
  34. 34. .g-restore .g-10 > .g-span-3 > .g-span-4
  35. 35. Вёрстка форм
  36. 36. Label Input
  37. 37. Label Input
  38. 38. Фиксированная сетка
  39. 39. Разбиение по строкам
  40. 40. .g-span-1.g-span-2 .g-row.g-span-1.g-span-2
  41. 41. .g-row > .g-span-1 > .g-span-2.g-row > .g-span-1 > .g-span-2
  42. 42. .g-span-1 . g-span-2. g-span-1.g-first . g-span-2
  43. 43. .g-last?
  44. 44. AnyGrid.net
  45. 45. LESS, Sass, SCSS, Stylus
  46. 46. @outringoutring@gmail.com

×