Доклад Василия Аксенова на конференции DUMP-2012.

1. Сетки для всего
или как использовать чужие недостатки
Василий Аксёнов
@outring, outring@gmail.com

4. margin: auto
min-width: 960px
max-width: 1280px

9. Нам нужна она

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 %

47. width: 20%
margin-right: −20%

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

51. .container-16 .grid-5
.container-16 .grid-6
.container-16 .grid-7

52. .g-12 { width: 41.76% }
.g-24 { width: 21.15% }
.g-span-3 { width: 60% }
.g-span-4 { width: 80% }

53. Независимость блоков

55. Мультиконфигурационность

57. Бесконечная вложенность

58. Восстановление контекста

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

70. Фиксированная сетка

71. Просто добавь ширину!

72. Разбиение по строкам

73. .g-span-1
.g-span-2
.g-row
.g-span-1
.g-span-2

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

79. @outring
outring@gmail.com