Сетки для всего или как использовать чужие недостатки
•Download as PPTX, PDF•
0 likes•906 views
Версия для конференции DUMP
Сетки для всего или как использовать чужие недостатки
- 1. Сетки для всего или как использовать чужие недостатки Василий Аксёнов @outring, outring@gmail.com
- 4. margin: auto min-width: 960px max-width: 1280px
- 10. Зачем?
- 18. Единообразие размеров Простота и скорость разработки
- 19. Подробнее о сетках goo.gl/wKuO Модульные сетки. Алексей Черенкевич
- 20. А как же дизайн?
- 21. Взаимосвязь сеток Сетка Сетка дизайна вёрстки
- 24. .prefix- .omega .pull- .push- .alfa .suffix-
- 25. IBlock int Position int Width
- 26. .col-1 .span-5
- 30. Взять всё, да и поделить!
- 31. 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5
- 35. goo.gl/cPgoq
- 36. 100 200 % 300 % 10 %
- 37. 9,45 18,9 % 28,35 % 9,45 padding-right: 90.55 %
- 38. Но…
- 39. 500 % 10 % 100 %
- 40. 300px 60px 600px
- 41. 300px 60px 604px
- 42. 305px 61px 610 px
- 43. 302px 60,4px 60px 604 px
- 45. 20 40 % 60 % 50 % 80 % 100 %
- 48. position: relative left: 20%
- 49. Результат <div class="g-12"> <div class="g-col-1 g-span-5"></div> <div class="g-col-6 g-span-7"></div> </div>
- 50. Универсальный и быстрый CSS
- 52. .g-12 { width: 41.76% } .g-24 { width: 21.15% } .g-span-3 { width: 60% } .g-span-4 { width: 80% }
- 60. .g-10 > .g-span-5
- 62. .g-10 > .g-span-3 > .g-span-4
- 64. .g-restore .g-10 > .g-span-3 > .g-span-4
- 66. Вёрстка форм
- 67. Label Input
- 68. Label Input
- 74. .g-row > .g-span-1 > .g-span-2 .g-row > .g-span-1 > .g-span-2
- 75. .g-span-1 . g-span-2 . g-span-1.g-first . g-span-2
- 76. .g-last?
- 77. AnyGrid.net
- 78. LESS, Sass, SCSS, Stylus